导航栏

示例

这是一个导航栏，包含大多数支持的子组件以及一个带有我们的抽屉插件的响应式右侧抽屉。使用右下角的拉手调整大小以预览响应式行为。

HTML

<nav class="navbar md:navbar-expand bg-1">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarDrawer" aria-controls="navbarDrawer" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarDrawer" aria-labelledby="navbarDrawerLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarDrawerLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="关闭"></button>
      </div>
      <div class="drawer-body mb-2 md:mb-0">
        <ul class="nav navbar-nav me-auto">
          <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">
            <button class="nav-link" type="button" data-bs-toggle="menu" aria-expanded="false">
              Menu
            </button>
            <div class="menu">
              <a class="menu-item" href="#">Action</a>
              <a class="menu-item" href="#">Another action</a>
              <hr class="menu-divider">
              <a class="menu-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form class="hstack gap-2" role="search">
          <input class="form-control" type="search" placeholder="搜索" aria-label="搜索"/>
          <button class="btn-solid btn-icon theme-secondary" type="submit">
            <svg class="bi" width="16" height="16"><use href="#search" /></svg>
          </button>
        </form>
      </div>
    </dialog>
  </div>
</nav>

它是如何工作的

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

导航栏需要一个包装 .navbar 与 .{breakpoint}:navbar-expand (e.g. .md:navbar-expand) 用于响应式折叠和配色方案课程。
导航栏及其内容默认是流动的。更改容器以不同的方式限制它们的水平宽度。
使用我们的边距, 填充，和展示肌肉用于控制导航栏内间距和对齐的工具类。
导航栏默认使用我们的方式是响应式的 抽屉组件在移动设备上，导航链接会从侧边以抽屉的形式滑入。
通过使用确保可访问性 <nav> 元素，或者，如果使用更通用的元素例如一个 <div>，添加一个 role="navigation" 对每个导航栏明确标识它为辅助技术用户的地标区域。
使用以下方法指示当前项目 aria-current="page" 针对当前页面或 aria-current="true" 对于集合中的当前项。

此组件的动画效果取决于 prefers-reduced-motion 媒体查询。请参阅我们无障碍文档中的减少动画部分。

支持的内容

导航栏自带对一些子组件的内置支持。根据需要从以下选项中选择：

.navbar-brand 用于你的公司、产品或项目名称。
.navbar-nav 用于全高且轻量的导航（包括支持菜单）。
.navbar-toggler 用于配合我们的抽屉插件及其他导航切换行为。
适用于任何表单控件和操作的弹性和间距工具。
.navbar-text 用于添加垂直居中的文本串。

品牌

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

文本

将你的文本放在具有 .navbar-brand 类的元素内。

作为一个链接作为标题

HTML

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

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

图片

你可以将.navbar-brand内的文本替换为<img>。

HTML

<nav class="navbar bg-1 fg-2">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/6.0/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

图片和文字

你还可以利用一些附加工具来同时添加图像和文本。请注意添加的 .d-inline-block 和 .align-text-top 在……上 <img>.

HTML

<nav class="navbar bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/6.0/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

导航栏（Navbar）导航链接在我们的.nav选项的基础上构建，拥有自己的修饰类，并需要使用切换器类（toggler classes）以实现正确的响应式样式。导航栏中的导航项也会扩展以占据尽可能多的水平空间，以确保你的导航栏内容安全对齐。

添加 .active 上课 .nav-link 表示当前页面。

请注意，你还应该添加 aria-current 活动中的属性 .nav-link.

HTML

<nav class="navbar sm:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarNav" aria-labelledby="navbarNavLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarNavLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="关闭"></button>
      </div>
      <div class="drawer-body">
        <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" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </dialog>
  </div>
</nav>

因为我们为导航使用类，如果你愿意，可以完全避免基于列表的方法。

HTML

<nav class="navbar sm:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarNavAltMarkup" aria-labelledby="navbarNavAltMarkupLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarNavAltMarkupLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="关闭"></button>
      </div>
      <div class="drawer-body">
        <div class="nav nav-pills 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" aria-disabled="true">Disabled</a>
        </div>
      </div>
    </dialog>
  </div>
</nav>

你也可以在导航栏中使用菜单。菜单需要一个包装元素来定位，所以请确保像下面示例中那样，为.nav-item和.nav-link使用独立且嵌套的元素。

HTML

<nav class="navbar lg:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarNavMenu" aria-controls="navbarNavMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarNavMenu" aria-labelledby="navbarNavMenuLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarNavMenuLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="关闭"></button>
      </div>
      <div class="drawer-body">
        <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">
            <button class="nav-link" type="button" data-bs-toggle="menu" aria-expanded="false">
              Menu link
            </button>
            <div class="menu">
              <a class="menu-item" href="#">Action</a>
              <a class="menu-item" href="#">Another action</a>
              <a class="menu-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
      </div>
    </dialog>
  </div>
</nav>

表格

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

HTML

<nav class="navbar bg-1 fg-2">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索"/>
      <button class="btn-outline theme-success" type="submit">Search</button>
    </form>
  </div>
</nav>

.navbar的直接子元素使用 flex 布局，并且默认值为 justify-content: space-between。根据需要使用额外的flex 工具类来调整此行为。

HTML

<nav class="navbar bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索"/>
      <button class="btn-outline theme-success" type="submit">Search</button>
    </form>
  </div>
</nav>

输入组也可行。如果你的导航栏是一个完整的表单，或主要是一个表单，你可以使用 <form> 元素作为容器，从而节省一些 HTML。

HTML

<nav class="navbar bg-1 fg-2">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
    </div>
  </form>
</nav>

这些导航栏表单也支持各种按钮。这也很好地提醒我们，垂直对齐工具可以用来对齐不同大小的元素。

HTML

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

文本

导航栏可以借助 .navbar-text 包含文本片段。此类会调整文本字符串的垂直对齐和水平间距。

HTML

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

根据需要与其他组件和工具进行混合搭配。

HTML

<nav class="navbar md:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarText" aria-labelledby="navbarTextLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarTextLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="关闭"></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav me-auto mb-2 md:mb-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>
    </dialog>
  </div>
</nav>

要使导航栏变暗，请添加 data-bs-theme="dark" 到 .navbar 元素。

HTML

<nav class="navbar md:navbar-expand bg-1" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Dark navbar</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarDarkDrawer" aria-controls="navbarDarkDrawer" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarDarkDrawer" aria-labelledby="navbarDarkDrawerLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarDarkDrawerLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="关闭"></button>
      </div>
      <div class="drawer-body mb-2 md:mb-0">
        <ul class="nav navbar-nav me-auto">
          <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">
            <button class="nav-link" type="button" data-bs-toggle="menu" aria-expanded="false">
              Menu
            </button>
            <div class="menu">
              <a class="menu-item" href="#">Action</a>
              <a class="menu-item" href="#">Another action</a>
              <hr class="menu-divider">
              <a class="menu-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form class="hstack gap-2" role="search">
          <input class="form-control" type="search" placeholder="搜索" aria-label="搜索"/>
          <button class="btn-solid btn-icon theme-secondary" type="submit">
            <svg class="bi" width="16" height="16"><use href="#search" /></svg>
          </button>
        </form>
      </div>
    </dialog>
  </div>
</nav>

将 .navbar-translucent 添加到模糊和饱和导航栏背景。这对于位于内容上的导航栏效果很好，例如固定或粘性导航栏。

HTML

<nav class="navbar navbar-translucent md:navbar-expand" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <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>
    </ul>
  </div>
</nav>

配色方案

得益于 Bootstrap 对 Sass 和 CSS 变量的结合，导航栏主题比以往更容易使用。默认的是我们的“浅色导航栏”，用于浅色背景，但你也可以将 data-bs-theme="dark" 应用于 .navbar 父元素以适应深色背景。之后，可以使用 .bg-* 和其他工具类进行自定义。

HTML

          <nav class="navbar" data-bs-theme="dark">
  <!-- Navbar content -->
</nav>

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

<nav class="navbar bg-1" data-bs-theme="light">
  <!-- Navbar content -->
</nav>

容器

虽然这不是必须的，但你可以将导航栏包裹在 .container 中以在页面上居中——不过请注意，仍然需要一个内部容器。或者你可以在 .navbar 内添加一个容器，仅将固定或静态顶部导航栏的内容居中。

HTML

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

使用任意响应式容器来改变导航栏中内容的呈现宽度。

HTML

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

职位安排

使用我们的定位工具将导航栏放置在非静态位置。可以选择固定在顶部、固定在底部、粘性固定在顶部（随着页面滚动直到到达顶部，然后保持在那里）或者粘性固定在底部（随着页面滚动直到到达底部，然后保持在那里）。

固定导航栏使用 position: fixed，意味着它们是从 DOM 的正常流中拉出的，并且可能需要自定义 CSS（例如，padding-top 在 <body> 上）以防止与其他元素重叠。

位置

HTML

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

响应行为

导航栏可以使用 .navbar-toggler 和 .lg:navbar-expand{-sm|-md|-lg|-xl|-2xl} 类来确定其内容是显示在抽屉中还是内联显示。结合其他工具类，你可以轻松选择何时显示或隐藏特定元素。

对于从不折叠的导航栏，在导航栏上添加 .lg:navbar-expand 类。对于总是显示抽屉的导航栏，不要添加任何 .lg:navbar-expand 类。

抽屉

默认情况下，导航栏使用抽屉组件来实现响应式行为。这提供了一种现代的抽屉式菜单，可以从屏幕的任意一侧滑入。

抽屉放置

你可以使用抽屉放置类自定义抽屉出现的侧边：

.drawer-start - 从左侧滑入（在从右到左布局中为从右侧滑入）
.drawer-end - 从右侧滑入（在从右到左布局中为从左侧滑入）
.drawer-top - 从顶部滑入
.drawer-bottom - 从底部滑入

这些示例省略了 .lg:navbar-expand 类，以始终显示抽屉的行为。点击切换按钮以查看抽屉从不同方向滑入。

HTML

<nav class="navbar md:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Left Drawer</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarLeftDrawer" aria-controls="navbarLeftDrawer" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-start" tabindex="-1" id="navbarLeftDrawer" aria-labelledby="navbarLeftDrawerLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarLeftDrawerLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="关闭"></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav me-auto mb-2 md:mb-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" aria-disabled="true">Disabled</a></li>
        </ul>
      </div>
    </dialog>
  </div>
</nav>

HTML

<nav class="navbar md:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Top Drawer</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarTopDrawer" aria-controls="navbarTopDrawer" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-top" tabindex="-1" id="navbarTopDrawer" aria-labelledby="navbarTopDrawerLabel">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarTopDrawerLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="关闭"></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav me-auto mb-2 md:mb-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" aria-disabled="true">Disabled</a></li>
        </ul>
      </div>
    </dialog>
  </div>
</nav>

切换器

导航栏切换按钮默认是左对齐的，但如果它们跟随一个类似.navbar-brand的同级元素，它们将自动对齐到最右侧。颠倒你的标记顺序会反转切换按钮的位置。

这些示例省略了 .lg:navbar-expand 类，以始终显示折叠状态并显示切换按钮。点击切换按钮以打开抽屉。

没有显示 .navbar-brand（隐藏在抽屉内）：

HTML

<nav class="navbar md:navbar-expand bg-1 fg-2">
  <div class="container-fluid">
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarTogglerDemo01" aria-labelledby="navbarTogglerDemo01Label">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarTogglerDemo01Label">Hidden brand</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="关闭"></button>
      </div>
      <div class="drawer-body">
        <a class="navbar-brand" href="#">Hidden brand</a>
        <ul class="navbar-nav me-auto mb-2 md:mb-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" aria-disabled="true">Disabled</a></li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索"/>
          <button class="btn-outline theme-success" type="submit">Search</button>
        </form>
      </div>
    </dialog>
  </div>
</nav>

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

HTML

<nav class="navbar bg-1 fg-2">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarTogglerDemo02" aria-labelledby="navbarTogglerDemo02Label">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarTogglerDemo02Label">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="关闭"></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav me-auto mb-2">
          <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" aria-disabled="true">Disabled</a></li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索"/>
          <button class="btn-outline theme-success" type="submit">Search</button>
        </form>
      </div>
    </dialog>
  </div>
</nav>

左侧有切换按钮，右侧有品牌名称：

HTML

<nav class="navbar bg-1 fg-2">
  <div class="container-fluid">
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <dialog class="drawer drawer-end" tabindex="-1" id="navbarTogglerDemo03" aria-labelledby="navbarTogglerDemo03Label">
      <div class="drawer-header">
        <h5 class="drawer-title" id="navbarTogglerDemo03Label">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="关闭"></button>
      </div>
      <div class="drawer-body">
        <ul class="navbar-nav me-auto mb-2">
          <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" aria-disabled="true">Disabled</a></li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索"/>
          <button class="btn-outline theme-success" type="submit">Search</button>
        </form>
      </div>
    </dialog>
  </div>
</nav>

外部内容

有时你可能想使用抽屉插件来触发一个容器元素，用于放置结构上位于 .navbar 外的内容。因为我们的插件基于 id 和 data-bs-target 的匹配工作，这很容易实现！

HTML

<dialog class="drawer drawer-top" tabindex="-1" id="navbarToggleExternalContent" data-bs-theme="dark" aria-labelledby="navbarToggleExternalContentLabel">
  <div class="drawer-header">
    <h5 class="drawer-title" id="navbarToggleExternalContentLabel">Collapsed content</h5>
    <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="关闭"></button>
  </div>
  <div class="drawer-body">
    <span class="fg-2">Toggleable via the navbar toggler.</span>
  </div>
</dialog>
<nav class="navbar bg-body" data-bs-theme="dark">
  <div class="container-fluid">
    <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
  </div>
</nav>

当你这样做时，我们建议包括额外的 JavaScript，以便在容器打开时以编程方式将焦点移动到容器上。否则，键盘用户和辅助技术用户可能很难找到新显示的内容——尤其是如果打开的容器在文档结构中位于切换器的前面。我们还建议确保切换器具有aria-controls属性，指向内容容器的id。理论上，这允许辅助技术用户直接从切换器跳到其控制的容器——但目前对此的支持相当不稳定。

CSS

变量

导航栏在.navbar上使用本地 CSS 变量进行实时定制。CSS 变量的值是从每个组件独有的 Sass map生成，并应用于上述类。

scss/_导航栏.scss

// stylelint-disable-next-line scss/dollar-variable-default
$navbar-tokens: defaults(
  (
    --navbar-padding-x: 0,
    --navbar-padding-y: .5rem,
    --navbar-min-height: 3.5rem,
    --navbar-color: var(--fg-2),
    --navbar-hover-color: var(--fg-1),
    --navbar-disabled-color: var(--fg-3),
    --navbar-active-color: var(--fg-body),
    --navbar-brand-padding-y: .375rem, // Match nav link padding-y
    --navbar-brand-margin-end: 1rem,
    --navbar-brand-font-size: var(--font-size-md),
    --navbar-brand-font-weight: var(--font-weight-medium),
    --navbar-brand-color: var(--fg-body),
    --navbar-brand-hover-color: var(--fg-body),
    --navbar-nav-link-padding-x: .75rem,
    --navbar-toggler-width: 2rem,
    --navbar-toggler-padding-y: .25rem,
    --navbar-toggler-padding-x: .75rem,
    --navbar-toggler-font-size: var(--font-size-lg),
    --navbar-toggler-border-color: color-mix(in oklch, var(--fg-body) 15%, transparent),
    --navbar-toggler-border-radius: var(--radius-5),
    --navbar-toggler-transition: box-shadow .15s ease-in-out,
    --navbar-toggler-icon-size: 1.25rem,
    --navbar-toggler-icon: #{escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path stroke='black' stroke-linecap='round' stroke-width='1' d='M1 3.5h14M1 8h14M1 12.5h14'/></svg>"))},
  ),
  $navbar-tokens
);

scss/_导航栏.scss

// stylelint-disable-next-line scss/dollar-variable-default
$navbar-dark-tokens: defaults(
  (
    --navbar-color: color-mix(in oklch, var(--white) 55%, transparent),
    --navbar-hover-color: color-mix(in oklch, var(--white) 75%, transparent),
    --navbar-disabled-color: color-mix(in oklch, var(--white) 25%, transparent),
    --navbar-active-color: var(--white),
    --navbar-brand-color: var(--white),
    --navbar-brand-hover-color: var(--white),
    --navbar-toggler-border-color: color-mix(in oklch, var(--white) 10%, transparent),
  ),
  $navbar-dark-tokens
);

scss/_导航栏.scss

// stylelint-disable-next-line scss/dollar-variable-default
$navbar-nav-tokens: defaults(
  (
    --nav-gap: .25rem,
    --nav-link-gap: .5rem,
    --nav-link-padding-x: .5rem,
    --nav-link-padding-y: .375rem,
    --nav-link-color: var(--navbar-color),
    --nav-link-border-width: var(--border-width),
    //--nav-link-border-color: var(--border-color),
    --nav-link-hover-color: var(--navbar-hover-color),
    --nav-link-hover-bg: transparent,
    --nav-link-active-color: var(--navbar-active-color),
    --nav-link-active-bg: transparent,
    --nav-link-disabled-color: var(--navbar-disabled-color),
  ),
  $navbar-nav-tokens
);

Sass map

我们将全局 $breakpoints 映射重新分配为 $navbar-breakpoints 于 scss/_navbar.scss，并在循环中使用它来生成响应式导航栏的展开/折叠类。这允许你独立于全局断点自定义导航栏的断点。

scss/_导航栏.scss

$navbar-breakpoints: $breakpoints;

Sass 循环

响应式导航栏展开/折叠类（例如，.lg:navbar-expand）与 $navbar-breakpoints 映射结合，并通过 scss/_navbar.scss 中的循环生成。

scss/_导航栏.scss

// Generate series of responsive `.navbar-expand` classes for configuring
// where your navbar collapses and expands. Uses container queries so the
// navbar responds to its own width, not the viewport width.

// Mixin for expanded state styles (applied to descendants)
@mixin navbar-expanded {
  // Style the inner container since we can't style .navbar itself with container queries
  > .container,
  > .container-fluid,
  %navbar-expand-container {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .navbar-nav {
    --nav-link-padding-x: var(--navbar-nav-link-padding-x);
    flex-direction: row;
  }

  .navbar-toggler {
    display: none !important; // stylelint-disable-line declaration-no-important
  }

  [class*="drawer"] {
    // stylelint-disable declaration-no-important
    // Reset native <dialog> UA styles and below-breakpoint drawer styles.
    // Must use !important to override both UA <dialog> defaults and the
    // responsive drawer styles from media-breakpoint-down().
    position: static !important;
    inset: auto !important;
    z-index: auto;
    display: flex !important;
    flex-grow: 1;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    padding: 0;
    margin: 0;
    overflow: visible !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    @include box-shadow(none);
    @include transition(none);
    // stylelint-enable declaration-no-important

    .drawer-header {
      display: none !important; // stylelint-disable-line declaration-no-important
    }

    .drawer-body {
      display: flex;
      flex-grow: 1;
      flex-direction: row;
      align-items: center;
      padding: 0;
      overflow-y: visible;
    }
  }
}

// Always expanded (no responsive behavior)
.navbar-expand {
  @include navbar-expanded();

  // Also set on navbar itself for non-responsive case
  flex-wrap: nowrap;
  justify-content: flex-start;
}

// Responsive navbar expand classes using container queries
@include loop-breakpoints-down($navbar-breakpoints) using ($breakpoint, $next, $prefix) {
  @if $next {
    .#{$prefix}navbar-expand {
      @include container-breakpoint-up($next) {
        @include navbar-expanded();
      }
    }
  }
}

本页目录

示例

它是如何工作的

支持的内容

品牌

文本

图片

图片和文字

导航

表格

文本

深色导航栏

半透明导航栏

配色方案

容器

职位安排

响应行为

抽屉

抽屉放置

切换器

外部内容

折叠的内容

CSS

变量

Sass map

Sass 循环