导航栏

导航栏-Bootstrap 5和Material Design 2.0组件

功能强大的响应式导航标题的文档和示例-MDB导航栏。包括 支持品牌，导航等，包括对我们的合拢插件的支持。

基本例子

导航栏的基本示例，其中包含最常见的元素，例如链接，搜索表单，品牌和 落下。所有这些都在 支持的内容部分.

注意：此示例使用 颜色 (bg-light)和 间距 （ my-2 ， my-lg-0 ， me-sm-0 ， my-sm-0 ）实用工具类。 


          <!-- Navbar -->
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!-- Container wrapper -->
            <div class="container-fluid">
              <!-- Navbar brand -->
              <a class="navbar-brand" href="#">Brand</a>

              <!-- Toggle button -->
              <button
                class="navbar-toggler"
                type="button"
                data-mdb-toggle="collapse"
                data-mdb-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <i class="fas fa-bars"></i>
              </button>

              <!-- Collapsible wrapper -->
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <!-- Left links -->
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                  </li>
                  <!-- Navbar dropdown -->
                  <li class="nav-item dropdown">
                    <a
                      class="nav-link dropdown-toggle"
                      href="#"
                      id="navbarDropdown"
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      Dropdown
                    </a>
                    <!-- Dropdown menu -->
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <li><a class="dropdown-item" href="#">Action</a></li>
                      <li><a class="dropdown-item" href="#">Another action</a></li>
                      <li><hr class="dropdown-divider" /></li>
                      <li>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
                      >Disabled</a
                    >
                  </li>
                </ul>
                <!-- Left links -->

                <!-- Search form -->
                <form class="d-flex input-group w-auto">
                  <input
                    type="search"
                    class="form-control"
                    placeholder="Type query"
                    aria-label="Search"
                  />
                  <button
                    class="btn btn-outline-primary"
                    type="button"
                    data-mdb-ripple-color="dark"
                  >
                    Search
                  </button>
                </form>
              </div>
              <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
          </nav>
          <!-- Navbar -->

这个怎么运作

在开始使用导航栏之前，您需要了解以下内容：

  • 导航栏需要使用环绕式 .navbar .navbar-expand {-sm | -md | -lg | -xl | -xxl} 用于响应崩溃和 配色方案类。
  • 导航栏及其内容默认情况下是流畅的。改变 容器以将其水平宽度限制为不同 方法。
  • 使用我们的 spacing 和 flex 实用程序类，用于控制间距 和导航栏中的对齐方式。
  • 导航栏默认情况下是响应式的，但是您可以轻松地对其进行修改以进行更改。反应灵敏 行为取决于我们的Collapse JavaScript插件。
  • 通过使用 <nav> 元素，或者，如果使用更通用的元素 元素，例如 <div>, 添加一个role="navigation"对每个 导航栏将其明确标识为辅助技术用户的地标性区域。
  • 通过对当前页面使用 aria-current =“ page” 来指示当前项，或者 一组中当前项目的 aria-current =“ true” 。

支持内容

Navbars内置了对少数子组件的支持。从以下选择 如所须：

  • 您公司，产品或项目名称的 .navbar品牌。
  • .navbar-nav 用于全高度和轻量级导航（包括对 下拉菜单）。
  • .navbar-toggler ，用于我们的崩溃插件和其他 导航切换行为。
  • 用于任何表单控件和动作的Flex和interval实用程序。
  • .navbar-text 用于添加垂直居中的文本字符串。
  • .collapse.navbar-collapse 用于由父项分组和隐藏导航栏内容 断点。

除了上面列出的内容外，导航栏还支持面包屑，表单，按钮， 图标，标志，化身，徽章等。

牌

.navbar-brand 可以应用于大多数元素，但是锚点效果最好，因为 有些元素可能需要实用程序类或自定义样式。



            <!-- As a link -->
            <nav class="navbar navbar-light bg-light">
              <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar</a>
              </div>
            </nav>

            <!-- As a heading -->
            <nav class="navbar navbar-light bg-light">
              <div class="container-fluid">
                <span class="navbar-brand mb-0 h1">Navbar</span>
              </div>
            </nav>

将图像添加到 .navbar-brand 可能总是需要自定义样式或 实用程序以适当大小。以下是一些示例。


            <!-- Just an image -->
            <nav class="navbar navbar-light bg-light">
              <div class="container">
                <a class="navbar-brand" href="#">
                  <img
                    src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp"
                    height="30"
                    alt=""
                    loading="lazy"
                  />
                </a>
              </div>
            </nav>
          

            <!-- Image and text -->
            <nav class="navbar navbar-light bg-light">
              <div class="container-fluid">
                <a class="navbar-brand" href="#">
                  <img
                    src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp"
                    height="30"
                    alt=""
                    loading="lazy"
                  />
                  MDBootstrap
                </a>
              </div>
            </nav>

不是

导航栏导航链接建立在我们的 .nav 选项上，具有自己的修饰符类 并要求使用触发类 响应式样式。 导航栏中的导航也将增长，以占据与 可能 以确保您的导航栏内容安全对齐。

活动状态（使用 .active 表示当前页面可以直接应用） 到 .nav-link 或它们的直接父 .nav-item s。

请注意，您还应该在 aria-current 属性上添加 .nav-link 本身。


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar</a>
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarNav"
                  aria-controls="navbarNav"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                  <ul class="navbar-nav">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                </div>
              </div>
            </nav>

并且由于我们在导航中使用类，因此如果出现以下情况，您可以完全避免基于列表的方法 你喜欢。


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar</a>
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarNavAltMarkup"
                  aria-controls="navbarNavAltMarkup"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                  <div class="navbar-nav">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                    <a class="nav-link" href="#">Features</a>
                    <a class="nav-link" href="#">Pricing</a>
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
                      >Disabled</a
                    >
                  </div>
                </div>
              </div>
            </nav>

形式

将各种表单控件和组件放在导航栏中：


            <nav class="navbar navbar-light bg-light">
              <div class="container-fluid">
                <form class="d-flex input-group w-auto">
                  <input
                    type="search"
                    class="form-control"
                    placeholder="Type query"
                    aria-label="Search"
                  />
                  <button
                    class="btn btn-outline-primary"
                    type="button"
                    data-mdb-ripple-color="dark"
                  >
                    Search
                  </button>
                </form>
              </div>
            </nav>

.navbar 的直接子元素使用弹性布局，默认为 justify-content：空格之间。使用其他 弹性工具根据需要进行调整 行为。


            <nav class="navbar navbar-light bg-light">
              <div class="container-fluid">
                <a class="navbar-brand">Navbar</a>
                <form class="d-flex input-group w-auto">
                  <input
                    type="search"
                    class="form-control"
                    placeholder="Type query"
                    aria-label="Search"
                  />
                  <button
                    class="btn btn-outline-primary"
                    type="button"
                    data-mdb-ripple-color="dark"
                  >
                    Search
                  </button>
                </form>
              </div>
            </nav>

深色主题的白色形式。


            <nav class="navbar navbar-dark bg-dark">
              <div class="container-fluid">
                <form class="d-flex input-group w-auto">
                  <input
                    type="search"
                    class="form-control"
                    placeholder="Type query"
                    aria-label="Search"
                  />
                  <button class="btn btn-outline-white" type="button">Search</button>
                </form>
              </div>
            </nav>

纽扣

这些导航栏形式也支持各种按钮。这也很棒 提醒您，垂直对齐工具可用于对齐不同大小的元素。


            <nav class="navbar navbar-light bg-light">
              <form class="container-fluid justify-content-start">
                <button class="btn btn-outline-success me-2" type="button">Main button</button>
                <button class="btn btn-sm btn-outline-secondary" type="button">
                  Smaller button
                </button>
              </form>
            </nav>

文本

导航栏可以在 .navbar-text 的帮助下包含一些文本。这个班 调整文本字符串的垂直对齐方式和水平间距。


            <nav class="navbar navbar-light bg-light">
              <div class="container-fluid">
                <span class="navbar-text"> Navbar text with an inline element </span>
              </div>
            </nav>

根据需要与其他组件和实用程序混合并匹配。


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar w/ text</a>
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarText"
                  aria-controls="navbarText"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarText">
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Pricing</a>
                    </li>
                  </ul>
                  <span class="navbar-text"> Navbar text with an inline element </span>
                </div>
              </div>
            </nav>

落下

您还可以在导航栏导航中使用下拉菜单。下拉菜单需要包装元素 定位，因此请确保使用单独的嵌套元素 .nav-item 和 .nav-link 如下所示。

在我们的网站中了解有关下拉菜单的更多信息 下拉文档. 


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <ul class="navbar-nav">
                  <!-- Dropdown -->
                  <li class="nav-item dropdown">
                    <a
                      class="nav-link dropdown-toggle"
                      href="#"
                      id="navbarDropdownMenuLink"
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      Dropdown link
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <li><a class="dropdown-item" href="#">Action</a></li>
                      <li><a class="dropdown-item" href="#">Another action</a></li>
                      <li>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </nav>

面包屑

非常常见的用例-导航栏中的面包屑。


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item"><a href="#">Library</a></li>
                    <li class="breadcrumb-item active" aria-current="page">
                      <a href="#">Data</a>
                    </li>
                  </ol>
                </nav>
              </div>
            </nav>

图示

从我们数百种中选择 图标 并简单地将它们添加到导航栏.

注意：我们添加了 .d-flex .flex-row 类以保留图标 导航栏折叠时插入。没有这个，他们将一堆又一堆。


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <ul class="navbar-nav d-flex flex-row">
                  <!-- Icons -->
                  <li class="nav-item me-3 me-lg-0">
                    <a class="nav-link" href="#">
                      <i class="fas fa-shopping-cart"></i>
                    </a>
                  </li>
                  <li class="nav-item me-3 me-lg-0">
                    <a class="nav-link" href="#">
                      <i class="fab fa-twitter"></i>
                    </a>
                  </li>
                  <!-- Icon dropdown -->
                  <li class="nav-item me-3 me-lg-0 dropdown">
                    <a
                      class="nav-link dropdown-toggle"
                      href="#"
                      id="navbarDropdown"
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i class="fas fa-user"></i>
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <li><a class="dropdown-item" href="#">Action</a></li>
                      <li><a class="dropdown-item" href="#">Another action</a></li>
                      <li><hr class="dropdown-divider" /></li>
                      <li>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </nav>

徽章

徽章对于演示非常有用 柜台，例如在购物车中。


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <ul class="navbar-nav">
                  <!-- Badge -->
                  <li class="nav-item">
                    <a class="nav-link" href="#">
                      <span class="badge badge-pill bg-danger">1</span>
                      <span><i class="fas fa-shopping-cart"></i></span>
                    </a>
                  </li>
                </ul>
              </div>
            </nav>

通知事项

您可以将图标与下拉列表混合使用，并创建一个通知下拉列表以指示重要新闻 对于游客。添加 .hidden-arrow 类以隐藏下拉箭头。


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <ul class="navbar-nav">
                  <!-- Notification dropdown -->
                  <li class="nav-item dropdown">
                    <a
                      class="nav-link dropdown-toggle hidden-arrow"
                      href="#"
                      id="navbarDropdownMenuLink"
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i class="fas fa-bell"></i>
                      <span class="badge rounded-pill badge-notification bg-danger">1</span>
                    </a>
                    <ul
                      class="dropdown-menu dropdown-menu-end"
                      aria-labelledby="navbarDropdownMenuLink"
                    >
                      <li><a class="dropdown-item" href="#">Some news</a></li>
                      <li><a class="dropdown-item" href="#">Another news</a></li>
                      <li>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>
                  <!-- Notification dropdown -->
                </ul>
              </div>
            </nav>

标志

结合使用下拉菜单 标志 创建语言切换。 


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <ul class="navbar-nav">
                  <!-- Icon dropdown -->
                  <li class="nav-item dropdown">
                    <a
                      class="nav-link dropdown-toggle"
                      href="#"
                      id="navbarDropdown"
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i class="united kingdom flag m-0"></i>
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <li>
                        <a class="dropdown-item" href="#"
                          ><i class="united kingdom flag"></i>English
                          <i class="fa fa-check text-success ms-2"></i
                        ></a>
                      </li>
                      <li><hr class="dropdown-divider" /></li>
                      <li>
                        <a class="dropdown-item" href="#"><i class="poland flag"></i>Polski</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"><i class="china flag"></i>中文</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"><i class="japan flag"></i>日本語</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"><i class="germany flag"></i>Deutsch</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"><i class="france flag"></i>Français</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"><i class="spain flag"></i>Español</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"><i class="russia flag"></i>Русский</a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"><i class="portugal flag"></i>Português</a>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </nav>

头像

通过组合简单的图像和下拉菜单，您可以创建具有典型用户选项的头像。


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <ul class="navbar-nav">
                  <!-- Avatar -->
                  <li class="nav-item dropdown">
                    <a
                      class="nav-link dropdown-toggle d-flex align-items-center"
                      href="#"
                      id="navbarDropdownMenuLink"
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <img
                        src="https://mdbootstrap.com/img/Photos/Avatars/img (31).webp"
                        class="rounded-circle"
                        height="22"
                        alt=""
                        loading="lazy"
                      />
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <li><a class="dropdown-item" href="#">My profile</a></li>
                      <li><a class="dropdown-item" href="#">Settings</a></li>
                      <li><a class="dropdown-item" href="#">Logout</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </nav>

内容对齐

要将导航栏内容左右对齐，请使用 me-auto 或 ms-auto 类。用于内容居中使用 flexbox 实用程序。

左对齐

在 .navbar-nav 旁边添加 .me-auto 类，以使内容与 左边。


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <!-- Container wrapper -->
              <div class="container-fluid">
                <!-- Toggle button -->
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarLeftAlignExample"
                  aria-controls="navbarLeftAlignExample"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>

                <!-- Collapsible wrapper -->
                <div class="collapse navbar-collapse" id="navbarLeftAlignExample">
                  <!-- Left links -->
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <!-- Navbar dropdown -->
                    <li class="nav-item dropdown">
                      <a
                        class="nav-link dropdown-toggle"
                        href="#"
                        id="navbarDropdown"
                        role="button"
                        data-mdb-toggle="dropdown"
                        aria-expanded="false"
                      >
                        Dropdown
                      </a>
                      <!-- Dropdown menu -->
                      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><hr class="dropdown-divider" /></li>
                        <li>
                          <a class="dropdown-item" href="#">Something else here</a>
                        </li>
                      </ul>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <!-- Left links -->
                </div>
                <!-- Collapsible wrapper -->
              </div>
              <!-- Container wrapper -->
            </nav>

右对齐

在 .navbar-nav 旁边添加 .ms-auto 类，以使内容与 正确的。


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <!-- Container wrapper -->
              <div class="container-fluid">
                <!-- Toggle button -->
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarRightAlignExample"
                  aria-controls="navbarRightAlignExample"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>

                <!-- Collapsible wrapper -->
                <div class="collapse navbar-collapse" id="navbarRightAlignExample">
                  <!-- Left links -->
                  <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <!-- Navbar dropdown -->
                    <li class="nav-item dropdown">
                      <a
                        class="nav-link dropdown-toggle"
                        href="#"
                        id="navbarDropdown"
                        role="button"
                        data-mdb-toggle="dropdown"
                        aria-expanded="false"
                      >
                        Dropdown
                      </a>
                      <!-- Dropdown menu -->
                      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><hr class="dropdown-divider" /></li>
                        <li>
                          <a class="dropdown-item" href="#">Something else here</a>
                        </li>
                      </ul>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <!-- Left links -->
                </div>
                <!-- Collapsible wrapper -->
              </div>
              <!-- Container wrapper -->
            </nav>

居中

删除 .ms-auto 或 .me-auto 类并添加 .navbar-collapse 旁边的 .justify-content-center 以将 内容。


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <!-- Container wrapper -->
              <div class="container-fluid">
                <!-- Toggle button -->
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarCenteredExample"
                  aria-controls="navbarCenteredExample"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>

                <!-- Collapsible wrapper -->
                <div
                  class="collapse navbar-collapse justify-content-center"
                  id="navbarCenteredExample"
                >
                  <!-- Left links -->
                  <ul class="navbar-nav mb-2 mb-lg-0">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <!-- Navbar dropdown -->
                    <li class="nav-item dropdown">
                      <a
                        class="nav-link dropdown-toggle"
                        href="#"
                        id="navbarDropdown"
                        role="button"
                        data-mdb-toggle="dropdown"
                        aria-expanded="false"
                      >
                        Dropdown
                      </a>
                      <!-- Dropdown menu -->
                      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><hr class="dropdown-divider" /></li>
                        <li>
                          <a class="dropdown-item" href="#">Something else here</a>
                        </li>
                      </ul>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <!-- Left links -->
                </div>
                <!-- Collapsible wrapper -->
              </div>
              <!-- Container wrapper -->
            </nav>

色彩

导航主题的主题从未如此简单，这要归功于主题类和 background-color 实用程序。从 .navbar-light 中选择用于 浅色背景色，或 .navbar-dark 深色背景色。然后， 使用 .bg-* 实用程序进行自定义。

另请参阅我们的颜色文档以了解更多信息 关于颜色。




          <nav class="navbar navbar-dark bg-dark">
            <!-- Navbar content -->
          </nav>

          <nav class="navbar navbar-dark bg-primary">
            <!-- Navbar content -->
          </nav>

          <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
            <!-- Navbar content -->
          </nav>

货柜

尽管不是必需的，但您可以将导航栏包装在 .container 使其居中在页面上-尽管请注意，内部容器仍在 需要。或者，您可以在 .navbar 内添加一个容器，以仅将 固定或静态顶部导航栏的内容。


          <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar</a>
              </div>
            </nav>
          </div>

使用任何响应式容器来更改导航栏中内容的宽度 提出了。


          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-md">
              <a class="navbar-brand" href="#">Navbar</a>
            </div>
          </nav>

放置

使用我们的位置实用程序放置导航栏 在非静态位置。从固定到顶部，固定到底部或固定在 顶部（滚动页面直到到达顶部，然后停留在顶部）。固定导航栏使用 position：fixed ，表示它们是从DOM的正常流程中提取的，并且可能 需要自定义CSS（例如，＆lt; body＆gt; 上的 padding-top ） 防止与其他元素重叠。

另请注意 .sticky-top 用途 position: sticky, 哪一个 并非所有浏览器都完全支持. 


          <nav class="navbar navbar-light bg-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Default</a>
            </div>
          </nav>
        

          <nav class="navbar fixed-top navbar-light bg-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Fixed top</a>
            </div>
          </nav>
        

          <nav class="navbar fixed-bottom navbar-light bg-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Fixed bottom</a>
            </div>
          </nav>
        

          <nav class="navbar sticky-top navbar-light bg-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Sticky top</a>
            </div>
          </nav>

响应行为

导航栏可以使用 .navbar-toggler ， .navbar-collapse 和 .navbar-expand {-sm | -md | -lg | -xl | -xxl} 类以确定它们何时包含内容 在按钮后面折叠。结合其他实用程序，您可以轻松选择何时 显示或隐藏特定元素。

对于永不崩溃的导航栏，在导航栏上添加 .navbar-expand 类。对于 总是折叠的导航栏，请勿添加任何 .navbar-expand 类。

切换器

导航栏切换器默认情况下是左对齐的，但是它们应跟随同级元素（例如 .navbar-brand ，它们会自动对齐到最右边。倒车 您的标记将反转切换器的位置。以下是不同的示例 切换样式。

在最小的断点处没有显示 .navbar-brand ：


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarTogglerDemo01"
                  aria-controls="navbarTogglerDemo01"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                  <a class="navbar-brand" href="#">Hidden brand</a>
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <form class="d-flex input-group w-auto">
                    <input
                      type="search"
                      class="form-control"
                      placeholder="Type query"
                      aria-label="Search"
                    />
                    <button
                      class="btn btn-outline-primary"
                      type="button"
                      data-mdb-ripple-color="dark"
                    >
                      Search
                    </button>
                  </form>
                </div>
              </div>
            </nav>

左侧显示品牌名称，右侧显示切换器：


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <a class="navbar-brand" href="#">Navbar</a>
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarTogglerDemo02"
                  aria-controls="navbarTogglerDemo02"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <form class="d-flex input-group w-auto">
                    <input
                      type="search"
                      class="form-control"
                      placeholder="Type query"
                      aria-label="Search"
                    />
                    <button
                      class="btn btn-outline-primary"
                      type="button"
                      data-mdb-ripple-color="dark"
                    >
                      Search
                    </button>
                  </form>
                </div>
              </div>
            </nav>

左侧带有切换开关，右侧带有品牌名称：


            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid">
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarTogglerDemo03"
                  aria-controls="navbarTogglerDemo03"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <a class="navbar-brand" href="#">Navbar</a>
                <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
                        >Disabled</a
                      >
                    </li>
                  </ul>
                  <form class="d-flex input-group w-auto">
                    <input
                      type="search"
                      class="form-control"
                      placeholder="Type query"
                      aria-label="Search"
                    />
                    <button
                      class="btn btn-outline-primary"
                      type="button"
                      data-mdb-ripple-color="dark"
                    >
                      Search
                    </button>
                  </form>
                </div>
              </div>
            </nav>

外部内容

有时您想使用折叠插件触发内容的容器元素 在结构上位于 .navbar 。因为我们的插件适用于 id 和 data-mdb-target 匹配，这很容易做到！


            <div class="collapse" id="navbarToggleExternalContent">
              <div class="bg-dark p-4">
                <h5 class="text-white h4">Collapsed content</h5>
                <span class="text-muted">Toggleable via the navbar brand.</span>
              </div>
            </div>
            <nav class="navbar navbar-dark bg-dark">
              <div class="container-fluid">
                <button
                  class="navbar-toggler"
                  type="button"
                  data-mdb-toggle="collapse"
                  data-mdb-target="#navbarToggleExternalContent"
                  aria-controls="navbarToggleExternalContent"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
              </div>
            </nav>

进阶范例

导航栏用法的高级示例。

Facebook风格

Facebook导航栏用法的一个典型示例-3列带有图标和与众不同的列 通知以及左侧的搜索字段。


            <!-- Navbar-->
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
              <div class="container-fluid justify-content-between">
                <!-- Left elements -->
                <div class="d-flex">
                  <!-- Brand -->
                  <a class="navbar-brand me-2 mb-1 d-flex align-items-center" href="#">
                    <img
                      src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.webp"
                      height="20"
                      alt=""
                      loading="lazy"
                      style="margin-top: 2px;"
                    />
                  </a>

                  <!-- Search form -->
                  <form class="input-group w-auto my-auto d-none d-sm-flex">
                    <input
                      autocomplete="off"
                      type="search"
                      class="form-control rounded"
                      placeholder="Search"
                      style="min-width: 125px;"
                    />
                    <span class="input-group-text border-0 d-none d-lg-flex"
                      ><i class="fas fa-search"></i
                    ></span>
                  </form>
                </div>
                <!-- Left elements -->

                <!-- Center elements -->
                <ul class="navbar-nav flex-row d-none d-md-flex">
                  <li class="nav-item me-3 me-lg-1 active">
                    <a class="nav-link" href="#">
                      <span><i class="fas fa-home fa-lg"></i></span>
                      <span class="badge rounded-pill badge-notification bg-danger">1</span>
                    </a>
                  </li>

                  <li class="nav-item me-3 me-lg-1">
                    <a class="nav-link" href="#">
                      <span><i class="fas fa-flag fa-lg"></i></span>
                    </a>
                  </li>

                  <li class="nav-item me-3 me-lg-1">
                    <a class="nav-link" href="#">
                      <span><i class="fas fa-video fa-lg"></i></span>
                    </a>
                  </li>

                  <li class="nav-item me-3 me-lg-1">
                    <a class="nav-link" href="#">
                      <span><i class="fas fa-shopping-bag fa-lg"></i></span>
                    </a>
                  </li>

                  <li class="nav-item me-3 me-lg-1">
                    <a class="nav-link" href="#">
                      <span><i class="fas fa-users fa-lg"></i></span>
                      <span class="badge rounded-pill badge-notification bg-danger">2</span>
                    </a>
                  </li>
                </ul>
                <!-- Center elements -->

                <!-- Right elements -->
                <ul class="navbar-nav flex-row">
                  <li class="nav-item me-3 me-lg-1">
                    <a class="nav-link d-sm-flex align-items-sm-center" href="#">
                      <img
                        src="https://mdbootstrap.com/img/new/avatars/1.webp"
                        class="rounded-circle"
                        height="22"
                        alt=""
                        loading="lazy"
                      />
                      <strong class="d-none d-sm-block ms-1">John</strong>
                    </a>
                  </li>
                  <li class="nav-item me-3 me-lg-1">
                    <a class="nav-link" href="#">
                      <span><i class="fas fa-plus-circle fa-lg"></i></span>
                    </a>
                  </li>
                  <li class="nav-item dropdown me-3 me-lg-1">
                    <a
                      class="nav-link dropdown-toggle hidden-arrow"
                      href="#"
                      id="navbarDropdownMenuLink"
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i class="fas fa-comments fa-lg"></i>

                      <span class="badge rounded-pill badge-notification bg-danger">6</span>
                    </a>
                    <ul
                      class="dropdown-menu dropdown-menu-end"
                      aria-labelledby="navbarDropdownMenuLink"
                    >
                      <li><a class="dropdown-item" href="#">Some news</a></li>
                      <li><a class="dropdown-item" href="#">Another news</a></li>
                      <li>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown me-3 me-lg-1">
                    <a
                      class="nav-link dropdown-toggle hidden-arrow"
                      href="#"
                      id="navbarDropdownMenuLink"
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i class="fas fa-bell fa-lg"></i>
                      <span class="badge rounded-pill badge-notification bg-danger">12</span>
                    </a>
                    <ul
                      class="dropdown-menu dropdown-menu-end"
                      aria-labelledby="navbarDropdownMenuLink"
                    >
                      <li><a class="dropdown-item" href="#">Some news</a></li>
                      <li><a class="dropdown-item" href="#">Another news</a></li>
                      <li>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown me-3 me-lg-1">
                    <a
                      class="nav-link dropdown-toggle hidden-arrow"
                      href="#"
                      id="navbarDropdownMenuLink"
                      role="button"
                      data-mdb-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i class="fas fa-chevron-circle-down fa-lg"></i>
                    </a>
                    <ul
                      class="dropdown-menu dropdown-menu-end"
                      aria-labelledby="navbarDropdownMenuLink"
                    >
                      <li><a class="dropdown-item" href="#">Some news</a></li>
                      <li><a class="dropdown-item" href="#">Another news</a></li>
                      <li>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </li>
                    </ul>
                  </li>
                </ul>
                <!-- Right elements -->
              </div>
            </nav>
            <!-- Navbar -->