導航欄一般放在頁面的頂部。
我們可以使用 .navbar 類來建立一個标準的導航欄，後面緊跟: .navbar-expand-xxl|xl|lg|md|sm 類來建立響應式的導航欄
(大螢幕水準鋪開，小螢幕垂直堆疊)。
導航欄上的選項可以使用 <ul> 元素并添加 class="navbar-nav" 類。
然後在 <li> 元素上添加 .nav-item 類， <a> 元素上使用 .nav-link 類:
<!-- 小螢幕上水準導航欄會切換為垂直的 -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<a class="nav-link" href="#">Link 2</a>
<a class="nav-link" href="#">Link 3</a>
</ul>
</nav>
通過删除 .navbar-expand-xxl|xl|lg|md|sm 類來建立垂直導航欄:
<!-- 垂直導航欄 -->
<nav class="navbar bg-light">
通過添加 .justify-content-center 類來建立居中對齊的導航欄:
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
...
可以使用以下類來建立不同顔色導航欄：.bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。
提示: 對于暗色背景 .navbar-dark 需要設定文本顔色為淺色的，對于淺色背景 .navbar-light 需要設定文本顔色為深色的。
<!-- 灰底黑字 -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
<!-- 黑底白字 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- 藍底白字 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
激活和禁用狀态: 可以在 <a> 元素上添加 .active 類來高亮顯示選中的選項。 .disabled 類用于設定該連結是不可點選的。
.navbar-brand 類用于高亮顯示品牌/Logo:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
可以使用 .navbar-brand 類來設定圖檔自适應導航欄。
<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="Logo" style="width:40px;">
</a>
通常，小螢幕上我們都會折疊導航欄，通過點選來顯示導航選項。
要建立折疊導航欄，可以在按鈕上添加 class="navbar-toggler",
data-bs-toggle="collapse" 與 data-target="#thetarget" 類。然後在設定了 class="collapse navbar-collapse" 類的 div 上包裹導航内容（連結）, div 元素上的 id 比對按鈕 data-target 的上指定的 id:
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
</div>
導航欄上可以設定下拉菜單：
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
Dropdown link
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
導航欄的表單 <form> 元素使用 class="form-inline" 類來排版輸入框與按鈕：
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
你也可以使用其他的輸入框類，如 .input-group-addon 類用于在輸入框前添加小标簽。
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
使用 .navbar-text 類來設定導航欄上非連結文本，可以保證水準對齊，顔色與内邊距一樣。
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
導航欄可以固定在頭部或者底部。
我們使用 .fixed-top 類來實作導航欄的固定：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
.fixed-bottom 類用于設定導航欄固定在底部：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
