Documentation

HTML
Vue
Laravel
React
Tailwind
Angular
CodeIgniter

Requirements
File Structure

Basic
React

Favicon
Loading Transitions
Logo
Changing Fonts
Layout Configure
Sidebar and Header

Disable Form
Sizing
Input Group
Alternate Input
Floating Label
Alternate Float Label
Toggle Button
Validation

Tyography
Images
Tables
Figures

AOS Animation
Datepicker
Circle Progress
CounterUp
NoUiSlider
Data Table
Source & Credits
Upgrade Guide
Change Log

Navs and tabs

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

Active
Link
Link
Disabled
<Nav activeKey="/home">
    <Nav.Item>
        <Nav.Link href="/home">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>

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

<Nav defaultActiveKey="/home" 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>

Available styles

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.

Active
Link
Link
Disabled
<Nav className="justify-content-center" activeKey="#">
    <Nav.Item>
    <Nav.Link href="/home">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>
Active
Link
Link
Disabled
<Nav className="justify-content-end" activeKey="/home">
    <Nav.Item>
      <Nav.Link href="/home">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>

Vertical alignment

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

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

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

Pills

An alternative visual variant.

Active
Option 2
Disabled
<Nav variant="pills" defaultActiveKey="#">
    <Nav.Item>
        <Nav.Link href="#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="link-1">Option 2</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.

Active
Loooonger NavLink
Link
Disabled
<Nav fill variant="tabs" defaultActiveKey="#">
    <Nav.Item>
        <Nav.Link href="#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="link-1">Loooonger NavLink</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.

Active
Loooonger NavLink
Link
Disabled
<Nav justify variant="tabs" defaultActiveKey="#">
    <Nav.Item>
        <Nav.Link href="#">Active</Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="link-1">Loooonger NavLink</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>

Using dropdowns

You can mix and match the Dropdown components with the NavLink and NavItem components to create a Dropdown that plays well in a Nav component

NavLink 1 content
NavLink 2 content
NavLink 3 content
<Nav variant="pills" activeKey="1" onSelect={handleSelect}>
    <Nav.Item>
        <Nav.Link eventKey="1" href="#/home">
        NavLink 1 content
        </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="2" title="Item">
        NavLink 2 content
        </Nav.Link>
    </Nav.Item>
    <Nav.Item>
        <Nav.Link eventKey="3" disabled>
        NavLink 3 content
        </Nav.Link>
    </Nav.Item>
    <NavDropdown title="Dropdown" id="nav-dropdown">
        <NavDropdown.Item eventKey="4.1">Action</NavDropdown.Item>
        <NavDropdown.Item eventKey="4.2">Another action</NavDropdown.Item>
        <NavDropdown.Item eventKey="4.3">Something else here</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item eventKey="4.4">Separated link</NavDropdown.Item>
    </NavDropdown>
</Nav>