Bootstrap Navs

The base .nav class provides a strong foundation for building all types of navigation. You can use this class with <ul> element, <ol> element or with a <nav> element. Similar to navbar, add class .nav-item to <li> tag and .nav-link to <a> tag.

images/coding/coding10.webp

If you are using navs to provide a navigation bar, add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself.

Horizontal Alignment

By default, navs are left-aligned, but you can change them to center or right aligned.

  1. .justify-content-center
  2. .justify-content-end

For example,

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

Vertical Alignment

You can stack your navigation by adding .flex-column class. If you need to stack them on some viewports but not others, then use the responsive versions like .flex-sm-column.

<ul class="nav flex-column">
<nav class="nav flex-column">

Tabs

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

<ul class="nav nav-tabs">

Pills

Add the class .nav-pills to generate a pills interface.

<ul class="nav nav-pills">

Dropdowns

Add class .dropdown to <li> element and class .dropdown-item to <a> element.

To create a drop down divider:

<div class="dropdown-divider"></div>

JavaScript Behavior

You can use the tab JavaScript plugin to extend navigational tabs and pills to create tabbable panes of content.

Dynamic tabbed interfaces require 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>

If you are using <nav>, you should not add role="tablist" directly to it, as this would override the element’s native role as a navigation landmark. Instead, switch to an alternative element (like <div>) and wrap the <nav> around it.

The tabs plugin also works with pills and vertical pills.