導(dǎo)航工具條（Navbar）

Bootstrap強(qiáng)大的響應(yīng)式導(dǎo)航條文件和示例。包括品牌，導(dǎo)覽等，以及針對(duì)折疊插件的支持。

On this page

工作原理

在開始使用導(dǎo)航條之前，您需要了解以下內(nèi)容：

導(dǎo)航條需要使用.navbar包裝，并透過.navbar-expand{-sm|-md|-lg|-xl}給予響應(yīng)式的折疊以及使用color scheme class。
導(dǎo)航條預(yù)設(shè)的內(nèi)容寬度是浮動(dòng)的，更改containers以不同的方式來限制水平寬度。
使用spacing及flex通用類別來控制物件在導(dǎo)航條的間隔及對(duì)齊。
導(dǎo)航條預(yù)設(shè)是響應(yīng)式的，但也可以輕易的修改這個(gè)選項(xiàng)。響應(yīng)式行為會(huì)使用到折疊的JavaScript插件。
使用nav元素確保親和性，或者如果使用更通用的元素，如div，在每一個(gè)導(dǎo)航條中添加role=“navigation”為輔助技術(shù)的使用者明確標(biāo)識(shí)導(dǎo)航區(qū)域。
透過設(shè)置aria-current=“page”于當(dāng)前頁面，或?qū)ria-current=“true”設(shè)置于群組中的當(dāng)前項(xiàng)目來指示目前位置

此組件的動(dòng)畫效果取決于“首選簡(jiǎn)化運(yùn)動(dòng)媒體”查詢。

支持的內(nèi)容

導(dǎo)航條內(nèi)置對(duì)一些對(duì)子元件的支持。根據(jù)需求可從以下選項(xiàng)中進(jìn)行選擇：

.navbar-brand 用于您的公司，產(chǎn)品或項(xiàng)目名稱。
.navbar-nav 提供高度完整和輕便的導(dǎo)航（包括對(duì)下拉清單的支持）。
.navbar-toggler 用于我們的折疊插件和其他navigation toggling行為。
Flex and spacing utilities 用于表單控制與行為。
.navbar-text 用于垂直居中的文本字串。
.collapse.navbar-collapse 透過父層斷點(diǎn)來群組、隱藏導(dǎo)航條內(nèi)容。
添加可選的.navbar-scroll以設(shè)置最大高度并滾動(dòng)擴(kuò)展的navbar內(nèi)容。

以下是一個(gè)包含子元件的示例，包括在一個(gè)自動(dòng)在 lg（大）斷點(diǎn)處摺疊的響應(yīng)式導(dǎo)航條。

<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-bs-toggle="collapse" data-bs-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 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 dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </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>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

本示例使用color（bg-light）和spacing（my-2，my-lg-0，me-sm-0，my-sm-0）通用類別。

品牌

.navbar-brand以應(yīng)用于大多數(shù)元素，但錨定效果最好，因?yàn)橛行┰乜赡苄枰獙?shí)用程序類或自定義樣式。

文本

在帶有.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>

圖像

您可以用img替換.navbar品牌中的文本。

<nav class="navbar navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="/static/doc5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
</a>
</div>
</nav>

圖像和文本

您還可以使用一些附加的實(shí)用程序來同時(shí)添加圖像和文本。注意在上添加了.d-inline-block and .align-text-top 。

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/static/doc5.0/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>

導(dǎo)航

導(dǎo)航的連接建立在我們的.nav選項(xiàng)上、使用專屬的修飾符Class，并且需要使用toggler classes以建立適當(dāng)?shù)捻憫?yīng)樣式。在導(dǎo)航條中的導(dǎo)航元件會(huì)盡可能的占用水平空間，以保持您的導(dǎo)航條內(nèi)容安全對(duì)齊。

啟用狀態(tài)-用.active -表示當(dāng)前頁面。可直接用于.nav-link或直屬的.nav-item。

請(qǐng)注意，您應(yīng)該在.nav-link本身上添加aria-current屬性。

<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-bs-toggle="collapse" data-bs-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">
    <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>

因?yàn)槲覀兊膶?dǎo)航有專屬的類別，依照需求你可以避免完全使用列表的方法。

<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-bs-toggle="collapse" data-bs-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" 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>

您還可以在導(dǎo)航條的導(dǎo)航元件使用下拉菜單。下拉菜單需要一個(gè)包裝元素進(jìn)行定位，請(qǐng)確保為.nav-item和.nav-link使用單獨(dú)及巢狀的元素，如下所示。

<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-bs-toggle="collapse" data-bs-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">
    <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 dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-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>
</div>
</nav>

表單

將各種表單和元件放在導(dǎo)航條中：

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

.navbar中的直接子元素使用flex排版，預(yù)設(shè)為justify-content: space-between。根據(jù)需要使用其他flex utilities來調(diào)整此行為。

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

input群組也可以這樣使用。如果導(dǎo)航條整個(gè)都是表單，或者大部分是表單，則可以使用form元素作為容器并保存HTML。

<nav class="navbar navbar-light bg-light">
<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>

表單導(dǎo)航條也支持各種按鈕。這也大大的提醒了我們可以使用垂直對(duì)齊工具來對(duì)齊不同大小的元素。

<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導(dǎo)航條可以包含一些文本。該class調(diào)整了文本字串的垂直對(duì)齊和水平間距。

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

根據(jù)需要與其他元件和通用類別混合使用。

<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-bs-toggle="collapse" data-bs-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 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>

配色方案

由于主題class和background-color通用類別class的結(jié)合，主題化導(dǎo)航條從未如此簡(jiǎn)單。從.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>

容器

雖然不是必需的，但您可以把導(dǎo)航條包裝在.container中，將其置中于頁面-請(qǐng)注意，內(nèi)部的container還是必要的。或是你可以在.navbar中包裝一個(gè)container，只將fixed or static top navbar的內(nèi)容置中。

<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>

使用任意響應(yīng)式容器以更改導(dǎo)航條中內(nèi)容的顯示寬度。

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

定位

使用我們的定位通用類別將導(dǎo)航條放置在非靜態(tài)位置。選擇固定到頂部、固定到底部、或粘貼到頂部（會(huì)隨著頁面滾動(dòng)，直到物件達(dá)到頂部，并停留在原處）。固定的導(dǎo)航條使用position:fixed，這意味著它們會(huì)脫離正常的DOM的文件流，并且可能需要自定義CSS（例如body上的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>

滾動(dòng)

添加.navbar-nav-scroll到 .navbar-nav （或其他navbar子組件），以在折疊的navbar的可切換內(nèi)容內(nèi)啟用垂直滾動(dòng)。默認(rèn)情況下，滾動(dòng)以75vh（或75%的視口高度）啟動(dòng)，但您可以使用本地CSS自定義屬性（--bs-navbar-height或自定義風(fēng)格）覆蓋該屬性。在較大的視口中，當(dāng)導(dǎo)航欄展開時(shí)，內(nèi)容將顯示為默認(rèn)導(dǎo)航欄中的內(nèi)容。

請(qǐng)注意，當(dāng)設(shè)置overflow-y:auto（需要在此處滾動(dòng)內(nèi)容）時(shí)，這種行為可能會(huì)帶來溢出的缺點(diǎn)，overflow-x相當(dāng)于auto，它將裁剪一些水平內(nèi)容。

下面是一個(gè)示例navbar使用.navbar nav scroll with style=“--bs scroll height:100px；”，與一些額外的邊緣實(shí)用程序的最佳間距。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
  <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 dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Link
    </a>
    <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
      <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">Link</a>
  </li>
</ul>
<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

響應(yīng)性行為

導(dǎo)航條可以使用.navbar-toggler，.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl}決定它們的內(nèi)容何時(shí)會(huì)摺疊。結(jié)合其他通用類別，您可以選擇何時(shí)顯示或隱藏特定元素。

對(duì)于不需要折疊的導(dǎo)航條，在導(dǎo)航條中加入.navbar-expand。對(duì)于總是折疊的導(dǎo)航條，不要加任何.navbar-expand class。

切換元素

導(dǎo)航條的切換元素（toggler）預(yù)設(shè)情況下會(huì)對(duì)齊左邊，但如果它們位于同層級(jí)的.navbar-brand后面，它們將自動(dòng)和最右邊對(duì)齊。反轉(zhuǎn)您的標(biāo)記將對(duì)調(diào)切換元素的位置。以下是不同切換元素樣式的示例。

在最小斷點(diǎn)沒有.navbar-brand：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 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 class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

左側(cè)有一個(gè)品牌名稱，右邊是切換元素：

<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-bs-toggle="collapse" data-bs-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 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 class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

左側(cè)有一個(gè)切換元素，右邊是品牌名稱：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 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 class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

外部?jī)?nèi)容

有時(shí)會(huì)需要使用折疊插件來觸發(fā)位于.navbar外的容器內(nèi)容。因?yàn)椴寮峭高^匹配id和data-bs-target來執(zhí)行的，這將很容易完成！

Collapsed content

Toggleable via the navbar brand.

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

當(dāng)您執(zhí)行此操作時(shí)，建議您添加其他JavaScript，以在打開容器時(shí)以代碼控制的方式將焦點(diǎn)移至容器上。否則，電腦使用者與無障礙使用者可能會(huì)很難找到新顯示的內(nèi)容-尤其是如果打開的容器位于文檔結(jié)構(gòu)中的切換元素之前。我們也建議確保切換器具有aria-controls屬性，指向內(nèi)容容器的id。從理論上講，這將會(huì)允許無障礙使用者直接從切換元素跳轉(zhuǎn)到其控制的容器，但是對(duì)此功能的支持性目前還很少。

Sass

Variables

$navbar-padding-y:                  $spacer / 2;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

Loop

Responsive navbar expand/collapse classes (e.g., .navbar-expand-lg) are combined with the $breakpoints map and generated through a loop in scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);

// stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
@include media-breakpoint-up($next) {
  flex-wrap: nowrap;
  justify-content: flex-start;

  .navbar-nav {
    flex-direction: row;

    .dropdown-menu {
      position: absolute;
    }

    .nav-link {
      padding-right: $navbar-nav-link-padding-x;
      padding-left: $navbar-nav-link-padding-x;
    }
  }

  .navbar-nav-scroll {
    overflow: visible;
  }

  .navbar-collapse {
    display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
  }

  .navbar-toggler {
    display: none;
  }
}
}
}
}