Vue Bootstrap Navs

Vue Navs - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

Base nav

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.

The base mdb-navbar component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

The base mdb-navbar component does not include any .active state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling. 

        
            
      <template>
        <mdb-navbar color="grey" class=" lighten-4 py-4">
          <mdb-navbar-nav nav left>
            <mdb-nav-item href="#" active>Active</mdb-nav-item>
            <mdb-nav-item href="#">Link</mdb-nav-item>
            <mdb-nav-item href="#">Link</mdb-nav-item>
            <mdb-nav-item href="#" disabled>Disabled</mdb-nav-item>
          </mdb-navbar-nav>
        </mdb-navbar>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbNavbar,
          mdbNavbarNav,
          mdbNavItem
        } from 'mdbvue';
        export default {
          name: 'NavbarPage',
          components: {
            mdbNavbar,
            mdbNavbarNav,
            mdbNavbarItem
          }
        }
      </script>

Available styles

Change the style of mdb-navbars component with modifiers and utilities. Mix and match as needed, or build your own.

Horizontal alignment

Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.

Centered with center prop:

        
            
        <template>
          <mdb-navbar color="grey" class=" lighten-4 py-4">
            <mdb-navbar-nav nav center>
              <mdb-nav-item href="#" active>Active</mdb-nav-item>
              <mdb-nav-item href="#">Link</mdb-nav-item>
              <mdb-nav-item href="#">Link</mdb-nav-item>
              <mdb-nav-item href="#" disabled>Disabled</mdb-nav-item>
            </mdb-navbar-nav>
          </mdb-navbar>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbNavbar,
            mdbNavbarNav,
            mdbNavItem
          } from 'mdbvue';
          export default {
            name: 'NavbarPage',
            components: {
              mdbNavbar,
              mdbNavbarNav,
              mdbNavbarItem
            }
          }
        </script>

Right-aligned with right prop:

        
            
        <template>
          <mdb-navbar color="grey" class="lighten-4 py-4">
            <mdb-navbar-nav nav right>
              <mdb-nav-item href="#" active>Active</mdb-nav-item>
              <mdb-nav-item href="#">Link</mdb-nav-item>
              <mdb-nav-item href="#">Link</mdb-nav-item>
              <mdb-nav-item href="#" disabled>Disabled</mdb-nav-item>
            </mdb-navbar-nav>
          </mdb-navbar>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbNavbar,
            mdbNavbarNav,
            mdbNavItem
          } from 'mdbvue';
          export default {
            name: 'NavbarPage',
            components: {
              mdbNavbar,
              mdbNavbarNav,
              mdbNavbarItem
            }
          }
        </script>

Vertical

Stack your navigation by changing the flex item direction with the vertical prop:

        
            
        <template>
          <mdb-navbar color="blue" class="lighten-5 py-4">
            <mdb-navbar-nav nav vertical>
              <mdb-nav-item href="#" active>Active</mdb-nav-item>
              <mdb-nav-item href="#">Link</mdb-nav-item>
              <mdb-nav-item href="#">Link</mdb-nav-item>
              <mdb-nav-item href="#" disabled>Disabled</mdb-nav-item>
            </mdb-navbar-nav>
          </mdb-navbar>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbNavbar,
            mdbNavbarNav,
            mdbNavItem
          } from 'mdbvue';
          export default {
            name: 'NavbarPage',
            components: {
              mdbNavbar,
              mdbNavbarNav,
              mdbNavbarItem
            }
          }
        </script>
        
        
    

        
            
        <template>
          <mdb-navbar color="grey" class="lighten-4 py-4">
            <mdb-navbar-nav nav vertical class="font-weight-bold">
              <mdb-nav-item href="#" active>Active</mdb-nav-item>
              <mdb-nav-item href="#">Link</mdb-nav-item>
              <mdb-nav-item href="#">Link</mdb-nav-item>
              <mdb-nav-item href="#" disabled>Disabled</mdb-nav-item>
            </mdb-navbar-nav>
          </mdb-navbar>
          <br>
          <mdb-navbar class="grey lighten-4 py-4">
            <mdb-navbar-nav nav class="font-weight-bold">
              <mdb-nav-item href="#" active>Active</mdb-nav-item>
              <mdb-nav-item href="#">Link</mdb-nav-item>
              <mdb-nav-item href="#">Link</mdb-nav-item>
              <mdb-nav-item href="#" disabled>Disabled</mdb-nav-item>
            </mdb-navbar-nav>
          </mdb-navbar>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbNavbar,
            mdbNavbarNav,
            mdbNavItem
          } from 'mdbvue';
          export default {
            name: 'NavbarPage',
            components: {
              mdbNavbar,
              mdbNavbarNav,
              mdbNavbarItem
            }
          }
        </script>

Info notification

MDB has hundreds of colors to use within navs. Take a look here to know all the possibilities.

        
            
        <template>
          <mdb-row>
            <mdb-col md="4">
              <mdb-navbar color="pink" class="lighten-3 py-4">
                <mdb-navbar-nav nav vertical class="font-weight-bold">
                  <mdb-nav-item href="#" active anchorClass="white-text">Active</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar>
            </mdb-col>
            <mdb-col md="4">
              <mdb-navbar color="amber" class="lighten-3 py-4">
                <mdb-navbar-nav nav vertical class="font-weight-bold">
                  <mdb-nav-item href="#" active anchorClass="dark-grey-text">Active</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="dark-grey-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="dark-grey-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="dark-grey-text">Link</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar>
            </mdb-col>
            <mdb-col md="4">
              <mdb-navbar color="cyan" class="lighten-3 py-4">
                <mdb-navbar-nav nav vertical class="font-weight-bold">
                  <mdb-nav-item href="#" anchorClass="indigo-text" active>Active</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="indigo-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="indigo-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="indigo-text">Link</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar>
            </mdb-col>
          </mdb-row>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbNavbar,
            mdbNavbarNav,
            mdbNavItem,
            mdbRow,
            mdbCol
          } from 'mdbvue';
          export default {
            name: 'NavbarPage',
            components: {
              mdbNavbar,
              mdbNavbarNav,
              mdbNavbarItem,
              mdbRow,
              mdbCol
            }
          }
        </script>
        
        
    
        
            
          <style>
            .nav a.white-text:hover {
              color: #e0e0e0 !important;
            }

            .nav a.dark-grey-text:hover {
              color: #78909c !important;
            }

            .nav a.indigo-text:hover {
              color: #7986cb !important;
            }
          </style>
          
        
    
        
            
        <template>
          <mdb-row>
            <mdb-col md="6">
              <mdb-navbar color="peach-gradient" class="lighten-3 py-4 mb-4">
                <mdb-navbar-nav nav class="font-weight-bold">
                  <mdb-nav-item href="#" active anchorClass="white-text">Active</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar>
            </mdb-col>
            <mdb-col md="6">
              <mdb-navbar color="purple-gradient" class="lighten-3 py-4 mb-4">
                <mdb-navbar-nav nav class="font-weight-bold">
                  <mdb-nav-item href="#" active anchorClass="white-text">Active</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar>
            </mdb-col>
            <mdb-col md="6">
              <mdb-navbar color="aqua-gradient" class="lighten-3 py-4 mb-4">
                <mdb-navbar-nav nav class="font-weight-bold">
                  <mdb-nav-item href="#" active anchorClass="white-text">Active</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar>
            </mdb-col>
            <mdb-col md="6">
              <mdb-navbar color="blue-gradient" class="lighten-3 py-4 mb-4">
                <mdb-navbar-nav nav class="font-weight-bold">
                  <mdb-nav-item href="#" active anchorClass="white-text">Active</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                  <mdb-nav-item href="#" anchorClass="white-text">Link</mdb-nav-item>
                </mdb-navbar-nav>
              </mdb-navbar>
            </mdb-col>
          </mdb-row>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbNavbar,
            mdbNavbarNav,
            mdbNavItem,
            mdbRow,
            mdbCol
          } from 'mdbvue';
          export default {
            name: 'NavbarPage',
            components: {
              mdbNavbar,
              mdbNavbarNav,
              mdbNavbarItem,
              mdbRow,
              mdbCol
            }
          }
        </script>
        
        
    
        
            
          <style>
            .nav a.white-text:hover {
              color: #e0e0e0 !important;
            }
          </style>

Tabs

Use our mdb-tabs component to generate a tabbed interface. 

        
            
        <template>
          <mdb-container>
            <mdb-tabs 
              :active="0" 
              default 
              :links="
                [
                  { text: 'Active' },
                  { text: 'Link' },
                  { text: 'Link' },
                  { text: 'Disabled', disabled: true } 
                ]"
              :content="[
                  `Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.`,
                  `Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.`,
                  `Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.`]" />
          </mdb-container>
        </template>
        
        
    
        
            
          <script>
            import {
              mdbContainer,
              mdbCol,
              mdbRow,
              mdbIcon,
              mdbTabs
            } from 'mdbvue';
            export default {
              name: 'TabPage',
              components: {
                mdbContainer,
                mdbCol,
                mdbRow,
                mdbIcon,
                mdbTabs
              }
            }
          </script>

MDB Tabs MDB Pro component

Check our documentation about tabs. 

        
            
          <template>
            <mdb-tabs :active="0" tabs color="light-blue" class="lighten-1 mx-0 mb-0 mt-1" :links="[
                { text: 'Active' },
                { text: 'Link 1' },
                { text: 'Link 2' },
                { text: 'Link 3' }]" />
          </template>
          
        
    
        
            
          <script>
            import {
              mdbTabs
            } from 'mdbvue';
            export default {
              name: 'Basic',
              components: {
                mdbTabs
              }
            }
          </script>

Pills

Take that same HTML, but use pills prop instead: 

        
            
        <template>
          <mdb-tabs :active="0" pills color="primary" :links="[
              { text: 'Active' },
              { text: 'Link' },
              { text: 'Link' },
              { text: 'Link' },
              { text: 'Disabled', disabled: true }]" />
        </template>
        
        
    
        
            
          <script>
            import {
              mdbTabs
            } from 'mdbvue';
            export default {
              name: 'Basic',
              components: {
                mdbTabs
              }
            }
          </script>

MDB Pills MDB Pro component

Check our documentation about pills.

        
            
          <template>
            <mdb-tabs :active="0" pills color="unique" :links="[
                { text: 'Active' },
                { text: 'Link 1' },
                { text: 'Link 2' },
                { text: 'Link 3' }]" />
          </template>
          
        
    
        
            
            <script>
              import {
                mdbTabs
              } from 'mdbvue';
              export default {
                name: 'Basic',
                components: {
                  mdbTabs
                }
              }
            </script>

Fill and justify

Force your .nav’s contents to extend the full available width one of two modifier props. To proportionately fill all available space with your mdb-tabss, use fill. Notice that all horizontal space is occupied, but not every nav item has the same width. 

        
            
        <template>
          <mdb-tabs :active="0" pills fill justify class="mb-5" :links="[
                { text: 'Active' },
                { text: 'Longer nav link' },
                { text: 'Link' },
                { text: 'Disabled', disabled: true }]" />
        </template>
        
        
    
        
            
          <script>
            import {
              mdbTabs
            } from 'mdbvue';
            export default {
              name: 'Pills',
              components: {
                mdbTabs
              }
            }
          </script>

MDB Tabs justified MDB Pro component 

        
            
          <template>
            <mdb-tabs :active="0" tabs justify color="purple" :links="[
                  { text: 'Active' },
                  { text: 'Link 1' },
                  { text: 'Link 2' },
                  { text: 'Link 3' }]" />
          </template>
          
        
    
        
            
            <script>
              import {
                mdbTabs
              } from 'mdbvue';
              export default {
                name: 'Tabs',
                components: {
                  mdbTabs
                }
              }
            </script>

MDB Pills justified MDB Pro component 

        
            
          <template>
            <mdb-tabs :active="0" pills justify :links="[
                  { text: 'Active' },
                  { text: 'Link 1' },
                  { text: 'Link 2' },
                  { text: 'Link 3' }]" />
          </template>
          
        
    
        
            
            <script>
              import {
                mdbTabs
              } from 'mdbvue';
              export default {
                name: 'Pills',
                components: {
                  mdbTabs
                }
              }
            </script>

Using dropdowns

Tabs with dropdowns

        
            
      <template>
        <mdb-tabs :active="0" tabs class="mb-2" :links="[
                { text: 'Active' },
                { text: 'Dropdown', dropdown: true, dropdownItems: [{ text: 'Action' }, { text: 'Another action' }, { text: 'Something else here' }, { divider: true }, { text: 'Separeted link'}]},
                { text: 'Link' },
                { text: 'Disabled', disabled: true } ]" />
      </template>
      
        
    
        
            
        <script>
          import {
            mdbTabs
          } from 'mdbvue';
          export default {
            name: 'Basic',
            components: {
              mdbTabs
            }
          }
        </script>

MDB Tabs with dropdownMDB Pro component 

        
            
        <template>
          <mdb-tabs :active="0" tabs color="pink" class="mb-2" :links="[
                    { text: 'Active' },
                    { text: ': true, dropdownDropdown', dropdownItems: [{ text: 'Action' }, { text: 'Another action' }, { text: 'Something else here' }, { divider: true }, { text: 'Separeted link'}]},
                    { text: 'Link 1' },
                    { text: 'Link 2' } ]" />
        </template>
        
        
    
        
            
          <script>
            import {
              mdbTabs
            } from 'mdbvue';
            export default {
              name: 'Basic',
              components: {
                mdbTabs
              }
            }
          </script>
          
        
    
        
            
            <style>
              .md-tabs .nav-item.show .nav-link {
                background-color: transparent;
                color: #fff;
              }
            </style>

Pills with dropdowns 

        
            
      <template>
        <mdb-tabs :active="0" pills class="mb-2" :links="[
                { text: 'Active' },
                { text: 'Dropdown', dropdown: true, dropdownItems: [{ text: 'Action' }, { text: 'Another action' }, { text: 'Something else here' }, { divider: true }, { text: 'Separeted link'}]},
                { text: 'Link' },
                { text: 'Disabled', disabled: true } ]" />
      </template>
      
        
    
        
            
        <script>
          import {
            mdbTabs
          } from 'mdbvue';
          export default {
            name: 'Basic',
            components: {
              mdbTabs
            }
          }
        </script>

MDB Pills with dropdown MDB Pro component 

        
            
        <template>
          <mdb-tabs :active="0" pills color="danger" justify class="mb-2" :links="[
                  { text: 'Active' },
                  { text: 'Dropdown', dropdown: true, dropdownItems: [{ text: 'Action' }, { text: 'Another action' }, { text: 'Something else here' }, { divider: true }, { text: 'Separeted link'}]},
                  { text: 'Link 1' },
                  { text: 'Link 2' } ]" />
        </template>
        
        
    
        
            
          <script>
            import {
              mdbTabs
            } from 'mdbvue';
            export default {
              name: 'Basic',
              components: {
                mdbTabs
              }
            }
          </script>