Navs and tabs

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

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

<Nav as="ul>
    <Nav.Item as="li"><Nav.Link href="" active>Active</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="">Link</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="">Link</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="" disabled>Disabled</Nav.Link></Nav.Item>
</Nav>

Classes are used throughout, so your markup can be super flexible. Use <ul> s like above, <ol> if the order of your items is important, or roll your own with a <nav> element. Because the .nav uses display: flex , the nav links behave the same as nav items would, but without the extra markup.

Design

Code

Active Link Link Disabled

<Nav>
    <Nav.Link href="" active>Active</Nav.Link>
    <Nav.Link href="">Link</Nav.Link>
    <Nav.Link href="">Link</Nav.Link>
    <Nav.Link href="" disabled>Disabled</Nav.Link>
</Nav>

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.

Nav Center

Centered with .justify-content-center :

<Nav className="justify-content-center" as="ul>
    <Nav.Item as="li"><Nav.Link href="" active>Active</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="">Link</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="">Link</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="" disabled>Disabled</Nav.Link></Nav.Item>
</Nav>

Nav Right

Right-aligned with .justify-content-end :

<Nav className="justify-content-end" as="ul">
    <Nav.Item as="li"><Nav.Link href="" active>Active</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="">Link</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="">Link</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="" disabled>Disabled</Nav.Link></Nav.Item>
</Nav>

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

Design

Code

<Nav className="flex-column" as="ul">
    <Nav.Item as="li"><Nav.Link href="" active>Active</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="">Link</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="">Link</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="" disabled>Disabled</Nav.Link></Nav.Item>
</Nav>

As always, vertical navigation is possible without <ul> s, too.

Design

Code

Active Link Link Disabled

<Nav className="flex-column">
    <Nav.Link href="" active>Active</Nav.Link>
    <Nav.Link href="">Link</Nav.Link>
    <Nav.Link href="">Link</Nav.Link>
    <Nav.Link href="" disabled>Disabled</Nav.Link>
</Nav>

Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.

Design

Code

<Nav variant="tabs" as="ul">
    <Nav.Item as="li"><Nav.Link href="" active>Active</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="">Link</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="">Link</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="" disabled>Disabled</Nav.Link></Nav.Item>
</Nav>

Pills

Take that same HTML, but use.nav-pillsinstead:

Design

Code

<Nav as="ul" variant="pills">
<Nav.Item as="li"><Nav.Link href="" active>Active</Nav.Link></Nav.Item>
<Nav.Item as="li"><Nav.Link href="">Link</Nav.Link></Nav.Item>
<Nav.Item as="li"><Nav.Link href="">Link</Nav.Link></Nav.Item>
<Nav.Item as="li"><Nav.Link href="" disabled>Disabled</Nav.Link></Nav.Item>
</Nav>

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 .nav-item s, use .nav-fill . Notice that all horizontal space is occupied, but not every nav item has the same width.

Design

Code

<Nav as="ul" variant="pills" fill>
    <Nav.Item as="li"><Nav.Link href="" active>Active</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="">Much longer nav link</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="">Link</Nav.Link></Nav.Item>
    <Nav.Item as="li"><Nav.Link href="" disabled>Disabled</Nav.Link></Nav.Item>
</Nav>

When using a <nav> -based navigation, be sure to include .nav-item on the anchors.

<Nav variant="pills" fill>
    <Nav.Item><Nav.Link href="" active>Active</Nav.Link></Nav.Item>
    <Nav.Item><Nav.Link href="">Much longer nav link</Nav.Link></Nav.Item>
    <Nav.Item><Nav.Link href="">Link</Nav.Link></Nav.Item>
    <Nav.Item><Nav.Link href="" disabled>Disabled</Nav.Link></Nav.Item>
</Nav>

Similar to the .nav-fill example using a <nav> -based navigation, be sure to include .nav-item on the anchors.

<Nav variant="pills" justify>
    <Nav.Item><Nav.Link href="" active>Active</Nav.Link></Nav.Item>
    <Nav.Item><Nav.Link href="">Much longer nav link</Nav.Link></Nav.Item>
    <Nav.Item><Nav.Link href="">Link</Nav.Link></Nav.Item>
    <Nav.Item><Nav.Link href="" disabled>Disabled</Nav.Link></Nav.Item>
</Nav>

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.

Design

Code

Active Longer nav link Link Disabled

<Nav variant="pills" className="flex-column flex-sm-row">
    <Nav.Link as="a" href="" className="flex-sm-fill text-sm-center" active>Active</Nav.Link>
    <Nav.Link as="a" href="" className="flex-sm-fill text-sm-center">Longer nav link</Nav.Link>
    <Nav.Link as="a" href="" className="flex-sm-fill text-sm-center">Link</Nav.Link>
    <Nav.Link as="a" href="" className="flex-sm-fill text-sm-center" disabled>Disabled</Nav.Link>
</Nav>

JavaScript behavior

Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.

Design

Code

Home Profile Contact

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

<Tab.Container>
    <Nav
    variant="tabs"
    id="myTab"
    className="mb-3"
    defaultActiveKey={isActive}
    onSelect={handleSelect}
    >
    <Nav.Link
        as="a"
        eventKey="#home"
        active={isActive === "#home"}
        id="home-tab"
    >
        Home
    </Nav.Link>
    <Nav.Link as="a" eventKey="#profile" id="profile-tab">
        Profile
    </Nav.Link>
    <Nav.Link as="a" eventKey="#contact" id="contact-tab">
        Contact
    </Nav.Link>
    </Nav>
    <Tab.Content id="myTabContent" onSelect={handleSelect}>
    <Tab.Pane
        id="home"
        eventKey="#home"
        active={isActive === "#home"}
    >
        <p>
        Consequat occaecat ullamco amet non eiusmod nostrud
        dolore irure incididunt est duis anim sunt officia.
        Fugiat velit proident aliquip nisi incididunt nostrud
        exercitation proident est nisi. Irure magna elit commodo
        anim ex veniam culpa eiusmod id nostrud sit cupidatat in
        veniam ad. Eiusmod consequat eu adipisicing minim anim
        aliquip cupidatat culpa excepteur quis. Occaecat sit eu
        exercitation irure Lorem incididunt nostrud.
        </p>
    </Tab.Pane>
    <Tab.Pane id="profile" eventKey="#profile">
        <p>
        Consequat occaecat ullamco amet non eiusmod nostrud
        dolore irure incididunt est duis anim sunt officia.
        Fugiat velit proident aliquip nisi incididunt nostrud
        exercitation proident est nisi. Irure magna elit commodo
        anim ex veniam culpa eiusmod id nostrud sit cupidatat in
        veniam ad. Eiusmod consequat eu adipisicing minim anim
        aliquip cupidatat culpa excepteur quis. Occaecat sit eu
        exercitation irure Lorem incididunt nostrud.
        </p>
    </Tab.Pane>
    <Tab.Pane id="contact" eventKey={"#contact"}>
        <p>
        Consequat occaecat ullamco amet non eiusmod nostrud
        dolore irure incididunt est duis anim sunt officia.
        Fugiat velit proident aliquip nisi incididunt nostrud
        exercitation proident est nisi. Irure magna elit commodo
        anim ex veniam culpa eiusmod id nostrud sit cupidatat in
        veniam ad. Eiusmod consequat eu adipisicing minim anim
        aliquip cupidatat culpa excepteur quis. Occaecat sit eu
        exercitation irure Lorem incididunt nostrud.
        </p>
    </Tab.Pane>
    </Tab.Content>
</Tab.Container>

Horizontal pills

The tabs plugin also works with pills.

<Tab.Container defaultActiveKey="pills-home-tab">
    <Nav variant="pills" className="mb-3">
        <Nav.Item>
        <Nav.Link eventKey="pills-home-tab">Home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
        <Nav.Link eventKey="pills-profile-tab">Profile</Nav.Link>
        </Nav.Item>
        <Nav.Item>
        <Nav.Link eventKey="pills-contact-tab">Contact</Nav.Link>
        </Nav.Item>
    </Nav>

    <Tab.Content>
        <Tab.Pane eventKey="pills-home-tab">
        <p>
            Consequat occaecat ullamco amet non eiusmod nostrud dolore
            irure incididunt est duis anim sunt officia. Fugiat velit
            proident aliquip nisi incididunt nostrud exercitation
            proident est nisi. Irure magna elit commodo anim ex veniam
            culpa eiusmod id nostrud sit cupidatat in veniam ad.
            Eiusmod consequat eu adipisicing minim anim aliquip
            cupidatat culpa excepteur quis. Occaecat sit eu
            exercitation irure Lorem incididunt nostrud.
        </p>
        </Tab.Pane>
        <Tab.Pane eventKey="pills-profile-tab">
        <p>
            Consequat occaecat ullamco amet non eiusmod nostrud dolore
            irure incididunt est duis anim sunt officia. Fugiat velit
            proident aliquip nisi incididunt nostrud exercitation
            proident est nisi. Irure magna elit commodo anim ex veniam
            culpa eiusmod id nostrud sit cupidatat in veniam ad.
            Eiusmod consequat eu adipisicing minim anim aliquip
            cupidatat culpa excepteur quis. Occaecat sit eu
            exercitation irure Lorem incididunt nostrud.
        </p>
        </Tab.Pane>
        <Tab.Pane eventKey="pills-contact-tab">
        <p>
            Consequat occaecat ullamco amet non eiusmod nostrud dolore
            irure incididunt est duis anim sunt officia. Fugiat velit
            proident aliquip nisi incididunt nostrud exercitation
            proident est nisi. Irure magna elit commodo anim ex veniam
            culpa eiusmod id nostrud sit cupidatat in veniam ad.
            Eiusmod consequat eu adipisicing minim anim aliquip
            cupidatat culpa excepteur quis. Occaecat sit eu
            exercitation irure Lorem incididunt nostrud.
        </p>
        </Tab.Pane>
    </Tab.Content>
    </Tab.Container>

Vertical pills

And with vertical pills.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

<Tab.Container
id="left-tabs-example"
defaultActiveKey="v-pills-home"
>
<Row>
<Col md={4} xs={12}>
    <Nav variant="pills" className="flex-column">
    <Nav.Item>
        <Nav.Link
        eventKey="v-pills-home"
        id="v-pills-home-tab"
        >
        Home
        </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link
        eventKey="v-pills-profile"
        id="v-pills-profile-tab"
        >
        Profile
        </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link
        eventKey="v-pills-messages"
        id="v-pills-messages-tab"
        >
        Messages
        </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link
        eventKey="v-pills-settings"
        id="v-pills-settings-tab"
        >
        Settings
        </Nav.Link>
    </Nav.Item>
    </Nav>
</Col>
<Col md={8} xs={12}>
    <Tab.Content>
    <Tab.Pane eventKey="v-pills-home">
        <p>
        Cillum ad ut irure tempor velit nostrud occaecat
        ullamco aliqua anim Lorem sint. Veniam sint duis
        incididunt do esse magna mollit excepteur laborum
        qui. Id id reprehenderit sit est eu aliqua occaecat
        quis et velit excepteur laborum mollit dolore
        eiusmod. Ipsum dolor in occaecat commodo et
        voluptate minim reprehenderit mollit pariatur.
        Deserunt non laborum enim et cillum eu deserunt
        excepteur ea incididunt minim occaecat.
        </p>
    </Tab.Pane>
    <Tab.Pane
        eventKey="v-pills-profile"
        id="v-pills-profile"
    >
        <p>
        Eu dolore ea ullamco dolore Lorem id cupidatat
        excepteur reprehenderit consectetur elit id dolor
        proident in cupidatat officia. Voluptate excepteur
        commodo labore nisi cillum duis aliqua do. Aliqua
        amet qui mollit consectetur nulla mollit velit
        aliqua veniam nisi id do Lorem deserunt amet. Culpa
        ullamco sit adipisicing labore officia magna elit
        nisi in aute tempor commodo eiusmod.
        </p>
    </Tab.Pane>
    <Tab.Pane
        eventKey="v-pills-messages"
        id="v-pills-messages"
    >
        <p>
        Fugiat id quis dolor culpa eiusmod anim velit
        excepteur proident dolor aute qui magna. Ad proident
        laboris ullamco esse anim Lorem Lorem veniam quis
        Lorem irure occaecat velit nostrud magna nulla.
        Velit et et proident Lorem do ea tempor officia
        dolor. Reprehenderit Lorem aliquip labore est magna
        commodo est ea veniam consectetur.
        </p>
    </Tab.Pane>
    <Tab.Pane
        eventKey="v-pills-settings"
        id="v-pills-settings"
    >
        <p>
        Fugiat id quis dolor culpa eiusmod anim velit
        excepteur proident dolor aute qui magna. Ad proident
        laboris ullamco esse anim Lorem Lorem veniam quis
        Lorem irure occaecat velit nostrud magna nulla.
        Velit et et proident Lorem do ea tempor officia
        dolor. Reprehenderit Lorem aliquip labore est magna
        commodo est ea veniam consectetur.
        </p>
    </Tab.Pane>
    </Tab.Content>
</Col>
</Row>
</Tab.Container>