Bootstrap Navigation - Complete Guide with Examples

Introduction

Bootstrap Navigation components provide a flexible and responsive way to create menus, navigation bars, tabs, pills, breadcrumbs, and pagination. These components are built with flexbox and are fully responsive, accessible, and customizable. Bootstrap's navigation system helps users move through your website efficiently and consistently across all devices.

1. Basic Nav Component

The .nav component is the foundation for all Bootstrap navigation. It creates a flexible list of navigation links.

Basic Nav

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Another Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Nav with Icons

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi bi-house-door"></i> Home
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi bi-search"></i> Search
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi bi-person"></i> Profile
    </a>
  </li>
</ul>

Note: Requires Bootstrap Icons CDN.

Horizontal Alignment

<!-- Justified nav (equal width) -->
<ul class="nav nav-justified">
  <li class="nav-item"><a class="nav-link" href="#">Justified 1</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Justified 2</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Justified 3</a></li>
</ul>

<!-- Fill nav (stretch to available space) -->
<ul class="nav nav-fill">
  <li class="nav-item"><a class="nav-link" href="#">Fill 1</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Fill 2</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Fill 3</a></li>
</ul>

Vertical Navigation

<!-- Stacked vertical nav -->
<ul class="nav flex-column">
  <li class="nav-item"><a class="nav-link" href="#">Vertical Link 1</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Vertical Link 2</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Vertical Link 3</a></li>
</ul>

<!-- Vertical nav with width control -->
<ul class="nav flex-column w-25">
  <li class="nav-item"><a class="nav-link" href="#">Profile</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Messages</a></li>
</ul>

2. Nav Tabs

Tabs provide a way to organize content into separate panes. Use .nav-tabs class.

Basic Tabs

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#messages">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

<!-- Tab panes (requires JavaScript) -->
<div class="tab-content mt-3">
  <div class="tab-pane active" id="home">Home content here.</div>
  <div class="tab-pane" id="profile">Profile content here.</div>
  <div class="tab-pane" id="messages">Messages content here.</div>
</div>

Tabs with Dropdowns

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button">
      Dropdown
    </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="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Another Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Tabs with Icons

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      <i class="bi bi-house"></i> Home
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi bi-person"></i> Profile
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <i class="bi bi-gear"></i> Settings
    </a>
  </li>
</ul>

3. Nav Pills

Pills are an alternative to tabs with a different visual style. Use .nav-pills class.

Basic Pills

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Another Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Fill and Justified Pills

<!-- Fill pills -->
<ul class="nav nav-pills nav-fill">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Longer nav link</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>

<!-- Justified pills -->
<ul class="nav nav-pills nav-justified">
  <li class="nav-item"><a class="nav-link" href="#">Justified 1</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Justified 2</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Justified 3</a></li>
</ul>

Vertical Pills

<ul class="nav nav-pills flex-column">
  <li class="nav-item"><a class="nav-link active" href="#">Active Pill</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Pill 2</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Pill 3</a></li>
</ul>

Pills with Badges

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">
      Inbox <span class="badge bg-light text-dark ms-2">42</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Sent <span class="badge bg-secondary ms-2">12</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Trash <span class="badge bg-danger ms-2">3</span>
    </a>
  </li>
</ul>

4. Navbar (Navigation Bar)

The navbar is Bootstrap's most powerful navigation component. It's responsive, collapsible, and supports branding, forms, and dropdowns.

Basic Navbar

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand Name</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <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" 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="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Navbar with Dropdown

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDropdown">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarDropdown">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
            Dropdown
          </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</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Navbar with Search Form

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">SearchNav</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSearch">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      </ul>
      <form class="d-flex" role="search">
        <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>

Navbar with Buttons and Icons

<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <i class="bi bi-bootstrap"></i> BootstrapNav
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarButtons">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarButtons">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link" href="#">Products</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
      </ul>
      <div class="d-flex gap-2">
        <button class="btn btn-outline-light">Login</button>
        <button class="btn btn-primary">Sign Up</button>
      </div>
    </div>
  </div>
</nav>

Navbar Color Schemes

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

<!-- Dark navbar -->
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Dark Navbar</a>
  </div>
</nav>

<!-- Primary color navbar -->
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Primary Navbar</a>
  </div>
</nav>

<!-- Transparent navbar -->
<nav class="navbar navbar-expand-lg bg-transparent">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Transparent</a>
  </div>
</nav>

Responsive Navbar Breakpoints

<!-- Collapses at small screens (sm) -->
<nav class="navbar navbar-expand-sm bg-body-tertiary">...</nav>

<!-- Collapses at medium screens (md) -->
<nav class="navbar navbar-expand-md bg-body-tertiary">...</nav>

<!-- Collapses at large screens (lg) -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">...</nav>

<!-- Collapses at extra large screens (xl) -->
<nav class="navbar navbar-expand-xl bg-body-tertiary">...</nav>

<!-- Always collapsed (hamburger always visible) -->
<nav class="navbar bg-body-tertiary">...</nav>

5. Breadcrumb Navigation

Breadcrumbs indicate the current page's location within a navigational hierarchy.

Basic Breadcrumb

<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">Data</li>
  </ol>
</nav>

Breadcrumb with Icons

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#"><i class="bi bi-house-door"></i> Home</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#"><i class="bi bi-folder"></i> Documents</a>
    </li>
    <li class="breadcrumb-item active">
      <i class="bi bi-file-text"></i> Report.pdf
    </li>
  </ol>
</nav>

Custom Breadcrumb Separator

<style>
  .breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
    content: "→";
  }
</style>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-custom">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Products</a></li>
    <li class="breadcrumb-item active">Electronics</li>
  </ol>
</nav>

6. Pagination Navigation

Pagination components help users navigate through multiple pages of content.

Basic Pagination

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Pagination with Active and Disabled States

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a>
    </li>
  </ul>
</nav>

Pagination Sizes

<!-- Large pagination -->
<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

<!-- Small pagination -->
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>

Pagination with Icons

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Pagination Alignment

<!-- Center aligned -->
<nav aria-label="Page navigation">
  <ul class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

<!-- Right aligned -->
<nav aria-label="Page navigation">
  <ul class="pagination justify-content-end">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
  </ul>
</nav>

7. Sidebar Navigation (Using Nav + Flex)

Create sidebar navigation using the nav component with vertical layout.

Basic Sidebar

<div class="d-flex">
  <!-- Sidebar -->
  <div class="bg-light p-3" style="width: 250px;">
    <h5 class="mb-3">Menu</h5>
    <ul class="nav nav-pills flex-column">
      <li class="nav-item">
        <a class="nav-link active" href="#">Dashboard</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Analytics</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Reports</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Settings</a>
      </li>
    </ul>
  </div>
  
  <!-- Main content -->
  <div class="p-3 flex-grow-1">
    <h2>Main Content Area</h2>
  </div>
</div>

Sidebar with Icons and Submenu

<div class="bg-dark text-white p-3" style="width: 280px; min-height: 100vh;">
  <h5 class="mb-4 px-2">Admin Panel</h5>
  <ul class="nav nav-pills flex-column">
    <li class="nav-item mb-2">
      <a class="nav-link text-white" href="#">
        <i class="bi bi-speedometer2 me-2"></i> Dashboard
      </a>
    </li>
    <li class="nav-item mb-2">
      <a class="nav-link text-white" href="#">
        <i class="bi bi-people me-2"></i> Users
        <span class="badge bg-primary rounded-pill ms-2">12</span>
      </a>
    </li>
    <li class="nav-item mb-2">
      <a class="nav-link text-white" href="#">
        <i class="bi bi-box me-2"></i> Products
      </a>
    </li>
    <li class="nav-item mb-2">
      <a class="nav-link text-white" href="#">
        <i class="bi bi-gear me-2"></i> Settings
      </a>
    </li>
  </ul>
</div>

8. Sticky Navigation

Make navigation bars stick to the top or bottom of the viewport.

Sticky Top Navbar

<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky Top Navbar</a>
  </div>
</nav>

Fixed Top Navbar

<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed Top Navbar</a>
  </div>
</nav>
<!-- Add padding to body to prevent content from hiding under fixed navbar -->
<style>
  body { padding-top: 70px; }
</style>

Fixed Bottom Navbar

<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-bottom">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed Bottom Navbar</a>
  </div>
</nav>

9. Offcanvas Navigation (Slide-in Menu)

Offcanvas creates a sidebar that slides in from the edge of the screen.

Offcanvas Trigger Button

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav">
  Open Navigation Menu
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNav">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Navigation</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="nav nav-pills flex-column">
      <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</div>

Offcanvas Positions

<!-- Start (left) -->
<div class="offcanvas offcanvas-start" id="offcanvasStart">...</div>

<!-- End (right) -->
<div class="offcanvas offcanvas-end" id="offcanvasEnd">...</div>

<!-- Top -->
<div class="offcanvas offcanvas-top" id="offcanvasTop">...</div>

<!-- Bottom -->
<div class="offcanvas offcanvas-bottom" id="offcanvasBottom">...</div>

10. Complete Real-World Examples

Full Responsive Website Navigation

<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#">
      <i class="bi bi-bootstrap-fill"></i> MySite
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" 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="#" data-bs-toggle="dropdown">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-outline-light" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Tab Navigation with Content Panes

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-pane" type="button">
      <i class="bi bi-house"></i> Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-pane" type="button">
      <i class="bi bi-person"></i> Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-pane" type="button">
      <i class="bi bi-envelope"></i> Contact
    </button>
  </li>
</ul>

<div class="tab-content p-3 border border-top-0 rounded-bottom" id="myTabContent">
  <div class="tab-pane fade show active" id="home-pane">
    <h4>Home Content</h4>
    <p>Welcome to the home tab content area.</p>
  </div>
  <div class="tab-pane fade" id="profile-pane">
    <h4>Profile Content</h4>
    <p>Your profile information appears here.</p>
  </div>
  <div class="tab-pane fade" id="contact-pane">
    <h4>Contact Content</h4>
    <p>Contact form or information goes here.</p>
  </div>
</div>

Blog Navigation with Categories

<div class="container mt-4">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="#">Blog</a></li>
      <li class="breadcrumb-item"><a href="#">Categories</a></li>
      <li class="breadcrumb-item active">Technology</li>
    </ol>
  </nav>
  
  <ul class="nav nav-pills mb-4">
    <li class="nav-item"><a class="nav-link active" href="#">All Posts</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Technology</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Design</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Development</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Tutorials</a></li>
  </ul>
  
  <div class="row">
    <div class="col-md-8">Blog posts content...</div>
    <div class="col-md-4">Sidebar...</div>
  </div>
  
  <nav aria-label="Blog pagination" class="mt-4">
    <ul class="pagination justify-content-center">
      <li class="page-item disabled"><a class="page-link">Previous</a></li>
      <li class="page-item active"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
  </nav>
</div>

Quick Reference Summary

Component	Class
Base nav	`.nav, .nav-item, .nav-link`
Tabs	`.nav-tabs`
Pills	`.nav-pills`
Fill/Justified	`.nav-fill, .nav-justified`
Vertical nav	`.flex-column`
Navbar	`.navbar, .navbar-brand, .navbar-nav, .navbar-toggler`
Navbar expand breakpoints	`.navbar-expand-sm, .navbar-expand-md, .navbar-expand-lg, .navbar-expand-xl, .navbar-expand-xxl`
Navbar color schemes	`.bg-light, .bg-dark, .bg-primary, data-bs-theme="dark"`
Breadcrumb	`.breadcrumb, .breadcrumb-item`
Pagination	`.pagination, .page-item, .page-link`
Pagination sizes	`.pagination-lg, .pagination-sm`
Offcanvas	`.offcanvas, .offcanvas-start, .offcanvas-end, .offcanvas-top, .offcanvas-bottom`
Sticky/Fixed	`.sticky-top, .fixed-top, .fixed-bottom`

Conclusion

Bootstrap Navigation components provide everything you need to build professional, responsive, and accessible navigation systems for your website. From simple nav tabs and pills to complex responsive navbars with dropdowns, search forms, and offcanvas menus, Bootstrap handles all the complexity. The breadcrumb and pagination components help users understand their location and navigate through content efficiently. By mastering these navigation components, you can create intuitive user interfaces that work seamlessly across all devices.

Bootstrap Navigation – Complete Guide with Examples