diff --git a/src/BootstrapBlazor.Server/Components/Samples/Navbars.razor b/src/BootstrapBlazor.Server/Components/Samples/Navbars.razor
new file mode 100644
index 00000000000..f4ed79e64cd
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..6cad933b4ec
--- /dev/null
+++ 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(argo@live.ca) 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
index 4c5e2a72358..6257ea71252 100644
--- 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
index d21150eac41..ff02ed9722e 100644
--- 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
index 3cea5bb4290..aaabe294bf2 100644
--- 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
index 6b65fd874dc..92636c3bb40 100644
--- 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
index 8a26f0039b2..9672ae82968 100644
--- 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
index 20a30229440..daa6bf9ac34 100644
--- 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
new file mode 100644
index 00000000000..a5258b46909
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..ba60ee368a7
--- /dev/null
+++ 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(argo@live.ca) 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
new file mode 100644
index 00000000000..7c3244bef06
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..529836ec984
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..8428b8f2242
--- /dev/null
+++ 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(argo@live.ca) 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();
+}
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarCollapse.razor b/src/BootstrapBlazor/Components/Navbar/NavbarCollapse.razor
new file mode 100644
index 00000000000..deed7046e66
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarCollapse.razor
@@ -0,0 +1,6 @@
+@namespace BootstrapBlazor.Components
+@inherits IdComponentBase
+
+<div @attributes="AdditionalAttributes" id="@Id" class="@ClassString">
+    @ChildContent
+</div>
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarCollapse.razor.cs b/src/BootstrapBlazor/Components/Navbar/NavbarCollapse.razor.cs
new file mode 100644
index 00000000000..09d37d38d3e
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarCollapse.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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// NavbarCollapse 组件用于在导航栏中适配响应式布局
+/// </summary>
+public partial class NavbarCollapse
+{
+    /// <summary>
+    /// 获得/设置 子组件模板
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    private string? ClassString => CssBuilder.Default("collapse navbar-collapse")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+}
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarDropdown.razor b/src/BootstrapBlazor/Components/Navbar/NavbarDropdown.razor
new file mode 100644
index 00000000000..eaac691d4bc
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarDropdown.razor
@@ -0,0 +1,11 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapComponentBase
+
+<div @attributes="AdditionalAttributes" class="@ClassString">
+    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+        @Text
+    </a>
+    <ul class="@MenuAlignmentClass">
+        @ChildContent
+    </ul>
+</div>
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarDropdown.razor.cs b/src/BootstrapBlazor/Components/Navbar/NavbarDropdown.razor.cs
new file mode 100644
index 00000000000..70f6880167d
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarDropdown.razor.cs
@@ -0,0 +1,48 @@
+// 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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// NavbarDropdown 组件用于在导航栏中创建下拉菜单
+/// </summary>
+public partial class NavbarDropdown
+{
+    /// <summary>
+    /// 获得/设置 子组件模板
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// 获得/设置 Dropdown 菜单标题文本
+    /// </summary>
+    [Parameter]
+    public string? Text { get; set; }
+
+    /// <summary>
+    /// 获得/设置 获取菜单对齐方式 默认 none 未设置
+    /// </summary>
+    [Parameter]
+    public Alignment MenuAlignment { get; set; }
+
+    /// <summary>
+    /// 获得/设置 下拉选项方向 默认 Dropdown 向下
+    /// </summary>
+    [Parameter]
+    public Direction Direction { get; set; }
+
+    private string? ClassString => CssBuilder.Default("nav-item")
+        .AddClass(Direction.ToDescriptionString())
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    /// <summary>
+    /// 菜单对齐方式样式
+    /// </summary>
+    private string? MenuAlignmentClass => CssBuilder.Default("dropdown-menu shadow")
+        .AddClass($"dropdown-menu-{MenuAlignment.ToDescriptionString()}", MenuAlignment == Alignment.Right)
+        .Build();
+}
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarDropdownDivider.razor b/src/BootstrapBlazor/Components/Navbar/NavbarDropdownDivider.razor
new file mode 100644
index 00000000000..a8bc1334f34
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarDropdownDivider.razor
@@ -0,0 +1,4 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapComponentBase
+
+<li  @attributes="AdditionalAttributes"><hr class="dropdown-divider"></li>
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarDropdownItem.razor b/src/BootstrapBlazor/Components/Navbar/NavbarDropdownItem.razor
new file mode 100644
index 00000000000..f705f496cbf
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarDropdownItem.razor
@@ -0,0 +1,8 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapComponentBase
+
+<li @attributes="AdditionalAttributes">
+    <a class="dropdown-item" href="@Url" target="@Target">
+        @ChildContent
+    </a>
+</li>
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarDropdownItem.razor.cs b/src/BootstrapBlazor/Components/Navbar/NavbarDropdownItem.razor.cs
new file mode 100644
index 00000000000..61eb0944fac
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarDropdownItem.razor.cs
@@ -0,0 +1,30 @@
+// 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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// NavbarDropdownItem 组件用于在导航栏下拉菜单中创建菜单项
+/// </summary>
+public partial class NavbarDropdownItem
+{
+    /// <summary>
+    /// 获得/设置 子组件模板
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// 获得/设置 菜单项文本
+    /// </summary>
+    [Parameter]
+    public string? Url { get; set; }
+
+    /// <summary>
+    /// 获得/设置 A 标签 target 参数 默认 null
+    /// </summary>
+    [Parameter]
+    public string? Target { get; set; }
+}
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarGroup.razor b/src/BootstrapBlazor/Components/Navbar/NavbarGroup.razor
new file mode 100644
index 00000000000..470a443dc9e
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarGroup.razor
@@ -0,0 +1,6 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapComponentBase
+
+<div @attributes="AdditionalAttributes" class="@ClassString" style="@StyleString">
+    @ChildContent
+</div>
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarGroup.razor.cs b/src/BootstrapBlazor/Components/Navbar/NavbarGroup.razor.cs
new file mode 100644
index 00000000000..469a497b427
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarGroup.razor.cs
@@ -0,0 +1,50 @@
+// 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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// NavbarGroup 组件用于在导航栏中分组
+/// </summary>
+public partial class NavbarGroup
+{
+    /// <summary>
+    /// 获得/设置 子组件模板
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    /// <summary>
+    /// 获得/设置 是否启用滚动
+    /// </summary>
+    [Parameter]
+    public bool IsScrolling { get; set; }
+
+    /// <summary>
+    /// 获得/设置 高度值 默认 200px;
+    /// </summary>
+    [Parameter]
+    public string? Height { get; set; }
+
+    private string? ClassString => CssBuilder.Default("navbar-nav")
+        .AddClass("navbar-nav-scroll", IsScrolling)
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    private string? StyleString => CssBuilder.Default()
+        .AddStyle("--bs-scroll-height", Height, IsScrolling)
+        .AddStyleFromAttributes(AdditionalAttributes)
+        .Build();
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        Height ??= "200px";
+    }
+}
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarItem.razor b/src/BootstrapBlazor/Components/Navbar/NavbarItem.razor
new file mode 100644
index 00000000000..529836ec984
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarItem.razor
@@ -0,0 +1,6 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapComponentBase
+
+<div @attributes="AdditionalAttributes" class="@ClassString">
+    @ChildContent
+</div>
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarItem.razor.cs b/src/BootstrapBlazor/Components/Navbar/NavbarItem.razor.cs
new file mode 100644
index 00000000000..102f34842e4
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarItem.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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// NavbarItem 组件用于在导航栏中添加子组件
+/// </summary>
+public partial class NavbarItem
+{
+    /// <summary>
+    /// 获得/设置 子组件模板
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    private string? ClassString => CssBuilder.Default("navbar-item")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+}
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarLink.razor b/src/BootstrapBlazor/Components/Navbar/NavbarLink.razor
new file mode 100644
index 00000000000..5e161dc1e62
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarLink.razor
@@ -0,0 +1,24 @@
+@namespace BootstrapBlazor.Components
+@inherits ButtonBase
+
+<div class="nav-item">
+    <a @attributes="AdditionalAttributes" class="@ClassString" href="@Url" target="@Target" @onclick="@OnClickButton">
+        @if(IsAsyncLoading)
+        {
+            <i class="@LoadingIcon"></i>
+        }
+        else if (!string.IsNullOrEmpty(Icon))
+        {
+            <i class="@Icon"></i>
+        }
+        @if (!string.IsNullOrEmpty(ImageUrl))
+        {
+            <img src="@ImageUrl" class="@ImageCss" />
+        }
+        @if (!string.IsNullOrEmpty(Text))
+        {
+            <span>@Text</span>
+        }
+        @ChildContent
+    </a>
+</div>
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarLink.razor.cs b/src/BootstrapBlazor/Components/Navbar/NavbarLink.razor.cs
new file mode 100644
index 00000000000..ac5415f82d7
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarLink.razor.cs
@@ -0,0 +1,59 @@
+// 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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// NavbarLink 组件用于在导航栏中添加链接
+/// </summary>
+public partial class NavbarLink
+{
+    /// <summary>
+    /// 获得/设置 Url 默认为 #
+    /// </summary>
+    [Parameter]
+    public string? Url { get; set; }
+
+    /// <summary>
+    /// 获得/设置 A 标签 target 参数 默认 null
+    /// </summary>
+    [Parameter]
+    public string? Target { get; set; }
+
+    /// <summary>
+    /// 获得/设置 显示图片地址 默认为 null
+    /// </summary>
+    [Parameter]
+    public string? ImageUrl { get; set; }
+
+    /// <summary>
+    /// The css class of img element default value null
+    /// </summary>
+    [Parameter]
+    public string? ImageCss { get; set; }
+
+    private string? ClassString => CssBuilder.Default("nav-link")
+        .AddClass("disabled", IsDisabled)
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    private async Task OnClickButton()
+    {
+        if (IsAsync)
+        {
+            IsAsyncLoading = true;
+            IsDisabled = true;
+        }
+
+        await HandlerClick();
+
+        // 恢复按钮
+        if (IsAsync)
+        {
+            IsDisabled = IsKeepDisabled;
+            IsAsyncLoading = false;
+        }
+    }
+}
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarToggleButton.razor b/src/BootstrapBlazor/Components/Navbar/NavbarToggleButton.razor
new file mode 100644
index 00000000000..c3b115ffbde
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarToggleButton.razor
@@ -0,0 +1,14 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapComponentBase
+
+<button @attributes="AdditionalAttributes" class="@ClassString" type="button" data-bs-toggle="collapse"
+        data-bs-target="@Target" aria-expanded="false" aria-label="Toggle navigation">
+    @if (ChildContent == null)
+    {
+        <span class="navbar-toggler-icon"></span>
+    }
+    else
+    {
+        @ChildContent
+    }
+</button>
diff --git a/src/BootstrapBlazor/Components/Navbar/NavbarToggleButton.razor.cs b/src/BootstrapBlazor/Components/Navbar/NavbarToggleButton.razor.cs
new file mode 100644
index 00000000000..155ee401c80
--- /dev/null
+++ b/src/BootstrapBlazor/Components/Navbar/NavbarToggleButton.razor.cs
@@ -0,0 +1,28 @@
+// 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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// NavbarToggleButton 组件
+/// </summary>
+public partial class NavbarToggleButton
+{
+    /// <summary>
+    /// 获得/设置 联动组件选择器 默认 null
+    /// </summary>
+    [Parameter]
+    public string? Target { get; set; }
+
+    /// <summary>
+    /// 获得/设置 子组件模板
+    /// </summary>
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    private string? ClassString => CssBuilder.Default("navbar-toggler")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+}
diff --git a/src/BootstrapBlazor/wwwroot/scss/components.scss b/src/BootstrapBlazor/wwwroot/scss/components.scss
index 301cf21d748..55ec7de8039 100644
--- a/src/BootstrapBlazor/wwwroot/scss/components.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/components.scss
@@ -70,6 +70,7 @@
 @import "../../Components/Menu/Menu.razor.scss";
 @import "../../Components/Message/Message.razor.scss";
 @import "../../Components/Modal/Modal.razor.scss";
+@import "../../Components/Navbar/Navbar.razor.scss";
 @import "../../Components/NetworkMonitor/NetworkMonitorIndicator.razor.scss";
 @import "../../Components/Pagination/Pagination.razor.scss";
 @import "../../Components/Popover/Popover.razor.scss";
diff --git a/test/UnitTest/Components/NavbarTest.cs b/test/UnitTest/Components/NavbarTest.cs
new file mode 100644
index 00000000000..e44ab9c196f
--- /dev/null
+++ b/test/UnitTest/Components/NavbarTest.cs
@@ -0,0 +1,100 @@
+// 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(argo@live.ca) Website: https://www.blazor.zone
+
+namespace UnitTest.Components;
+
+public class NavbarTest : BootstrapBlazorTestBase
+{
+    [Fact]
+    public void Navbar_OK()
+    {
+        var cut = Context.RenderComponent<Navbar>(pb =>
+        {
+            pb.Add(s => s.Size, Size.Medium);
+            pb.Add(s => s.BackgroundColorCssClass, "bg-primary");
+            pb.AddChildContent<NavbarBrand>(pb =>
+            {
+                pb.AddChildContent("<a href=\"#\">NavbarBrand</a>");
+            });
+            pb.AddChildContent<NavbarToggleButton>(pb =>
+            {
+                pb.Add(a => a.Target, "#testId");
+            });
+            pb.AddChildContent<NavbarCollapse>(pb =>
+            {
+                pb.Add(a => a.Id, "testId");
+                pb.AddChildContent<NavbarGroup>(pb =>
+                {
+                    pb.Add(a => a.IsScrolling, true);
+                    pb.AddChildContent<NavbarItem>(pb =>
+                    {
+                        pb.AddChildContent("<a class=\"nav-link active\" aria-current=\"page\" href=\"\">Home</a>");
+                    });
+                    pb.AddChildContent<NavbarLink>(pb =>
+                    {
+                        pb.Add(a => a.Url, "#");
+                        pb.Add(a => a.ImageUrl, "https://example.com/logo.png");
+                        pb.Add(a => a.ImageCss, "logo-class");
+                        pb.Add(a => a.Target, "_blank");
+                        pb.AddChildContent("HomeLink");
+                    });
+                    pb.AddChildContent<NavbarDropdown>(pb =>
+                    {
+                        pb.Add(a => a.Direction, Direction.Dropup);
+                        pb.Add(a => a.MenuAlignment, Alignment.Right);
+                        pb.Add(a => a.Text, "Dropdown");
+                        pb.AddChildContent<NavbarDropdownItem>(pb =>
+                        {
+                            pb.AddChildContent("<a class=\"dropdown-item\" href=\"#\">Action</a>");
+                        });
+                        pb.AddChildContent<NavbarDropdownDivider>();
+                        pb.AddChildContent<NavbarDropdownItem>(pb =>
+                        {
+                            pb.Add(a => a.Url, "#");
+                            pb.Add(a => a.Target, "_blank");
+                        });
+                    });
+                });
+            });
+        });
+        Assert.Contains("<a href=\"#\">NavbarBrand</a>", cut.Markup);
+        Assert.Contains("data-bs-target=\"#testId", cut.Markup);
+        Assert.Contains("collapse navbar-collapse", cut.Markup);
+        Assert.Contains("navbar-nav", cut.Markup);
+        Assert.Contains("<a class=\"nav-link active\" aria-current=\"page\" href=\"\">Home</a>", cut.Markup);
+        Assert.Contains("<img src=\"https://example.com/logo.png\" class=\"logo-class\" />HomeLink", cut.Markup);
+
+        var toggle = cut.FindComponent<NavbarToggleButton>();
+        Assert.NotNull(toggle);
+
+        toggle.SetParametersAndRender(pb =>
+        {
+            pb.AddChildContent("<a href=\"#\">ToggleButton</a>");
+        });
+        Assert.Contains("<a href=\"#\">ToggleButton</a>", cut.Markup);
+    }
+
+    [Fact]
+    public async Task NavbarLink_Ok()
+    {
+        var cut = Context.RenderComponent<NavbarLink>(pb =>
+        {
+            pb.Add(a => a.Icon, "fa-test");
+            pb.Add(a => a.Text, "Home");
+            pb.Add(a => a.IsAsync, true);
+            pb.Add(a => a.OnClick, async () =>
+            {
+                await Task.Yield();
+            });
+        });
+
+        Assert.Contains("<i class=\"fa-test\"></i><span>Home</span>", cut.Markup);
+
+        var link = cut.Find("a");
+        Assert.NotNull(link);
+
+        await cut.InvokeAsync(() => link.Click());
+    }
+}