Navs

Documentation and examples for how to use Bootstrap’s included navigation components.

Bootstrap Navs documentation

Base nav 

                    
                      <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="#">Disabled</a>
                        </li>
                      </ul>

Centered with .justify-content-center:

                    
                      <ul class="nav justify-content-center">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Right-aligned with .justify-content-end:

                    
                      <ul class="nav justify-content-end">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Nav sizes

Use .nav-sm class for smaller font-size of the .nav-link classes.

                    
                      <ul class="nav nav-sm">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Nav gutters

Remove the padding-left and right from .nav-links with .nav-x-0 on the .row class.

                    
                      <ul class="nav nav-x-0 flex-column">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Or padding-top and bottom with .nav-y-0 class.

                    
                      <ul class="nav nav-y-0">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Use .nav-x-sm for smaller padding-right and left sizes.

                    
                      <ul class="nav nav-x-sm flex-column">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Use .nav-list-y-1 New

                    
                      <ul class="nav nav-list-y-1 flex-column">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Or .nav-list-y-2 New

                    
                      <ul class="nav nav-list-y-2 flex-column">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Vertical

Use .flex-column class.

                    
                      <ul class="nav flex-column">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Nav icon New 

                    
                      <ul class="nav flex-column">
                        <li class="nav-item">
                          <a class="nav-link active" href="#">
                            <i class="fas fa-home nav-icon"></i>
                            Home
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">
                            <i class="fas fa-envelope nav-icon"></i>
                            Email
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">
                            <i class="fas fa-map-marker-alt nav-icon"></i>
                            Address
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link disabled" href="#">
                            <i class="fas fa-phone nav-icon"></i>
                            Phone
                          </a>
                        </li>
                      </ul>

Pills

Take that same HTML, but use .nav-pills instead:

                    
                      <ul class="nav nav-pills">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Classic

Take that same HTML, but use .nav-classic instead:

                    
                      <ul class="nav nav-classic">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Shadow 

                    
                      <ul class="nav nav-classic nav-shadow">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Rounded 

                    
                      <ul class="nav nav-classic nav-rounded">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

White style 

                    
                      <div class="bg-dark p-4">
                        <ul class="nav nav-white nav-pills">
                          <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="#">Disabled</a>
                          </li>
                        </ul>
                      </div>

White border style 

                    
                      <div class="bg-dark p-4">
                        <ul class="nav nav-border-white">
                          <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="#">Disabled</a>
                          </li>
                        </ul>
                      </div>

Box style 

                    
                      <ul class="nav nav-box nav-pills">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Segment 

                    
                      <ul class="nav nav-segment nav-pills">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Fill and justify

Use .nav-fill class.

                    
                      <ul class="nav nav-pills nav-fill">
                        <li class="nav-item">
                          <a class="nav-link active" href="#">Active</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">Much longer nav 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="#">Disabled</a>
                        </li>
                      </ul>

Tabs New

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface.

                    
                      <ul class="nav nav-tabs">
                        <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="#">Disabled</a>
                        </li>
                      </ul>

Nav scroller New

Make arrows visible by setting a max-width size.

                    
                      <!-- Nav Scroller -->
                      <div class="js-nav-scroller hs-nav-scroller-horizontal" style="max-width: 22rem;">
                        <span class="hs-nav-scroller-arrow-prev" style="display: none;">
                          <a class="hs-nav-scroller-arrow-link" href="javascript:;">
                            <i class="fas fa-angle-left"></i>
                          </a>
                        </span>

                        <span class="hs-nav-scroller-arrow-next" style="display: none;">
                          <a class="hs-nav-scroller-arrow-link" href="javascript:;">
                            <i class="fas fa-angle-right"></i>
                          </a>
                        </span>

                        <!-- Nav -->
                        <ul class="nav">
                          <li class="nav-item">
                            <a class="nav-link active" href="#">Dashboard</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Profile</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Projects</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Tasks</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Settings</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Log out</a>
                          </li>
                        </ul>
                        <!-- End Nav -->
                      </div>
                      <!-- End Nav Scroller -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF NAV SCROLLER
                          // =======================================================
                          $('.js-nav-scroller').each(function () {
                            new HsNavScroller($(this)).init()
                          });
                        });
                      </script>

Or don't, then they will appear when the side of the content is smaller than the content size. Reduce the browser size to see in action.

                    
                      <!-- Nav Scroller -->
                      <div class="js-nav-scroller hs-nav-scroller-horizontal">
                        <span class="hs-nav-scroller-arrow-prev" style="display: none;">
                          <a class="hs-nav-scroller-arrow-link" href="javascript:;">
                            <i class="fas fa-angle-left"></i>
                          </a>
                        </span>

                        <span class="hs-nav-scroller-arrow-next" style="display: none;">
                          <a class="hs-nav-scroller-arrow-link" href="javascript:;">
                            <i class="fas fa-angle-right"></i>
                          </a>
                        </span>

                        <!-- Nav -->
                        <ul class="nav">
                          <li class="nav-item">
                            <a class="nav-link active" href="#">Dashboard</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Profile</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Projects</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Tasks</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Settings</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Log out</a>
                          </li>
                        </ul>
                        <!-- End Nav -->
                      </div>
                      <!-- End Nav Scroller -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF NAV SCROLLER
                          // =======================================================
                          $('.js-nav-scroller').each(function () {
                            new HsNavScroller($(this)).init()
                          });
                        });
                      </script>

Nav scroller vertical New

Use "type": "vertical" for vertical alignment and the .hs-nav-scroller-vertical class for a scrollbar.

                    
                      <!-- Nav Scroller -->
                      <div class="js-nav-scroller hs-nav-scroller-vertical" style="max-height: 12rem; max-width: 22rem;"
                           data-hs-nav-scroller-options='{
                             "type": "vertical"
                           }'>
                        <span class="hs-nav-scroller-arrow-prev" style="display: none;">
                          <a class="hs-nav-scroller-arrow-link" href="javascript:;">
                            <i class="fas fa-angle-left"></i>
                          </a>
                        </span>

                        <span class="hs-nav-scroller-arrow-next" style="display: none;">
                          <a class="hs-nav-scroller-arrow-link" href="javascript:;">
                            <i class="fas fa-angle-right"></i>
                          </a>
                        </span>

                        <!-- Nav -->
                        <ul class="nav flex-column">
                          <li class="nav-item">
                            <a class="nav-link active" href="#">Dashboard</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Profile</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Projects</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Tasks</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Settings</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">Log out</a>
                          </li>
                        </ul>
                        <!-- End Nav -->
                      </div>
                      <!-- End Nav Scroller -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/hs-nav-scroller/dist/hs-nav-scroller.min.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF NAV SCROLLER
                          // =======================================================
                          $('.js-nav-scroller').each(function () {
                            new HsNavScroller($(this)).init()
                          });
                        });
                      </script>

Nav scroller methods New

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-nav-scroller-options='{}'.

Parameters Description
type Scrollbar type, vertical or horizontal. horizontal
target Element to which the scrollbar will move. .active
delay Animation delay. 20
offset Indent back for scrollbar. 0