EasyLink.Me Logo

Navs

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

Menu nav

Navigation bits in Bootstrap all share a general Nav component and styles. Swap variants 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.

Design
Code
<Nav defaultActiveKey="/#" as="ul">
    <Nav.Item as="li">
        <Nav.Link href="/#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item as="li">
        <Nav.Link eventKey="link-1">Link</Nav.Link>
    </Nav.Item>
    <Nav.Item as="li">
        <Nav.Link eventKey="link-2">Link</Nav.Link>
    </Nav.Item>
    <Nav.Item as="li">
        <Nav.Link eventKey="link-2" disabled>Disabled</Nav.Link>
    </Nav.Item>
</Nav>

<Nav> markup is very flexible and styling is controlled via classes so you can use whatever elements you like to build your navs. By default<Nav> and <Nav.Item> both render <div>s instead of<ul> and <li> elements respectively. This because it's possible (and common) to leave off the <Nav.Item>'s and render a <Nav.Link> directly, which would create invalid markup by default (ul < a).

Design
Code
<Nav>
    <Nav.Item>
        <Nav.Link href="#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link href="#">Link</Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link href="#">Link</Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="disabled" disabled>Disabled</Nav.Link>
    </Nav.Item>
</Nav>

Available styles

Change the style of <Nav>s component with modifiers and utilities. Mix and match as needed, or build your own.

Horizontal alignment

You can control the the direction and orientation of the Nav by making use of the flexbox layout utility classes. By default, navs are left-aligned, but that is easily changed to center or right-aligned.

Centered with .justify-content-center:

Design
Code
<Nav className="justify-content-center" defaultActiveKey="/#" as="ul">
    <Nav.Item as="li">
        <Nav.Link href="/#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item as="li">
        <Nav.Link eventKey="link-1">Link</Nav.Link>
    </Nav.Item>
    <Nav.Item as="li">
        <Nav.Link eventKey="link-2">Link</Nav.Link>
    </Nav.Item>
    <Nav.Item as="li">
        <Nav.Link eventKey="link-2" disabled>Disabled</Nav.Link>
    </Nav.Item>
</Nav>

Right-aligned with .justify-content-end:

Design
Code
<Nav className="justify-content-end" defaultActiveKey="/#" as="ul">
    <Nav.Item as="li">
        <Nav.Link href="/#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item as="li">
        <Nav.Link eventKey="link-1">Link</Nav.Link>
    </Nav.Item>
    <Nav.Item as="li">
        <Nav.Link eventKey="link-2">Link</Nav.Link>
    </Nav.Item>
    <Nav.Item as="li">
        <Nav.Link eventKey="link-2" disabled>Disabled</Nav.Link>
    </Nav.Item>
</Nav>

Vertical

Create stacked navs by changing the flex item direction with the .flex-column class, or your own css. You can even use the responsive versions to stack in some viewports but not others ( e.g. .flex-sm-column ).

Design
Code
<Nav defaultActiveKey="/#" className="flex-column" as="ul">
    <Nav.Item as="li">
        <Nav.Link href="/#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item as="li">
        <Nav.Link eventKey="link-1">Link</Nav.Link>
    </Nav.Item>                                
    <Nav.Item as="li">
        <Nav.Link eventKey="link-2">Link</Nav.Link>
    </Nav.Item>                                
    <Nav.Item as="li">
        <Nav.Link eventKey="disabled" disabled>Disabled</Nav.Link>
    </Nav.Item>
</Nav>

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

Design
Code
<Nav defaultActiveKey="/#" className="flex-column">
    <Nav.Link href="/#">Active</Nav.Link>
    <Nav.Link eventKey="link-1">Link</Nav.Link>
    <Nav.Link eventKey="link-2">Link</Nav.Link>
    <Nav.Link eventKey="disabled" disabled>Disabled</Nav.Link>
</Nav>

Tabs

Visually represent nav items as "tabs". This style pairs nicely with tabbable regions created by our Tab components.

Note: creating a vertical nav (.flex-column) with tabs styling is unsupported by Bootstrap's default stylesheet.

Design
Code
<Nav variant="tabs" defaultActiveKey="#">
    <Nav.Item>
        <Nav.Link href="#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="link-1">Link </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="link-2">Link </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="disabled" disabled>Disabled</Nav.Link>
    </Nav.Item>
</Nav>

Pills

An alternative visual with variant="pills" prop

Design
Code
<Nav variant="pills" defaultActiveKey="#">
    <Nav.Item>
        <Nav.Link href="#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="link-1">Link </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="link-2">Link </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="disabled" disabled>Disabled</Nav.Link>
    </Nav.Item>
</Nav>

Fill and justify

Force the contents of your nav to extend the full available width. To proportionately fill the space use fill. Notice that the nav is the entire width but each nav item is a different size.

Design
Code
<Nav fill variant="pills"  defaultActiveKey="#" as="ul">
    <Nav.Item as="li">
        <Nav.Link href="#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item as="li">
        <Nav.Link eventKey="link-1">Much longer nav link </Nav.Link>
    </Nav.Item>
    <Nav.Item as="li">
        <Nav.Link eventKey="link-2">Link </Nav.Link>
    </Nav.Item>
    <Nav.Item as="li">
        <Nav.Link eventKey="disabled" disabled>Disabled</Nav.Link>
    </Nav.Item>
</Nav>

When using a <Nav> based navigation without as prop, it will generate anchors in <div>.

Design
Code
<Nav fill variant="pills" defaultActiveKey="#">
    <Nav.Item>
        <Nav.Link href="#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="link-1">Much longer nav link </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="link-2">Link </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="disabled" disabled>Disabled</Nav.Link>
    </Nav.Item>
</Nav>

If you want each NavItem to be the same size use justify.

Design
Code
<Nav justify variant="pills" defaultActiveKey="#">
    <Nav.Item>
        <Nav.Link href="#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="link-1">Much longer nav link </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="link-2">Link </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="disabled" 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
<Nav fill variant="pills" defaultActiveKey="#" className="flex-column flex-sm-row">
    <Nav.Item>
        <Nav.Link href="#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="link-1">Much longer nav link </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="link-2">Link </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="disabled" disabled>Disabled</Nav.Link>
    </Nav.Item>
</Nav>

JavaScript behavior ( Tabs )

Create dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices. Tabs is a higher-level component for quickly creating a Nav matched with a set of TabPanes.

Design
Code
Home Tab - 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.
Profile Tab - 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.
Contact Tab - 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.
<Tabs defaultActiveKey="home" id="uncontrolled-tab-example" className="mb-3">
    <Tab eventKey="home" title="Home">
        <strong>Home Tab</strong> - 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>
    <Tab eventKey="profile" title="Profile">
        <strong>Profile Tab</strong> - 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>
    <Tab eventKey="contact" title="Contact">
        <strong>Contact Tab</strong> - 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>
</Tabs>

The tabs plugin also works with pills.

Design
Code
Home Tab - 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.
Profile Tab - 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.
Contact Tab - 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.
<Tabs  variant="pills" defaultActiveKey="home" id="uncontrolled-tab-example" className="mb-3">
    <Tab eventKey="home" title="Home">
        <strong>Home Tab</strong> - 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>
    <Tab eventKey="profile" title="Profile">
        <strong>Profile Tab</strong> - 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>
    <Tab eventKey="contact" title="Contact">
        <strong>Contact Tab</strong> - 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>
</Tabs>

And with vertical pills.

Design
Code
Home
Profile
Messages
Settings
Home Tab - 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.
Profile Tab - 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.
Messages Tab - 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.
Settings Tab - 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 id="left-tabs-example" defaultActiveKey="home">
    <Row>
        <Col sm={3}>
            <Nav variant="pills" className="flex-column">
                <Nav.Item>
                    <Nav.Link eventKey="home">Home</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="profile">Profile</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="messages">Messages</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="settings">Settings</Nav.Link>
                </Nav.Item>
            </Nav>
        </Col>
        <Col sm={9}>
            <Tab.Content>
                <Tab.Pane eventKey="home">
                    <strong>Home Tab</strong> - 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.Pane>
                <Tab.Pane eventKey="profile">
                    <strong>Profile Tab</strong> - 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.Pane>
                <Tab.Pane eventKey="messages">
                    <strong>Messages Tab</strong> - 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.Pane>
                <Tab.Pane eventKey="settings">
                    <strong>Settings Tab</strong> - 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.Pane>
            </Tab.Content>
        </Col>
    </Row>
</Tab.Container>

EasyLink.Me

Product of Cosmic Stack