Nav

Minimally styled navigation with .nav.

Use .nav-heading on a list element with a nested <span></span> or <a></a> to style the heading.

<ul class="nav">
    <li class="nav-heading"><span>Basic Information</span></li>
    <li><a href="#">Details</a></li>
    <li><a href="#">Catagorization</a></li>
    <li><a href="#">Documents and Media</a></li>
    <li><a href="#">Site Template</a></li>
</ul>

Nested Nav

Nested navigation, also collapsible (requires Bootstrap Collapse Plugin). Add class nav-nested to the outermost nav to indent each nested nav.

<ul class="nav nav-nested">
    <li>
        <a class="collapsed collapse-icon" data-toggle="collapse" href="#navCollapse01">
            Basic Information
            <span class="collapse-icon-closed icon-caret-right"></span>
            <span class="collapse-icon-open icon-caret-down"></span>
        </a>
        <div class="collapse" id="navCollapse01">
            <ul class="nav">
                <li><a href="#1">Details</a></li>
                <li><a href="#1">Catagorization</a></li>
                <li>
                    <a class="collapsed collapse-icon" data-toggle="collapse" href="#navCollapse02">
                        Documents and Media
                        <span class="collapse-icon-closed icon-caret-right"></span>
                        <span class="collapse-icon-open icon-caret-down"></span>
                    </a>
                    <div class="collapse" id="navCollapse02">
                        <ul class="nav">
                            <li><a href="#1">Details</a></li>
                            <li><a href="#1">Catagorization</a></li>
                            <li><a href="#1">Documents and Media</a></li>
                            <li><a href="#1">Site Template</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#1">Site Template</a></li>
            </ul>
        </div>
    </li>
    <li>
        <a class="collapsed collapse-icon" data-toggle="collapse" href="#navCollapse03">
            SEO
            <span class="collapse-icon-closed icon-caret-right"></span>
            <span class="collapse-icon-open icon-caret-down"></span>
        </a>
        <div class="collapse" id="navCollapse03">
            <ul class="nav">
                <li><a href="#1">Sitemap</a></li>
                <li><a href="#1">Robots</a></li>
            </ul>
        </div>
    </li>
    <li>
        <a class="collapsed collapse-icon" data-toggle="collapse" href="#navCollapse04">
            Advanced
        </a>
        <div class="collapse" id="navCollapse04">
            <ul class="nav">
                <li><a href="#1">Default User Associations</a></li>
                <li><a href="#1">Staging</a></li>
                <li><a href="#1">Analytics</a></li>
                <li><a href="#1">Maps</a></li>
            </ul>
        </div>
    </li>
</ul>

Nav Nested (Margins)

nav-nested-margins uses margins instead of padding to indent.

Nav Equal Height

List style navigation that has equal heights, use nav-equal-height-heading with Bootstrap Collapse Plugin to create equal height navs with collapsible content.

Nav Pills

Add .nav-pills to .nav to add background colors and border styles.

<ul class="nav nav-pills">
    <li class="active"><a href="#1">Fields</a></li>
    <li><a href="#1">Settings</a></li>
    <li class="disabled"><a href="#">Documents</a></li>
    <li class="dropdown">
        ...
    </li>
</ul>

Nav Pills Justified

Add .nav-justified to make nav-pills equal width relative to its parent container.

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

Nav Pills Stacked

Add .nav-stacked to stack nav-pills vertically.

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

Nested Nav Pills Stacked

Add .nav-nested .nav-stacked to style background colors and borders for stacked nav-pills.

Basic Information

<ul class="nav nav-nested nav-pills nav-stacked">
    <li>
        <a aria-expanded="true" class="collapse-icon" data-toggle="collapse" href="#navPillsCollapse01">
            Basic Information
        </a>
        <div aria-expanded="true" class="collapse in" id="navPillsCollapse01">
            <ul class="nav">
                <li><a href="#">Details</a></li>
                <li><a href="#">Catagorization</a></li>
                <li>
                    <a aria-expanded="false" class="collapsed collapse-icon" data-toggle="collapse" href="#navPillsCollapse02">
                        Documents and Media
                    </a>
                    <div aria-expanded="false" class="collapse" id="navPillsCollapse02">
                        <ul class="nav">
                            <li><a href="#">Details</a></li>
                            <li><a href="#">Catagorization</a></li>
                            <li><a href="#">Documents and Media</a></li>
                            <li><a href="#">Site Template</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Site Template</a></li>
            </ul>
        </div>
    </li>
</ul>

Nav Helper Classes

Use .nav-rounded, .nav-circle, or .nav-square on the nav to quickly shape the borders.

<ul class="nav nav-rounded nav-pills nav-stacked">...</ul>
<ul class="nav nav-circle nav-pills nav-stacked">...</ul>
<ul class="nav nav-rounded nav-pills nav-stacked">...</ul>