dotnetcore · ArgoZhang · Aug 11, 2025 · Aug 8, 2025 · Aug 8, 2025 · Aug 8, 2025
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Navbars.razor b/src/BootstrapBlazor.Server/Components/Samples/Navbars.razor
@@ -0,0 +1,77 @@
+@page "/navbar"
+@inject IStringLocalizer<Navbars> Localizer
+
+<h3>@Localizer["NavbarTitle"]</h3>
+
+<h4>@Localizer["NavbarDescription"]</h4>
+
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
+    <Navbar>
+        <NavbarBrand>
+            <a>Navbar</a>
+        </NavbarBrand>
+        <NavbarToggleButton Target="#test"></NavbarToggleButton>
+        <NavbarCollapse Id="test">
+            <NavbarGroup IsScrolling="true">
+                <NavbarLink>Home</NavbarLink>
+                <NavbarLink Text="Link"></NavbarLink>
+                <NavbarDropdown Text="Dropdown">
+                    <NavbarDropdownItem>
+                        <i class="fa-solid fa-fw fa-home"></i><span>Action</span>
+                    </NavbarDropdownItem>
+                    <NavbarDropdownItem>
+                        <i class="fa-solid fa-fw fa-flag"></i><span>Another action</span>
+                    </NavbarDropdownItem>
+                    <NavbarDropdownDivider></NavbarDropdownDivider>
+                    <NavbarDropdownItem>
+                        <i class="fa-solid fa-fw fa-home"></i><span>Something else here</span>
+                    </NavbarDropdownItem>
+                </NavbarDropdown>
+                <NavbarLink IsDisabled="true">Disabled</NavbarLink>
+                <NavbarItem>
+                    <a class="nav-link">About</a>
+                </NavbarItem>
+            </NavbarGroup>
+            <NavbarGroup>
+                <ValidateForm class="d-flex" role="search" Model="_searchModel" OnValidSubmit="OnValidSubmit">
+                    <BootstrapInput class="me-2" placeholder="Search" @bind-Value="_searchModel.SearchText"
+                                    ShowLabel="false" SkipValidate="true"></BootstrapInput>
+                    <Button Color="Color.Success" IsOutline="true" ButtonType="ButtonType.Submit">Search</Button>
+                </ValidateForm>
+            </NavbarGroup>
+        </NavbarCollapse>
+    </Navbar>
+    <section ignore>
+        <p class="code-label">Nav</p>
+        <ul class="ul-demo mb-3">
+            <li><code>Size</code>: 指定导航栏响应阈值，默认 <code>Size.Medium</code></li>
+            <li><code>BackgroundColorCssClass</code>: 导航栏背景色样式，默认 null 未设置使用 <code>bg-body-tertiary</code></li>
+        </ul>
+        <p class="code-label">NavbarBrand</p>
+        <p>渲染 <code>navbar-brand</code> 样式，导航栏 Brand 当屏幕宽度小于特定阈值时导航栏会响应式收起，<code>NavbarBrand</code> 的内容始终显示</p>
+        <p class="code-label">NavbarToggleButton</p>
+        <p>渲染 <code>navbar-toggler</code> 样式，导航栏中的折叠展开按钮，当屏幕宽度小于特定阈值时显示，通过设置参数 <code>Target</code> 值指定折叠展开组件 <code>NavbarCollapse</code></p>
+        <p class="code-label">NavbarCollapse</p>
+        <p>渲染 <code>collapse navbar-collapse</code> 样式，导航栏中的可折叠展开区域，通过设置参数 <code>Id</code> 值，与组件 <code>NavbarToggleButton</code> 联动</p>
+        <p class="code-label">NavbarGroup</p>
+        <p>渲染 <code>navbar-nav</code> 样式，导航栏中区域分组容器组件</p>
+        <ul class="ul-demo">
+            <li><code>IsScrolling</code>: 是否开启滚动条</li>
+            <li><code>Height</code>: 组件高度，默认 <b>200px</b></li>
+        </ul>
+        <p class="code-label">NavbarItem</p>
+        <p>渲染 <code>navbar-item</code> 样式，导航栏中单项容器组件，通过内置自定义组件或者 <code>Html</code> 实现导航项</p>
+        <p class="code-label">NavbarLink</p>
+        <p>渲染 <code>nav-link</code> 样式，导航栏中导航组件，内部渲染为 <code>a</code> 链接</p>
+        <ul class="ul-demo">
+            <li><code>Url</code>: 导航地址</li>
+            <li><code>Target</code>: 导航目标</li>
+            <li><code>ImageUrl</code>: 图片地址</li>
+            <li><code>ImageCss</code>: 图片样式</li>
+        </ul>
+        <p class="code-label">NavbarDropdown</p>
+        <p>渲染 <code>nav-item dropdown</code> 样式，导航栏中下拉菜单组件</p>
+        <p class="code-label">NavbarDropdownItem</p>
+        <p>渲染 <code>dropdown-item</code> 样式，导航栏中下拉菜单组件内项目</p>
+    </section>
+</DemoBlock>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Navbars.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Navbars.razor.cs
@@ -0,0 +1,41 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+using Microsoft.AspNetCore.Components.Forms;
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// Navbar 示例
+/// </summary>
+public partial class Navbars
+{
+    private List<SelectedItem> _dropdownItems = [];
+    private SearchModel _searchModel = new SearchModel();
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _dropdownItems.AddRange([
+            new SelectedItem() { Text="Item1", Value="0"},
+            new SelectedItem() { Text="Item2", Value="1"},
+            new SelectedItem() { Text="Item3", Value="2"}
+        ]);
+    }
+
+    private Task OnValidSubmit(EditContext context)
+    {
+        return Task.CompletedTask;
+    }
+
+    class SearchModel
+    {
+        public string? SearchText { get; set; }
+    }
+}
diff --git a/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs b/src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs
@@ -1458,6 +1458,12 @@ void AddLayout(DemoMenuItem item)
                     Url = "footer"
                 },
                 new()
+                {
+                    IsNew = true,
+                    Text = Localizer["Navbar"],
+                    Url = "navbar"
+                },
+                new()
                 {
                     Text = Localizer["Row"],
                     Url = "row"

diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -4847,7 +4847,8 @@
     "SocketDataEntity": "DataEntity",
     "NetworkMonitor": "Network Monitor",
     "Toolbar": "Toolbar",
-    "OpcDaService": "OpcDaServer"
+    "OpcDaService": "OpcDaServer",
+    "Navbar": "Navbar"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -7165,5 +7166,11 @@
     "OpcDaDescription": "Connect to OpcDa Server to obtain PLC real-time data",
     "OpcDaNormalTitle": "Basic usage",
     "OpcDaNormalIntro": "Get an instance by injecting the service <code>IOpcDaServer</code> and call the <code>Read</code> method to get the PLC Tag value."
+  },
+  "BootstrapBlazor.Server.Components.Samples.Navbars": {
+    "NavbarTitle": "Navbar",
+    "NavbarDescription": "A powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more",
+    "NormalTitle": "Basic usage",
+    "NormalIntro": "By setting <code>NavbarBrand</code> <code>NavbarToggleButton</code> <code>NavbarCollapse</code> <code>NavbarGroup</code> <code>NavbarItem</code> to layout its internal elements"
   }
 }
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -4847,7 +4847,8 @@
     "SocketDataEntity": "通讯数据转实体类",
     "NetworkMonitor": "网络状态 NetworkMonitor",
     "Toolbar": "工具栏 Toolbar",
-    "OpcDaService": "OpcDaServer 服务"
+    "OpcDaService": "OpcDaServer 服务",
+    "Navbar": "导航栏 Navbar"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -7165,5 +7166,11 @@
     "OpcDaDescription": "连接 OpcDa Server 获得 PLC 实时数据",
     "OpcDaNormalTitle": "基本用法",
     "OpcDaNormalIntro": "通过注入服务 <code>IOpcDaServer</code> 获得实例，调用 <code>Read</code> 方法获得 PLC 位号值"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Navbars": {
+    "NavbarTitle": "Navbar 导航栏",
+    "NavbarDescription": "是网站开发中用于定义顶部导航区域或主页快速启动区域的结构化组件",
+    "NormalTitle": "基本用法",
+    "NormalIntro": "通过设置 <code>NavbarBrand</code> <code>NavbarToggleButton</code> <code>NavbarCollapse</code> <code>NavbarGroup</code> <code>NavbarItem</code> 对其内部元素布局"
   }
 }
diff --git a/src/BootstrapBlazor.Server/docs.json b/src/BootstrapBlazor.Server/docs.json
@@ -250,7 +250,8 @@
     "socket/data-entity": "Sockets\\DataEntities",
     "network-monitor": "NetworkMonitors",
     "toolbar": "Toolbars",
-    "opc-da": "OpcDa"
+    "opc-da": "OpcDa",
+    "navbar": "Navbars"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",

diff --git a/src/BootstrapBlazor.Server/wwwroot/css/site.css b/src/BootstrapBlazor.Server/wwwroot/css/site.css
@@ -52,7 +52,7 @@ html .search-dialog-mask {
     --bb-global-search-main-max-height: calc(100vh - 310px);
 }
 
-.navbar {
+.navbar-header {
     --bs-navbar-color: rgba(255,255,255,.85);
     --bs-navbar-hover-color: rgb(255,255,255);
 }

diff --git a/src/BootstrapBlazor/Components/Dropdown/Dropdown.razor.scss b/src/BootstrapBlazor/Components/Dropdown/Dropdown.razor.scss
@@ -1,3 +1,9 @@
 [data-bs-theme='dark'] .dropdown-menu {
     --bs-dropdown-bg: #{$bs-dropdown-bg-dark};
 }
+
+.dropdown-item {
+    > i + span {
+        margin-inline-start: 0.25rem;
+    }
+}
diff --git a/src/BootstrapBlazor/Components/Navbar/Navbar.razor b/src/BootstrapBlazor/Components/Navbar/Navbar.razor
@@ -0,0 +1,8 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapComponentBase
+
+<nav @attributes="@AdditionalAttributes" class="@ClassString">
+    <div class="container-fluid">
+        @ChildContent
+    </div>
+</nav>
diff --git a/src/BootstrapBlazor/Components/Navbar/Navbar.razor.cs b/src/BootstrapBlazor/Components/Navbar/Navbar.razor.cs
@@ -0,0 +1,42 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Navbar 组件
+/// </summary>
+public partial class Navbar
+{
+    /// <summary>
+    /// 获得/设置 组件大小 默认 <see cref="Size.Medium"/>
+    /// </summary>
+    [Parameter]
+    public Size Size { get; set; } = Size.Medium;
+
+    /// <summary>
+    /// 获得/设置 背景色样式名称 默认 null 未设置
+    /// </summary>
+    [Parameter]
+    public string? BackgroundColorCssClass { get; set; }
+
+    /// <summary>
+    /// 获得/设置 子组件模板
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// 获得 组件样式
+    /// </summary>
+    private string? ClassString => CssBuilder.Default("navbar")
+        .AddClass($"navbar-expand", Size == Size.None)
+        .AddClass($"navbar-expand-{Size.ToDescriptionString()}", Size != Size.None)
+        .AddClass(BackgroundColorCssClass)
+        .AddClass("bg-body-tertiary", string.IsNullOrEmpty(BackgroundColorCssClass))
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+}
+
diff --git a/src/BootstrapBlazor/Components/Navbar/Navbar.razor.scss b/src/BootstrapBlazor/Components/Navbar/Navbar.razor.scss
@@ -0,0 +1,108 @@
+.navbar {
+    --bs-navbar-toggler-focus-width: 1px;
+}
+
+.nav-link:focus-visible {
+    box-shadow: none;
+}
+
+.navbar-nav {
+    --bs-nav-link-padding-x: .5rem;
+    margin-block-start: .5rem;
+}
+
+.navbar-nav:not(:last-child) {
+    margin-block-end: .5rem;
+}
+
+.navbar-expand {
+    .navbar-nav:last-child {
+        margin-block-start: 0;
+        margin-inline-start: .5rem;
+    }
+}
+
+@media (min-width: 576px) {
+    .navbar-expand-sm {
+        .navbar-nav {
+            margin-block-start: 0;
+            margin-block-end: 0;
+        }
+
+        .navbar-nav:last-child {
+            margin-inline-start: .5rem;
+        }
+
+        .navbar-nav:not(:last-child) {
+            margin-inline-end: auto;
+        }
+    }
+}
+
+@media (min-width: 768px) {
+    .navbar-expand-md {
+        .navbar-nav {
+            margin-block-start: 0;
+            margin-block-end: 0;
+        }
+
+        .navbar-nav:last-child {
+            margin-inline-start: .5rem;
+        }
+
+        .navbar-nav:not(:last-child) {
+            margin-inline-end: auto;
+        }
+    }
+}
+
+@media (min-width: 992px) {
+    .navbar-expand-lg {
+        .navbar-nav {
+            margin-block-start: 0;
+            margin-block-end: 0;
+        }
+
+        .navbar-nav:last-child {
+            margin-inline-start: .5rem;
+        }
+
+        .navbar-nav:not(:last-child) {
+            margin-inline-end: auto;
+        }
+    }
+}
+
+@media (min-width: 1200px) {
+    .navbar-expand-xl {
+        .navbar-nav {
+            margin-block-start: 0;
+            margin-block-end: 0;
+        }
+
+        .navbar-nav:last-child {
+            margin-inline-start: .5rem;
+        }
+
+        .navbar-nav:not(:last-child) {
+            margin-inline-end: auto;
+        }
+    }
+}
+
+@media (min-width: 1400px) {
+    .navbar-expand-xxl {
+        .navbar-nav {
+            margin-block-start: 0;
+            margin-block-end: 0;
+        }
+
+        .navbar-nav:last-child {
+            margin-inline-start: .5rem;
+        }
+
+        .navbar-nav:not(:last-child) {
+            margin-inline-end: auto;
+        }
+    }
+}
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarBrand.razor b/src/BootstrapBlazor/Components/Navbar/NavbarBrand.razor
@@ -0,0 +1,6 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapComponentBase
+
+<div @attributes="AdditionalAttributes" class="@ClassString">
+    @ChildContent
+</div>
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarBrand.razor.cs b/src/BootstrapBlazor/Components/Navbar/NavbarBrand.razor.cs
@@ -0,0 +1,22 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// NavBrand 组件
+/// </summary>
+public partial class NavbarBrand
+{
+    /// <summary>
+    /// 获得/设置 子组件模板
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    private string? ClassString => CssBuilder.Default("navbar-brand")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+}