React Navs

React Navs - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

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

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 Nav 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 Nav 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. 

        
            

          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav>
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

Classes are used throughout, so your markup can be super flexible. Because the Nav uses display: flex, the nav links behave the same as nav items would, but without the extra <NavItem>'s markup. 

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav>
                <MDBNavLink active to="#!">Active</MDBNavLink>
                <MDBNavLink to="#!">Link</MDBNavLink>
                <MDBNavLink to="#!">Link</MDBNavLink>
                <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
              </MDBNav>
          
            </BrowserRouter>
          );

Available styles

Change the style of Navs component with modifiers and utilities.

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 .justify-content-center:

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav className="justify-content-center">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

Right-aligned with .justify-content-end:

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav className="justify-content-end">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

Vertical

Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column ). 

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav className="flex-column">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

As previously, vertical navigation is possible without <NavItem>s, too.

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav className="flex-column">
                <MDBNavLink active to="#!">Active</MDBNavLink>
                <MDBNavLink to="#!">Link</MDBNavLink>
                <MDBNavLink to="#!">Link</MDBNavLink>
                <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
              </MDBNav>
              
            </BrowserRouter>
          );
        
        
    

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink, MDBRow, MDBCol } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBRow>
                <MDBCol>
                  <MDBNav className="font-weight-bold">
                    <MDBNavLink active to="#!">Active</MDBNavLink>
                    <MDBNavLink to="#!">Link</MDBNavLink>
                    <MDBNavLink to="#!">Link</MDBNavLink>
                    <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
                  </MDBNav>
                </MDBCol>
          
                <MDBCol>
                  <MDBNav className="flex-column font-weight-bold">
                    <MDBNavLink active to="#!">Active</MDBNavLink>
                    <MDBNavLink to="#!">Link</MDBNavLink>
                    <MDBNavLink to="#!">Link</MDBNavLink>
                    <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
                  </MDBNav>
                </MDBCol>
              </MDBRow>
          
            </BrowserRouter>
          );

Info notification

MDB has hundreds of colors to use within navs. Take a look here to know all the possibilities. If you want to set background color of the Nav item, use color property.

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavLink, MDBContainer, MDBRow, MDBCol } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBContainer>
                <MDBRow>
                  <MDBCol>
                    <MDBNav color="grey" className="flex-column font-weight-bold">
                      <MDBNavLink className="white-text" active to="#!">Active</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 1</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 2</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 3</MDBNavLink>
                    </MDBNav>
                  </MDBCol>
            
                  <MDBCol>
                    <MDBNav color="amber" className="flex-column font-weight-bold">
                      <MDBNavLink active to="#!" className="dark-grey-text">Active</MDBNavLink>
                      <MDBNavLink to="#!" className="dark-grey-text">Link 1</MDBNavLink>
                      <MDBNavLink to="#!" className="dark-grey-text">Link 2</MDBNavLink>
                      <MDBNavLink to="#!" className="dark-grey-text">Link 3</MDBNavLink>
                    </MDBNav>
                  </MDBCol>
            
                  <MDBCol>
                    <MDBNav color="cyan" className="flex-column font-weight-bold">
                      <MDBNavLink active to="#!" className="indigo-text">Active</MDBNavLink>
                      <MDBNavLink to="#!">Link 1</MDBNavLink>
                      <MDBNavLink to="#!">Link 2</MDBNavLink>
                      <MDBNavLink to="#!">Link 3</MDBNavLink>
                    </MDBNav>
                  </MDBCol>
                </MDBRow>
              </MDBContainer>
          
            </BrowserRouter>
          );
        
        
    
        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavLink, MDBContainer, MDBRow, MDBCol } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBContainer>
                <MDBRow>
                  <MDBCol size="6">
                    <MDBNav color="peach-gradient" className="font-weight-bold py-4 px-2 mb-4">
                      <MDBNavLink className="white-text" active to="#!">Active</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 1</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 2</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 3</MDBNavLink>
                    </MDBNav>
          
                    <MDBNav color="purple-gradient" className="font-weight-bold py-4 px-2 mb-4">
                      <MDBNavLink className="white-text" active to="#!">Active</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 1</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 2</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 3</MDBNavLink>
                    </MDBNav>
                  </MDBCol>
          
                  <MDBCol size="6">
                    <MDBNav color="aqua-gradient" className="font-weight-bold py-4 px-2 mb-4">
                      <MDBNavLink className="white-text" active to="#!">Active</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 1</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 2</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 3</MDBNavLink>
                    </MDBNav>
          
                    <MDBNav color="blue-gradient" className="font-weight-bold py-4 px-2 mb-4">
                      <MDBNavLink className="white-text" active to="#!">Active</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 1</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 2</MDBNavLink>
                      <MDBNavLink className="white-text" to="#!">Link 3</MDBNavLink>
                    </MDBNav>
                  </MDBCol>
                </MDBRow>
              </MDBContainer>
          
            </BrowserRouter>
          );

Tabs

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

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav className="nav-tabs mt-5">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 1</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 2</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 3</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

MDB Tabs MDB Pro component

Check our documentation about tabs. 

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav tabs color="indigo">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 1</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 2</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 3</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

Pills

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

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav className="nav-pills">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 1</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 2</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 3</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

MDB Pills MDB Pro component

Check our pills documentation.

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav pills color="unique">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 1</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 2</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 3</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

Fill and justify

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

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav className="nav-pills nav-fill">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Longer nav link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

And filled <Nav tabs>: 

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav className="nav-tabs nav-fill">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Longer nav link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

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. 

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav className="nav-pills nav-justified">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Longer nav link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

And justified <Nav tabs>: 

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav className="nav-tabs nav-justified">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Longer nav link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

MDB Tabs justified MDB Pro component 

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav tabs color="purple" className="nav-justified">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 1</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 2</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 3</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

MDB Pills justified MDB Pro component 

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav pills className="nav-justified">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 1</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 2</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 3</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

Working with flex utilities

If you need responsive nav variations, consider using a series of flexbox utilities. While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint. 

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav className="nav-pills nav-fill flex-column flex-sm-row">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 1</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 2</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link 3</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

Using dropdowns

MDB Tabs with dropdownMDB Pro component 

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav tabs color="secondary">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBDropdown>
                    <MDBDropdownToggle nav caret color="secondary">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu color="secondary">
                      <MDBDropdownItem>Action</MDBDropdownItem>
                      <MDBDropdownItem>Another Action</MDBDropdownItem>
                      <MDBDropdownItem>Something else here</MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem>Separated link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

MDB Pills with dropdown MDB Pro component 

        
            
          import React from "react";
          import { BrowserRouter } from 'react-router-dom';
          import { MDBNav, MDBNavItem, MDBNavLink, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem } from "mdbreact";
          
          export default () => (
            <BrowserRouter>
          
              <MDBNav pills color="dark">
                <MDBNavItem>
                  <MDBNavLink active to="#!">Active</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBDropdown>
                    <MDBDropdownToggle nav caret color="dark">
                      Dropdown
                    </MDBDropdownToggle>
                    <MDBDropdownMenu color="dark">
                      <MDBDropdownItem>Action</MDBDropdownItem>
                      <MDBDropdownItem>Another Action</MDBDropdownItem>
                      <MDBDropdownItem>Something else here</MDBDropdownItem>
                      <MDBDropdownItem divider />
                      <MDBDropdownItem>Separated link</MDBDropdownItem>
                    </MDBDropdownMenu>
                  </MDBDropdown>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink to="#!">Link</MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                  <MDBNavLink disabled to="#!">Disabled</MDBNavLink>
                </MDBNavItem>
              </MDBNav>
          
            </BrowserRouter>
          );

React Nav - API

In this section you will find advanced information about the Nav component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Imports

        
            
          import React from 'react';
          import { MDBNav, MDBNavItem, MDBNavLink } from 'mdbreact';

API Reference: Navs Properties

The table below shows the configuration options of the MDBNav component.

Name Type Default Description Example
classicTabs Boolean false Changes default nav to Classic Tab <MDBNav classicTabs />
className String - Sets custom classes <MDBNav className="customClass" />
color String - Sets navs background color. Use mdb color palette <MDBNav color="indigo" />
header Boolean false Sets Navs styles for pills header <MDBNav header />
pills Boolean false Changes Navs copmonent to Pills component. Use MDB Pills component <MDBNav pills />
tabs Boolean false Changes Navs copmonent to Tabs component. Use MDB Tabs component <MDBNav tabs />
tag String nav Changes default nav tag <MDBNav tag="div" />

API Reference: NavItem Properties

The table below shows the configuration options of the <­MDBNavItem/> component.

Name Type Default Description Example
active Boolean false Sets active state of the NavItem <MDBNavItem active />
className String Sets custom classes <MDBNavItem className="customClass" />
tag String li Changes default nav tag <MDBNavItem tag="div" />