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.

images/coding/coding05.webp

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.