Skip to main content

Navs in Bootstrap 5

Bootstrap Navs​

Nav component that allows you to create navigation menus.

The Nav component can be used to create horizontal and vertical navigation menus with various styles and options.

As an example:

Editor

Loading...

In this example:

  • We have a simple horizontal navigation bar with three tabs: Home, About, and Contact.
  • Each tab is represented by an <a> element inside a <li> element with the nav-item class.
  • The nav-link class is used to style the links as navigation items, and the active class is added to the first tab to indicate that it is the current active tab.
  • The nav-tabs class is added to the <ul> element to indicate that we want to use a set of tabs for navigation.

Vertical Nav​

Bootstrap also provides a way to create a vertical navigation bar with the nav and flex-column classes.

As an example:

<ul class="nav flex-column">
     <li class="nav-item">
          <a class="nav-link active" href="#home">Home</a>
     </li>
     <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
     </li>
     <li class="nav-item">
          <a class="nav-link" href="#contact">Contact</a>
     </li>
</ul>

in this example:

  • We have an unordered list (<ul>) with a class of nav and flex-column for create a vertical navigation menu.
  • Inside the unordered list, we have three list items (<li>), each with a class of nav-item.
  • Inside each list item, we have an anchor (<a>) element, which represents a hyperlink.
  • Each anchor element has a class of nav-link.
  • The first anchor element has an additional class of active, which is used to indicate the currently active page in the navigation menu.

Tabs​

Bootstrap tabs are a type of navigation component that allow you to switch between different sections of content within the same page.

As an example:

Editor

Loading...

In this example:

  • We have a set of three tabs with the names "Home", "Profile", and "Messages".
  • Each tab is represented by an <a> element inside a <li> element with the nav-item class.
  • The nav-link class is used to style the links as navigation items, and the active class is added to the first tab to indicate that it is the current active tab.
  • The data-toggle="tab" attribute is added to each link to specify that they should toggle a tab pane when clicked.

Pills​

Bootstrap pills are another type of navigation component that allow you to switch between different sections of content within the same page, similar to tabs. However, pills are styled as small, rounded rectangles instead of tabs.

As an example:

Editor

Loading...

In this example:

  • We have a set of three pills with the names "Home", "Profile", and "Messages".
  • Each pill is represented by an <a> element inside a <li> element with the nav-item class.
  • The nav-link class is used to style the links as navigation items, and the active class is added to the first pill to indicate that it is the current active pill.

Pills with Dropdown​

Bootstrap pills can also be used with dropdown menus to create more complex navigation menus and interfaces.

To create pills with dropdown menus in Bootstrap, you can use the dropdown class along with the nav-item and nav-link classes for the pill itself.

As an example:

Editor

Loading...