v1.0.0 (latest)v0.5.3v0.5.2v0.5.1v0.4v0.3v0.2v0.1
Download

Navs

Examples
Using lists
Using links
<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" 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="#">Disabled</a>
    </li>
</ul>

<nav class="nav">
    <a class="nav-link active" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link disabled" href="#">Disabled</a>
</nav>
Alignment
Align center
Align right
<ul class="nav justify-content-center">
    <li class="nav-item">
        <a class="nav-link active" 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="#">Disabled</a>
    </li>
</ul>

<ul class="nav justify-content-end">
    ...
</ul>
Vertical

This works with both <ul> and <a>.

<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link active" 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="#">Disabled</a>
    </li>
</ul>
Tabs and pills
Tabs
Pills
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" 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="#">Disabled</a>
    </li>
</ul>

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" 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="#">Disabled</a>
    </li>
</ul>
Fill and justify
Fill using lists

When using links, don't forget to include the .nav-item class.

Fill using links
Justify using lists

When using links, don't forget to include the .nav-item class.

Justify using links
<ul class="nav nav-pills nav-fill">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Much longer nav 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="#">Disabled</a>
    </li>
</ul>

<nav class="nav nav-pills nav-fill">
    <a class="nav-item nav-link active" href="#">Active</a>
    <a class="nav-item nav-link" href="#">Much longer nav link</a>
    <a class="nav-item nav-link" href="#">Link</a>
    <a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

<ul class="nav nav-pills nav-justified">
    ...
</ul>

<nav class="nav nav-pills nav-justified">
    <a class="nav-item nav-link active" href="#">Active</a>
    ...
</nav>
Dropdowns
Tabs
Pills
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
    </li>
</ul>
JavaScript
Using tabs
HOME
PROFILE
CONTACT
Using pills
HOME
PROFILE
CONTACT
Using vertical pills
HOME
PROFILE
CONTACT
<ul class="nav nav-tabs" id="nav-tab">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#tabs-home">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tabs-profile">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#tabs-contact">Contact</a>
    </li>
</ul>
<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="tabs-home">HOME</div>
    <div class="tab-pane fade" id="tabs-profile">PROFILE</div>
    <div class="tab-pane fade" id="tabs-contact">CONTACT</div>
</div>

<ul class="nav nav-pills" id="nav-pills">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#pills-home">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pills-profile">Profile</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#pills-contact">Contact</a>
    </li>
</ul>
<div class="tab-content" id="nav-pillsContent">
    <div class="tab-pane fade show active" id="pills-home">HOME</div>
    <div class="tab-pane fade" id="pills-profile">PROFILE</div>
    <div class="tab-pane fade" id="pills-contact">CONTACT</div>
</div>

<div class="row">
    <div class="col-3">
        <ul class="nav nav-pills flex-column" id="v-nav-pills">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#v-pills-home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#v-pills-profile">Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#v-pills-contact">Contact</a>
            </li>
        </ul>
    </div>
    <div class="col-9">
        <div class="tab-content" id="v-nav-pillsContent">
            <div class="tab-pane fade show active" id="v-pills-home">HOME</div>
            <div class="tab-pane fade" id="v-pills-profile">PROFILE</div>
            <div class="tab-pane fade" id="v-pills-contact">CONTACT</div>
        </div>
    </div>
</div>