Navigation

Navigation menus make it easy to explore and switch between different content and views.

Base Nav

The base nav component from Bootstrap acts as a foundation for building all types of other navigation components.

Active
Link
Link
Disabled

<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

ul.nav
    li.nav-item
        a.nav-link.active(aria-current='page' href='#!') Active
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link.disabled(href='#!' tabindex='-1' aria-disabled='true') Disabled

The .nav component is built with flexbox. Bootstrap's flex utilities can be used to change the positioning of the component. For example, the nav component can be centered, shown below.

Active
Link
Link
Disabled

<ul class="nav justify-content-center">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

ul.nav.justify-content-center
    li.nav-item
        a.nav-link.active(aria-current='page' href='#!') Active
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link.disabled(href='#!' tabindex='-1' aria-disabled='true') Disabled

The component can be aligned to the right as well.

Active
Link
Link
Disabled

<ul class="nav justify-content-end">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

ul.nav.justify-content-end
    li.nav-item
        a.nav-link.active(aria-current='page' href='#!') Active
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link.disabled(href='#!' tabindex='-1' aria-disabled='true') Disabled

Or alternatively, the component can be modified to show vertically.

Active
Link
Link
Disabled

<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

ul.nav.flex-column
    li.nav-item
        a.nav-link.active(aria-current='page' href='#!') Active
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link.disabled(href='#!' tabindex='-1' aria-disabled='true') Disabled

All of the above examples use an unordered list element and list items, but using the <ul> and <li> elements are not required in situations where the list context isn't necessary.

Active Link Link Disabled

<div class="nav">
    <a class="nav-link active" aria-current="page" href="#!">Active</a>
    <a class="nav-link" href="#!">Link</a><a class="nav-link" href="#!">Link</a>
    <a class="nav-link disabled" href="#!" tabindex="-1" aria-disabled="true">Disabled</a>
</div>

.nav
    a.nav-link.active(aria-current='page' href='#!') Active
    a.nav-link(href='#!') Link
    a.nav-link(href='#!') Link
    a.nav-link.disabled(href='#!' tabindex='-1' aria-disabled='true') Disabled

Tabs

The tabs styling for the nav component is one variation of presenting a simple navigation. Simply add the .nav-tabs class to the nav component to use this option. The nav tabs retain most of their Bootstrap default styling, except the ripple effect has been added.

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

ul.nav.nav-tabs
    li.nav-item
        a.nav-link.active(aria-current='page' href='#!') Active
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link.disabled(href='#!' tabindex='-1' aria-disabled='true') Disabled

Pills

The pills styling for the nav component is another variation for structuring navigation. Simply add the .nav-pills class to the nav component to use this option. This option also retains much of it's Bootstrap default styling, wtih the addition of the ripple effect.

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

ul.nav.nav-pills
    li.nav-item
        a.nav-link.active(aria-current='page' href='#!') Active
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link.disabled(href='#!' tabindex='-1' aria-disabled='true') Disabled

Flex utilities can be used with pills to make the menu fill the full available width of the components parent using the .nav-fill class.

<ul class="nav nav-pills nav-fill">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#!">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#!" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
</ul>

ul.nav.nav-pills.nav-fill
    li.nav-item
        a.nav-link.active(aria-current='page' href='#!') Active
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link(href='#!') Link
    li.nav-item
        a.nav-link.disabled(href='#!' tabindex='-1' aria-disabled='true') Disabled

To expand on the above examples and to see more options available with Bootstrap's nav component, visit Bootstrap's nav and tabs documentation page.

Tab Bar

The tab bar web component has been brought into this theme from the Material Web Components library as another option for navigation menus. This web component is a reusable, custom element that has its functionality encapsulated away from the rest of the code, making it easy to implement and use quickly.

<mwc-tab-bar>
    <mwc-tab label='Tab one'></mwc-tab>
    <mwc-tab label='Tab two'></mwc-tab>
    <mwc-tab label='Tab three'></mwc-tab>
</mwc-tab-bar>

mwc-tab-bar
    mwc-tab(label='Tab one')
    mwc-tab(label='Tab two')
    mwc-tab(label='Tab three')

Material Icons are also supported within the Material tab bar web component.

<mwc-tab-bar>
    <mwc-tab label="Tab one" icon="accessibility"></mwc-tab>
    <mwc-tab label="Tab two" icon="exit_to_app"></mwc-tab>
    <mwc-tab label="Tab three" icon="camera"></mwc-tab>
</mwc-tab-bar>

mwc-tab-bar
    mwc-tab(label='Tab one', icon='accessibility')
    mwc-tab(label='Tab two', icon='exit_to_app')
    mwc-tab(label='Tab three', icon='camera')

Additional styling and configuration options are available when using this component like sizing, icons, images, preselection, and others. Visit the Material Web Components Catalog to explore more options for the tab bar web component.

JavaScript Behavior

Bootstrap includes JavaScript behavior that gives the nav component extended functionality to include tabbable panes of local content. The examples below are enabled using data attributes within the HTML, but JavaScript behavior is also supported.

Home Tab Content

Profile Tab Content

Contact Tab Content

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
    </li>
</ul>
<div class="tab-content border border-top-0 p-3" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home Tab Content</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile Tab Content</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact Tab Content</div>
</div>

ul#myTab.nav.nav-tabs(role='tablist')
    li.nav-item(role='presentation')
        button#home-tab.nav-link.active(data-bs-toggle='tab', data-bs-target='#home', type='button', role='tab', aria-controls='home', aria-selected='true') Home
    li.nav-item(role='presentation')
        button#profile-tab.nav-link(data-bs-toggle='tab', data-bs-target='#profile', type='button', role='tab', aria-controls='profile', aria-selected='false') Profile
    li.nav-item(role='presentation')
        button#contact-tab.nav-link(data-bs-toggle='tab', data-bs-target='#contact', type='button', role='tab', aria-controls='contact', aria-selected='false') Contact
#myTabContent.tab-content.border.border-top-0.p-3
    #home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='home-tab') Home Tab Content
    #profile.tab-pane.fade(role='tabpanel', aria-labelledby='profile-tab') Profile Tab Content
    #contact.tab-pane.fade(role='tabpanel', aria-labelledby='contact-tab') Contact Tab Content

Nav pills are also supported in a similar fashion.

Home Tab Content

Profile Tab Content

Contact Tab Content

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
    </li>
</ul>
<div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Home Tab Content</div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Profile Tab Content</div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Contact Tab Content</div>
</div>

ul#pills-tab.nav.nav-pills.mb-3(role='tablist')
    li.nav-item(role='presentation')
        button#pills-home-tab.nav-link.active(data-bs-toggle='pill', data-bs-target='#pills-home', type='button', role='tab', aria-controls='pills-home', aria-selected='true') Home
    li.nav-item(role='presentation')
        button#pills-profile-tab.nav-link(data-bs-toggle='pill', data-bs-target='#pills-profile', type='button', role='tab', aria-controls='pills-profile', aria-selected='false') Profile
    li.nav-item(role='presentation')
        button#pills-contact-tab.nav-link(data-bs-toggle='pill', data-bs-target='#pills-contact', type='button', role='tab', aria-controls='pills-contact', aria-selected='false') Contact
#pills-tabContent.tab-content
    #pills-home.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='pills-home-tab') Home Tab Content
    #pills-profile.tab-pane.fade(role='tabpanel', aria-labelledby='pills-profile-tab') Profile Tab Content
    #pills-contact.tab-pane.fade(role='tabpanel', aria-labelledby='pills-contact-tab') Contact Tab Content

The Material tab bar web component can also be used alongside Bootstrap's JavaScript plugin.

Home Tab Content

Profile Tab Content

Contact Tab Content

<!-- Tab bar navigation -->
<mwc-tab-bar class="nav nav-tabs" role='tablist">
    <mwc-tab id="home-tab" label="Home" data-bs-toggle='tab"'data-bs-target="#home" role='tab"'aria-controls="home" aria-selected="true"></mwc-tab>
    <mwc-tab id="profile-tab" label="Profile" data-bs-toggle='tab"'data-bs-target="#profile" role='tab"'aria-controls="profile" aria-selected="false"></mwc-tab>
    <mwc-tab id="contact-tab" label="Contact" data-bs-toggle='tab"'data-bs-target="#contact" role='tab"'aria-controls="contact" aria-selected="false"></mwc-tab>
</mwc-tab-bar>

<!-- Tab content -->
<div class='tab-content'border border-top-0 p-3" id="myTabContent">
    <div class='tab-pane'fade show active" id="home" role='tabpanel"'aria-labelledby="home-tab">Home Tab Content</div>
    <div class='tab-pane'fade" id="profile" role='tabpanel"'aria-labelledby="profile-tab">Profile Tab Content</div>
    <div class='tab-pane'fade" id="contact" role='tabpanel"'aria-labelledby="contact-tab">Contact Tab Content</div>
</div>

//- Tab bar navigation
mwc-tab-bar.nav.nav-tabs(role='tablist')
    mwc-tab#home-tab(
        label='Home',
        data-bs-toggle='tab',
        data-bs-target='#home',
        role='tab',
        aria-controls='home',
        aria-selected='true'
        )
    mwc-tab#profile-tab(
        label='Profile',
        data-bs-toggle='tab',
        data-bs-target='#profile',
        role='tab',
        aria-controls='profile',
        aria-selected='false'
    )
    mwc-tab#contact-tab(
        label='Contact',
        data-bs-toggle='tab',
        data-bs-target='#contact',
        role='tab',
        aria-controls='contact',
        aria-selected='false'
    )

//- Tab content
.tab-content.border.border-top-0.p-3#myTabContent
    .tab-pane.fade.show.active#home(role='tabpanel', aria-labelledby='home-tab')
        | Home Tab Content
    .tab-pane.fade#profile(role='tabpanel', aria-labelledby='profile-tab')
        | Profile Tab Content
    .tab-pane.fade#contact(role='tabpanel', aria-labelledby='contact-tab')
        | Contact Tab Content

Base Nav

Tabs

Pills

Tab Bar

JavaScript Behavior

Related Links

Change the theme type!

Try a pre-built swatch!

Or choose your own colors...

Need ideas? Randomize!

Finished? Export your color palette file with install instructions!