在 GitHub 上檢視

導覽列

Bootstrap 強大、回應式的導覽標題，導覽列的文件和範例。包括支援品牌、導覽、摺疊外掛程式等。

運作方式

以下是開始使用導覽列之前您需要知道的資訊

  • 導覽列需要一個包含 .navbar-expand{-sm|-md|-lg|-xl} 的包裝 .navbar，以進行回應式摺疊和 配色方案 類別。
  • 導覽列及其內容預設為流動的。使用 選用容器 來限制其水平寬度。
  • 使用我們的 間距 和 彈性 工具類別來控制導覽列內的間距和對齊。
  • 導覽列預設為回應式的，但您可以輕鬆修改它們以進行變更。回應式行為取決於我們的摺疊 JavaScript 外掛程式。
  • 導覽列在列印時預設為隱藏。透過將 .d-print 新增到 .navbar 來強制列印它們。請參閱 顯示 工具類別。
  • 透過使用 <nav> 元素確保可存取性，或者如果使用更通用的元素（例如 <div>），請為每個導覽列新增 role="navigation"，以明確地將其識別為輔助技術使用者的地標區域。
此元件的動畫效果依賴於 prefers-reduced-motion 媒體查詢。請參閱 無障礙文件中的減少動作部分。

支援的內容

導覽列內建支援少數子元件。請視需要從下列選項中選擇

  • .navbar-brand 代表您的公司、產品或專案名稱。
  • .navbar-nav 代表全高且輕量的導覽（包括下拉式選單支援）。
  • .navbar-toggler 可搭配我們的折疊外掛程式和其他 導覽切換 行為使用。
  • .form-inline 代表任何表單控制項和動作。
  • .navbar-text 代表加入垂直置中的文字字串。
  • .collapse.navbar-collapse 代表依據父中斷點將導覽列內容分組並隱藏。

以下是一個範例，說明所有子元件包含在一個回應式淺色主題導覽列中，該導覽列會在 lg（大型）中斷點自動折疊。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

此範例使用 色彩 (bg-light) 和 間距 (my-2、my-lg-0、mr-sm-0、my-sm-0) 實用程式類別。

品牌

.navbar-brand 可套用於大多數元素，但錨點效果最佳，因為某些元素可能需要實用程式類別或自訂樣式。

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

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

將圖片加入 .navbar-brand 通常需要自訂樣式或實用程式才能適當調整大小。以下提供一些範例來說明。

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

導覽列導覽連結建立在我們的 .nav 選項上，並具備自己的修改器類別，且需要使用 切換器類別 才能適當調整回應式樣式。導覽列中的導覽也會擴充，盡可能佔用水平空間，以確保您的導覽列內容安全對齊。

使用 .active 的主動狀態可指示目前頁面，可直接套用至 .nav-link 或其直接父層級 .nav-item。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

而且因為我們在導覽中使用類別，所以如果您喜歡，可以完全避免使用清單式方法。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

您也可以在導覽列中使用下拉式選單。下拉式選單需要一個包裝元素才能定位，所以請務必使用個別且巢狀的元素，如下所示，分別代表 .nav-item 和 .nav-link。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

表單

使用 .form-inline 在導覽列中放置各種表單控制項和元件。

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

.navbar 的直接子元素使用彈性配置，預設為 justify-content: space-between。視需要使用其他 彈性實用程式 來調整此行為。

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

輸入群組也適用

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

這些導覽列表單也支援各種按鈕。這也是一個很好的提醒，垂直對齊工具程式可用於對齊不同大小的元素。

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" 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">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

視需要與其他元件和工具程式混合搭配。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</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">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

當容器在你的導覽列內時，其水平內距會在低於你指定的 .navbar-expand{-sm|-md|-lg|-xl} 類別的斷點處移除。這可確保在較小的檢視埠上導覽列摺疊時，不會不必要地加倍內距。

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

配置

使用我們的 定位工具程式 將導覽列置於非靜態位置。從固定頂端、固定底部或黏貼頂端（隨著頁面捲動，直到到達頂端，然後停留在該處）中選擇。固定導覽列使用 position: fixed，表示它們會從 DOM 的正常流程中提取，可能需要自訂 CSS（例如，<body> 上的 padding-top）以防止與其他元素重疊。

另請注意，.sticky-top 使用 position: sticky，而 並非每個瀏覽器都完全支援。

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

捲動

將 .navbar-nav-scroll 新增到 .navbar-collapse（或其他導覽列子元件）以啟用在摺疊導覽列的可切換內容中垂直捲動。預設情況下，捲動會在 75vh（或視窗高度的 75%）處啟動，但你可以使用內嵌或自訂樣式覆寫它。在導覽列展開時，較大的檢視埠上的內容會顯示為預設導覽列中的內容。

請注意，此行為會產生 overflow 的潛在缺點，當設定 overflow-y: auto（在此處捲動內容時需要）時，overflow-x 等於 auto，這會裁剪部分水平內容。

以下是一個使用 .navbar-nav-scroll 的導覽列範例，其中 style="max-height: 100px;"，並具有一些額外的 margin 工具程式，以取得最佳間距。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar scroll</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarScroll">
    <ul class="navbar-nav mr-auto my-2 my-lg-0 navbar-nav-scroll" style="max-height: 100px;">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Link
        </a>
        <ul class="dropdown-menu">
          <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">Link</a>
      </li>
    </ul>
    <form class="d-flex">
      <input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

回應式行為

導覽列可以使用 .navbar-toggler、.navbar-collapse 和 .navbar-expand{-sm|-md|-lg|-xl} 類別來決定其內容何時會縮合在按鈕後方。搭配其他工具程式，您可以輕鬆選擇顯示或隱藏特定元素的時機。

對於從不縮合的導覽列，請在導覽列上新增 .navbar-expand 類別。對於總是縮合的導覽列，請不要新增任何 .navbar-expand 類別。

切換器

導覽列切換器預設為左對齊，但如果它們遵循兄弟元素（例如 .navbar-brand），它們會自動對齊到最右方。反轉您的標記會反轉切換器的放置。以下是不同切換器樣式的範例。

在最小斷點處未顯示 .navbar-brand

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

在左側顯示品牌名稱，在右側顯示切換器

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

在左側顯示切換器，在右側顯示品牌名稱

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

外部內容

有時您會想要使用縮合外掛程式來觸發結構上位於 .navbar 之外的內容的容器元素。由於我們的外掛程式會根據 id 和 data-target 進行比對，因此這很容易做到！

<div class="fixed-top">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

執行此操作時，我們建議包含額外的 JavaScript，以便在開啟容器時以程式方式將焦點移至容器。否則，鍵盤使用者和輔助技術使用者可能會難以找到新顯示的內容，尤其是當開啟的容器在文件結構中出現在切換器之前時。我們還建議確保切換器具有 aria-controls 屬性，指向內容容器的 id。理論上，這允許輔助技術使用者直接從切換器跳到它所控制的容器，但目前對此功能的支持仍相當不穩定。