Bootstrap 5 Navbar

Navigation bar

The navigation bar is the navigation header at the top of the page:

Basic navigation bar

Using Bootstrap, the navigation bar can expand or collapse depending on the screen size.

Please use .navbar Class creates a standard navigation bar, followed by responsive collapse classes:.navbar-expand-xxl|xl|lg|md|sm（Horizontally aligned on extra large, large, medium, and small devices, or vertically stacked navigation bar on small screens).

To add links to the navigation bar, use class="navbar-nav" of <ul> element (or <div>). Then add a .nav-item The class <li> element, followed by a .nav-link The class <a> Element:

Example

<!-- Gray horizontal navigation bar becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Try It Yourself

vertical navigation bar

Remove .navbar-expand-* Class can create a navigation bar that is always vertical:

Example

<!-- Gray vertical navigation bar -->
<nav class="navbar bg-light">
  ...
</nav>

Try It Yourself

centered navigation bar

Add .justify-content-center Class can center the navigation bar:

Example

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

Try It Yourself

colored navigation bar

Use any .bg-color Classes to change the background color of the navigation bar:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Tip:Please use .navbar-dark Add white text color to all links in the navigation bar, or use .navbar-light Add black text color.

Example

<!-- Gray background, white text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">Disabled</a>
<!-- Black background, white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue background, white text -->

Try It Yourself

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>Active/Disabled state: .active class to <a> element to highlight the current link, or add .disabled class to indicate that the link is not clickable.

Brand / Logotype

.navbar-brand class to highlight the brand/logotype/project name of the page:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

Try It Yourself

If you use .navbar-brand When used with images, Bootstrap 5 will automatically set the image style to adapt vertically to the navigation bar.

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

Try It Yourself

Navigation bar text

Please use .navbar-text Class vertically aligns any non-link elements in the navigation bar (ensure correct padding and text color).

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">Navigation bar text</span>
  </div>
</nav>

Try It Yourself

Many times, especially on small screens, you may want to hide navigation links and replace them with a button, which, when clicked, will display them.

To create a collapsible navigation bar, please use the set class="navbar-toggler",data-bs-toggle="collapse" and data-bs-target="#thetarget" Enclose the navigation bar content (links, etc.) in class="collapse navbar-collapse" the <div> element, followed by the class of the button. data-bs-target Matching id: "thetarget"。

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Try It Yourself

Tip:You can also delete .navbar-expand-md The class always hides navigation bar links and displays the toggle button.

Dropdown menu navigation bar

The navigation bar can accommodate dropdown menus:

Example

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown menu</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link</a></li>
    <li><a class="dropdown-item" href="#">Another link</a></li>
    <li><a class="dropdown-item" href="#">Third link</a></li>
  </ul>
</li>

Try It Yourself

Navigation bar menu and buttons

You can also include forms in the navigation bar:

Example

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">Search</button>
      </form>
    </div>
  </div>
</nav>

Try It Yourself

Fixed Position Navigation Bar

Navigation bars can also be fixed at the top or bottom of the page.

Fixed navigation bars remain visible at a fixed position (top or bottom) independent of page scrolling.

.fixed-top This class makes the navigation bar fixed at the pageTop:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

Try It Yourself

Please use the .fixed-bottom class to keep the navigation bar at the bottom of the page:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

Try It Yourself

Please use .sticky-top This class makes the navigation bar fixed/stay at the page when scrolling over itTop.

Note:This class does not work in IE11 and earlier versions (treat it as position:relative)

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

Try It Yourself