Better a11y

Overall better HTML semantics by changing the structure of the layout in markup. Visually the rendering is the same as .NET 7. A new Header.razor​​ component was added to accommodate the new layout.
Collapsible navigation was rewritten to use a small bit of inline JavaScript instead of the improvised checkbox approach. The menu has proper aria-* attributes and sets focus to the first link when opened, per WCAG guidelines.
Removed :focus​ override, this is bad practice for a11y.​
Bootstrap 5.3 / themes
Updated to Bootstrap 5.3 and embraced Bootstrap throughout the sample layout. This eliminated ~100 lines of unnecessary CSS code and simplified the HTML too. Now MainLayout.razor.css only contains error ui​ CSS code.
Enabled theming via Bootstrap 5.3's CSS variables (aka Custom Properties). This allows runtime theme changes and future proofs the code for Bootstrap vnext.
Automatic light/dark mode detected and applied via user preferences. This is a no-code solution enabled by CSS variables. Developers can remove this feature by uncommenting a single line of code in App.razor
Made use of inline svg​ icons. This enables light/dark​ themes to control icon color.
Added --bl-*​ (opt-in) CSS variables to control the theme of the NavBar component. This allows devs to easily ditch the gradient if they want to customize the template.​
Code improvements
Reduced complexity of CSS code throughout, app.css​ is much smaller and cleaner. Used updated semantics for mediaqueries.
Avoided CSS variables where code could be generated in  SampleContent == false​ templates.
Add/Removed blazor-error-ui​ CSS code based on template interactivity. The markup was removed in the prior version, but not the CSS.

Fixes issue: dotnet#50927

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.cs.json

@@ -3,7 +3,7 @@
   "name": "Webová aplikace Blazor",
   "description": "Šablona projektu pro vytvoření webové aplikace Blazor, která podporuje vykreslování na straně serveru i interaktivitu klienta. Tato šablona se dá použít pro webové aplikace s bohatými dynamickými uživatelskými rozhraními (UI).",
   "symbols/Framework/description": "Cílová architektura pro projekt",
-  "symbols/Framework/choices/net8.0/description": "Cílový net8.0",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "Pokud se tato možnost zadá, přeskočí automatické obnovení projektu při vytvoření.",
   "symbols/ExcludeLaunchSettings/description": "Určuje, jestli se má z vygenerované šablony vyloučit soubor launchSettings.json.",
   "symbols/kestrelHttpPort/description": "Číslo portu, který se má použít pro koncový bod HTTP v souboru launchSettings.json.",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.de.json

@@ -3,7 +3,7 @@
   "name": "Blazor-Web-App",
   "description": "Eine Projektvorlage zum Erstellen einer Blazor-Web-App, die sowohl serverseitiges Rendering als auch Clientinteraktivität unterstützt. Diese Vorlage kann für Web-Apps mit umfangreichen dynamischen Benutzeroberflächen (UIs) verwendet werden.",
   "symbols/Framework/description": "Das Zielframework für das Projekt.",
-  "symbols/Framework/choices/net8.0/description": "Ziel net8.0",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "Wenn angegeben, wird die automatische Wiederherstellung des Projekts beim Erstellen übersprungen.",
   "symbols/ExcludeLaunchSettings/description": "Ob launchSettings.json aus der generierten Vorlage ausgeschlossen werden soll.",
   "symbols/kestrelHttpPort/description": "Portnummer, die für den HTTP Endpunkt in launchSettings.json verwendet werden soll.",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.en.json

@@ -3,7 +3,7 @@
   "name": "Blazor Web App",
   "description": "A project template for creating a Blazor web app that supports both server-side rendering and client interactivity. This template can be used for web apps with rich dynamic user interfaces (UIs).",
   "symbols/Framework/description": "The target framework for the project.",
-  "symbols/Framework/choices/net8.0/description": "Target net8.0",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "If specified, skips the automatic restore of the project on create.",
   "symbols/ExcludeLaunchSettings/description": "Whether to exclude launchSettings.json from the generated template.",
   "symbols/kestrelHttpPort/description": "Port number to use for the HTTP endpoint in launchSettings.json.",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.es.json

@@ -3,7 +3,7 @@
   "name": "Aplicación web Blazor",
   "description": "Plantilla de proyecto para crear una aplicación web de Blazor que admita tanto la representación del lado del servidor como la interactividad del cliente. Esta plantilla se puede usar para las aplicaciones web con interfaces de usuario dinámicas enriquecidas.",
   "symbols/Framework/description": "Marco de destino del proyecto.",
-  "symbols/Framework/choices/net8.0/description": "net8.0 de destino",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "Si se especifica, se omite la restauración automática del proyecto durante la creación.",
   "symbols/ExcludeLaunchSettings/description": "Indica si se va a excluir launchSettings.json de la plantilla generada.",
   "symbols/kestrelHttpPort/description": "Número de puerto que se va a usar para el punto de conexión HTTP en launchSettings.json.",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.fr.json

@@ -3,7 +3,7 @@
   "name": "Application web Blazor",
   "description": "Modèle de projet pour la création d’une application web Blazor qui prend en charge le rendu côté serveur et l’interactivité du client. Ce modèle peut être utilisé pour les applications web avec des interfaces utilisateur dynamiques enrichies.",
   "symbols/Framework/description": "Framework cible du projet.",
-  "symbols/Framework/choices/net8.0/description": "Cible net8.0",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "S’il est spécifié, ignore la restauration automatique du projet lors de la création.",
   "symbols/ExcludeLaunchSettings/description": "Indique s’il faut exclure launchSettings.json du modèle généré.",
   "symbols/kestrelHttpPort/description": "Numéro de port à utiliser pour le point de terminaison HTTP dans launchSettings.json.",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.it.json

@@ -3,7 +3,7 @@
   "name": "App Web Blazor",
   "description": "Modello di progetto per la creazione di un'app Web Blazor che supporta sia il rendering lato server sia l'interattività client. Questo modello può essere usato per app Web con interfacce utente dinamiche avanzate.",
   "symbols/Framework/description": "Il framework di destinazione per il progetto.",
-  "symbols/Framework/choices/net8.0/description": "Destinazione net8.0",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "Se specificato, ignora il ripristino automatico del progetto durante la creazione.",
   "symbols/ExcludeLaunchSettings/description": "Indica se escludere launchSettings.json dal modello generato.",
   "symbols/kestrelHttpPort/description": "Numero di porta da usare per l'endpoint HTTP in launchSettings.json.",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.ja.json

@@ -3,7 +3,7 @@
   "name": "Blazor Web アプリ",
   "description": "サーバー側のレンダリングとクライアントの対話機能の両方をサポートする Blazor Web アプリを作成するためのプロジェクト テンプレートです。このテンプレートは、リッチな動的ユーザー インターフェイス (UI) を持つ Web アプリに使用できます。",
   "symbols/Framework/description": "プロジェクトのターゲット フレームワークです。",
-  "symbols/Framework/choices/net8.0/description": "ターゲット net8.0",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "指定した場合、作成時にプロジェクトの自動復元がスキップされます。",
   "symbols/ExcludeLaunchSettings/description": "生成されたテンプレートから launchSettings.json を除外するかどうか。",
   "symbols/kestrelHttpPort/description": "launchSettings.json の HTTP エンドポイントに使用するポート番号。",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.ko.json

@@ -3,7 +3,7 @@
   "name": "Blazor 웹앱",
   "description": "서버 측 렌더링 및 클라이언트 대화형 작업을 모두 지원하는 Blazor 웹앱을 만들기 위한 프로젝트 템플릿입니다. 이 템플릿은 풍부한 동적 UI(사용자 인터페이스)가 있는 웹앱에 사용할 수 있습니다.",
   "symbols/Framework/description": "프로젝트에 대한 대상 프레임워크입니다.",
-  "symbols/Framework/choices/net8.0/description": "대상 net8.0",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "지정된 경우, 프로젝트 생성 시 자동 복원을 건너뜁니다.",
   "symbols/ExcludeLaunchSettings/description": "생성된 템플릿에서 launchSettings.json을 제외할지 여부입니다.",
   "symbols/kestrelHttpPort/description": "launchSettings.json의 HTTP 엔드포인트에 사용할 포트 번호입니다.",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.pl.json

@@ -3,7 +3,7 @@
   "name": "Aplikacja internetowa Blazor",
   "description": "Szablon projektu służący do tworzenia aplikacji internetowej platformy Blazor, która obsługuje renderowanie po stronie serwera i interakcyjność klienta. Ten szablon może być używany dla aplikacji internetowych z zaawansowanymi dynamicznymi interfejsami użytkownika.",
   "symbols/Framework/description": "Platforma docelowa dla tego projektu.",
-  "symbols/Framework/choices/net8.0/description": "Docelowa platforma net8.0",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "Jeśli ta opcja jest określona, pomija automatyczne przywracanie projektu podczas tworzenia.",
   "symbols/ExcludeLaunchSettings/description": "Określa, czy wykluczyć plik launchSettings.json z wygenerowanego szablonu.",
   "symbols/kestrelHttpPort/description": "Numer portu do użycia dla punktu końcowego HTTP w pliku launchSettings.json.",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.pt-BR.json

@@ -3,7 +3,7 @@
   "name": "Aplicativo Web Blazor",
   "description": "Um modelo de projeto para criar um aplicativo Web Blazor que dá suporte à renderização do lado do servidor e à interatividade do cliente. Este modelo pode ser usado para aplicativos da Web com interfaces de usuário (UIs) dinâmicas avançadas.",
   "symbols/Framework/description": "A estrutura de destino do projeto.",
-  "symbols/Framework/choices/net8.0/description": "net8.0 de destino",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "Se especificado, ignora a restauração automática do projeto sendo criado.",
   "symbols/ExcludeLaunchSettings/description": "Se deve excluir launchSettings.json do modelo gerado.",
   "symbols/kestrelHttpPort/description": "Número da porta a ser usada para o ponto de extremidade HTTP em launchSettings.json.",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.ru.json

@@ -3,7 +3,7 @@
   "name": "Веб-приложение Blazor",
   "description": "Шаблон проекта для создания приложения Blazor, поддерживающего как отрисовку на стороне сервера, так и интерактивные возможности клиента. Этот шаблон можно использовать для веб-приложений с многофункциональными динамическими пользовательскими интерфейсами (UI).",
   "symbols/Framework/description": "Целевая платформа для проекта.",
-  "symbols/Framework/choices/net8.0/description": "Целевая net8.0",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "Если установлено, автоматическое восстановление проекта при создании пропускается.",
   "symbols/ExcludeLaunchSettings/description": "Следует ли исключить launchSettings.json из созданного шаблона.",
   "symbols/kestrelHttpPort/description": "Номер порта, используемый для конечной точки HTTP в launchSettings.json.",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.tr.json

@@ -3,7 +3,7 @@
   "name": "Blazor Web Uygulaması",
   "description": "Hem sunucu tarafı işlemeyi hem de istemci etkileşimini destekleyen bir Blazor web uygulaması oluşturmaya yönelik proje şablonu. Bu şablon, zengin dinamik kullanıcı arabirimlerine (UI) sahip web uygulamaları için kullanılabilir.",
   "symbols/Framework/description": "Projenin hedef çerçevesi.",
-  "symbols/Framework/choices/net8.0/description": "Hedef net8.0",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "Belirtilirse, oluşturma sırasında projenin otomatik geri yüklenmesini atlar.",
   "symbols/ExcludeLaunchSettings/description": "launchSettings.json öğesinin oluşturulan şablondan dışlanıp dışlanmayacağı.",
   "symbols/kestrelHttpPort/description": "launchSettings.json içinde HTTP uç noktası için kullanılacak bağlantı noktası numarası.",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.zh-Hans.json

@@ -3,7 +3,7 @@
   "name": "Blazor Web 应用",
   "description": "用于创建支持服务器端呈现和客户端交互的 Blazor Web 应用的项目模板。此模板可用于具有丰富动态用户界面 (UI) 的 Web 应用。",
   "symbols/Framework/description": "项目的目标框架。",
-  "symbols/Framework/choices/net8.0/description": "目标 net8.0",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "如果指定，则在创建时跳过项目的自动还原。",
   "symbols/ExcludeLaunchSettings/description": "是否从生成的模板中排除 launchSettings.json。",
   "symbols/kestrelHttpPort/description": "要用于 launchSettings.json 中 HTTP 终结点的端口号。",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/localize/templatestrings.zh-Hant.json

@@ -3,7 +3,7 @@
   "name": "Blazor Web 應用程式",
   "description": "用於建立同時支援伺服器端轉譯和用戶端互動的 Blazor Web 應用程式的專案範本。此範本可用於具有豐富動態使用者介面 (UI) 的 Web 應用程式。",
   "symbols/Framework/description": "專案的目標 Framework。",
-  "symbols/Framework/choices/net8.0/description": "目標 net8.0",
+  "symbols/Framework/choices/net9.0/description": "Target net9.0",
   "symbols/skipRestore/description": "若指定，會在建立時跳過專案的自動還原。",
   "symbols/ExcludeLaunchSettings/description": "是否要從產生的範本排除 launchSettings.json。",
   "symbols/kestrelHttpPort/description": "launchSettings.json 中 HTTP 端點要使用的連接埠號碼。",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/.template.config/template.json

@@ -103,6 +103,7 @@
             "BlazorWeb-CSharp/Components/Pages/Counter.*",
             "BlazorWeb-CSharp/Components/Pages/Weather.*",
             "BlazorWeb-CSharp/Components/Layout/NavMenu.*",
+            "BlazorWeb-CSharp/Components/Layout/Header.*",
             "BlazorWeb-CSharp/wwwroot/bootstrap/**",
             "BlazorWeb-CSharp/wwwroot/favicon.*",
             "BlazorWeb-CSharp.Client/Pages/**",

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/App.razor

@@ -7,6 +7,8 @@
     <base href="/" />
     @*#if (SampleContent)
     <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
+    <!-- Remove bootstrap-dark line below to disable automatic theme detection -->
+    <link href="/bootstrap/bootstrap-dark.css" rel="stylesheet" media="(prefers-color-scheme: dark)" />
     ##endif*@
     <link rel="stylesheet" href="app.css" />
     <link rel="stylesheet" href="BlazorWeb-CSharp.styles.css" />

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/Header.razor

@@ -0,0 +1,8 @@
+<header class="navbar navbar-expand flex-wrap justify-content-between bg-body-tertiary p-0 shadow-sm">
+    <a class="navbar-brand ps-3" href="">BlazorWeb-CSharp</a>
+    <ul class="navbar-nav">
+        <li class="nav-item">
+            <a class="nav-link" href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+        </li>
+    </ul>
+</header>

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/Header.razor.css

@@ -0,0 +1,20 @@
+.navbar-brand {
+    height: 3.5rem;
+    font-size: 1.1rem;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin: 0;
+    background-color: var(--bl-blazor-brand-color1);
+}
+
+    .navbar-brand, .navbar-brand:hover, .navbar-brand:visited {
+        color: var(--bl-blazor-brand-contrast-color);
+    }
+
+@media (width >= 641px) {
+    .navbar-brand {
+        width: 250px;
+        margin-right: 1rem;
+    }
+}

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/MainLayout.razor

@@ -1,20 +1,18 @@
 @inherits LayoutComponentBase
 @*#if (SampleContent) -->
 
-<div class="page">
-    <div class="sidebar">
-        <NavMenu />
-    </div>
+<Header />
 
-    <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
+<div class="container-fluid">
+    <div class="row">
+        <NavMenu />
 
-        <article class="content px-4">
-            @Body
-        </article>
-    </main>
+        <main class="col px-4">
+            <article class="pt-4">
+                @Body
+            </article>
+        </main>
+    </div>
 </div>
 ##else
 

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/MainLayout.razor.css

@@ -1,83 +1,4 @@
-/*#if (SampleContent)*/
-.page {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-}
-
-main {
-    flex: 1;
-}
-
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
-}
-
-.top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-}
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
-
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
-
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-@media (max-width: 640.98px) {
-    .top-row {
-        justify-content: space-between;
-    }
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
-    }
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 250px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .top-row.auth ::deep a:first-child {
-        flex: 1;
-        text-align: right;
-        width: 0;
-    }
-
-    .top-row, article {
-        padding-left: 2rem !important;
-        padding-right: 1.5rem !important;
-    }
-}
-
-/*#endif*/
+/*#if (UseServer || UseWebAssembly)*/
 #blazor-error-ui {
     background: lightyellow;
     bottom: 0;
@@ -96,3 +17,4 @@ main {
         right: 0.75rem;
         top: 0.5rem;
     }
+/*#endif*/