Creating Navs Using Bootstrap

Navigation available in Bootstrap share general markup and styles, from the base .nav class. The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It is generated by using unordered list element with each list element containing anchors.

Creating Navs Using Bootstrap

Add the following classes:

  1. .nav class to the <ul> element
  2. .nav-item class to the <li> element
  3. .nav-link class to the <a> element
  4. Add .active class to the current navigation

For example,

<ul class="nav">
 <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="#">Link</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
 </li>
</ul>

Alternatively, you can use <nav> element instead of <ol>. For example,

<nav class="nav">
 <a class="nav-link active" href="#">Active</a>
 <a class="nav-link" href="#">Link</a>
 <a class="nav-link" href="#">Link</a>
 <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

1. Horizontal Alignment

By default, nav is left-aligned, but you can change them to center or right aligned with flexbox utilities.

For center alignment:

<ul class="nav justify-content-center">

For right alignment:

<ul class="nav justify-content-end">

2. Vertical Navigation

You can stack your navigation by changing the flex item direction with the .flex-column utility. For example,

<ul class="nav flex-column">

3. Tabs

Add the .nav-tabs class to generate a tabbed interface. For example,

<ul class="nav nav-tabs">

4. Pills

Use .nav-pills class like this:

<ul class="nav nav-pills">

To force contents of .nav to extend the full available width, use .nav-fill. All horizontal space is occupied, but not every nav item has the same width. For example,

<ul class="nav nav-pills nav-fill">

For equal-width elements, use .nav-justified. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width. For example,

<ul class="nav nav-pills nav-justified">

5. Dropdowns

You can add dropdown to tabs and pills. To create dropdowns, use the following classes:

  • Add .dropdown class to the <li> element
  • Use class .dropdown-item to the <a> element; You don't have to use nav-link in dropdown anchors
  • Wrap the deopdown anchor links within <div> element with .dropdown-menu class

You also need to change the parent <a> link. For example,

<li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
 <div class="dropdown-menu">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 <div class="dropdown-divider"></div>
 <a class="dropdown-item" href="#">Separated link</a>
 </div>
 </li>

6. Panels

You can extend navigational tabs and pills to create tabbable panes of content. Dynamic tabbed interfaces, require role attribute like role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state.

<ul class="nav nav-tabs" id="myTab" role="tablist">
 <li class="nav-item">
 <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
 </li>
</ul>
<div class="tab-content" id="myTabContent">
 <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
 <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
 <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

You can also use pills or vertical pills. You can activate a tab or pill navigation by specifying data-toggle="tab" or data-toggle="pill" on an element. To make tabs fade in, you can add .fade to each .tab-pane. The first tab pane must also have .show to make the initial content visible.