3. Navigation

3.1 — Back Link

Link back to previous page. Typically used together with <h2> headings.

Heads Up!

It may be a little bit confusing to distinguish between the Back Link and More Link components. They both appear on the right side of the heading on big screens, but they are designed in a different way for mobiles.

Example

Back

Upon He Was the Divided

<a href="#" class="back">Back</a>
<h2>Upon He Was the Divided</h2>

3.2 — Call to Action

A simple helper for responsive call to action. Made for use in header.

Example

Pages

New Page 
<div class="row">
    <div class="col-sm-8">
        <h1 class="section-header-title">Pages</h1>
    </div>
    <div class="col-sm-4">
        <a href="#" class="btn btn-primary btn-raised cta">
            <span class="glyphicon glyphicon-plus-sign offset-right" aria-hidden="true"></span>
            New Page
        </a>
    </div>
</div><!-- .row -->

3.2.1 — CTA Dropdown

Call to action combined with dropdown.

Example

Pages

<div class="row">
    <div class="col-sm-8">
        <h1 class="section-header-title">Pages</h1>
    </div>
    <div class="col-sm-4">
        <div class="dropdown cta">
            <button class="btn btn-primary btn-raised" type="button" id="ctaDropdownLabel" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Actions
                <span class="glyphicon glyphicon-menu-down offset-left" aria-hidden="true"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="ctaDropdownLabel">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
    </div>
</div><!-- .row -->

3.2.2 — CTA for Content Headings

For CTA buttons alongside headings in content area simply apply pull-right on a regular button, cta is not needed.

Example

New Page

Pages

<a href="#" class="btn btn-primary btn-raised pull-right">
    <span class="glyphicon glyphicon-plus-sign offset-right" aria-hidden="true"></span>
    New Page
</a>
<h2>Pages</h2>

3.3 — Letter Navigation

Letter navigation is made for use with long listings.

Example

A

A very long listing…

B

Another very long listing…

C

Yet another very long listing…

<div class="row">
    <div class="col-sm-2 col-sm-push-10">
        <ul class="nav nav-letters">
            <li><a href="#letter-a">A</a></li>
            <li><a href="#letter-b">B</a></li>
            <li><a href="#letter-c">C</a></li>
        </ul>
    </div>
    <div class="col-sm-10 col-sm-pull-2">
        <h3 id="letter-a">A</h3>
        <p>A very long listing…</p>
        <h3 id="letter-b">B</h3>
        <p>Another very long listing…</p>
        <h3 id="letter-c">C</h3>
        <p>Yet another very long listing…</p>
    </div>
</div><!-- .row -->

3.4 — List Group

Extends Bootstrap list group with nesting and quick add link. Works best as sidebar navigation.

Example

Pages

 Home Products About

Articles

Settings

 
<div class="list-group list-group-nested">
    <a href="#" class="list-group-item active"><h4 class="list-group-item-heading">Pages</h4></a>
    <a href="#" class="list-group-add" title="Create new item"><span class="glyphicon glyphicon-plus-sign offset-right" aria-hidden="true"></span></a>
    <a href="#" class="list-group-item list-group-item-nested">Home</a>
    <a href="#" class="list-group-item list-group-item-nested">Products</a>
    <a href="#" class="list-group-item list-group-item-nested">About</a>
    <a href="#" class="list-group-item"><h4 class="list-group-item-heading">Articles</h4></a>
    <a href="#" class="list-group-add" title="Create new item"><span class="glyphicon glyphicon-plus-sign offset-right" aria-hidden="true"></span></a>
    <a href="#" class="list-group-item"><h4 class="list-group-item-heading">Settings</h4></a>
</div>

3.5 — More Link

Responsive link to a complete listing. Works best with H2.

By default, more link is aligned to baseline with the element that has space of one line between itself and the following content. The value corresponds to default bottom margin of H2 (which is one line) and can be adjusted via LESS variable @more-link-top-offset.

Heads Up!

It may be a little bit confusing to distinguish between the Back Link and More Link components. They both appear on the right side of the heading on big screens, but they are designed in a different way for mobiles.

Example

News

This is the news.

All News 
<h2>News</h2>
<div class="has-more">
    <p>This is the news.</p>
    <div class="more">
        <a href="#">All News</a>
    </div>
</div>

3.6 — Navbar

Implements default Bootstrap navbar component with minor enhancements (eg. .navbar-primary modification or .navbar-icon for icon items).

Fixed navbar

Add `.has-navbar-fixed-top` class to `` when using `.navbar-fixed-top` modification to ensure the content does not hide below navbar.

Example

<!-- Main navigation -->
<nav class="navbar navbar-static-top navbar-primary">
    <div class="container">
        <!-- Brand and menu toggle -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#kssMenu">
                <span class="sr-only">Menu</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand offset-right-large" title="Bootstrap UI">Bootstrap UI</a>
        </div>
        <!-- Collapsible menu -->
        <div class="collapse navbar-collapse" id="kssMenu">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Dashboard</a></li>
                <li><a href="#">Pages</a></li>
                <li><a href="#">Media</a></li>
                <li><a href="#">Users</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="navbar-icon">
                    <a href="#" target="_blank" title="Open site in a new tab">
                        <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                        <span class="visible-xs">Home</span>
                    </a>
                </li>
                <li class="navbar-icon">
                    <a href="#" title="Settings">
                        <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                        <span class="visible-xs">Settings</span>
                    </a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="My profile">
                        <span class="glyphicon glyphicon-user offset-right" aria-hidden="true"></span>
                        <span class="visible-xs-inline offset-right">My Profile</span>
                        <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">James Brown</li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">
                                <span class="glyphicon glyphicon-user offset-right icon-shift-down" aria-hidden="true"></span>
                                My Account
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="glyphicon glyphicon-off offset-right icon-shift-down" aria-hidden="true"></span>
                                Sign out
                            </a>
                        </li>
                    </ul>
                </li><!-- .dropdown -->
             </ul><!-- .nav -->
        </div><!-- .collapsible -->
    </div><!-- .container -->
</nav>

3.7 — Tabs

3.7.1 — Default Tabs

Bootstrap tabs with cursor change to pointer on hover.

Example

<ul role="tablist" class="nav nav-tabs">
    <li class="active"><a href="#">Bring one I make</a></li>
    <li><a href="#">Moved lights</a></li>
    <li><a href="#">Living created</a></li>
</ul>

3.7.2 — Header Tabs

Tabs extended for use within header section.

Example

<ul role="tablist" class="nav nav-tabs nav-tabs-header">
    <li class="active"><a href="#"><span class="glyphicon glyphicon-envelope offset-right" aria-hidden="true"></span> Emailing</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-cog offset-right" aria-hidden="true"></span> Settings</a></li>
</ul>

3.7.3 — Justified Tabs

Tabs that are justified also on smallest screens.

Example

<ul role="tablist" class="nav nav-tabs nav-justified nav-tabs-justified-xs">
    <li class="active">
        <a href="#">
            <span class="glyphicon glyphicon-certificate" aria-hidden="true"></span>
            <span class="hidden-xs offset-left">New</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="glyphicon glyphicon-ok-sign offset-right" aria-hidden="true"></span>
            <span class="hidden-xs offset-left">Done</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="glyphicon glyphicon-remove-sign offset-right" aria-hidden="true"></span>
            <span class="hidden-xs offset-left">Cancelled</span>
        </a>
    </li>
</ul>

3.7.4 — Transparent Tabs

Tabs modification for use on primary background.

Example

<div class="section-content section-primary">
    <ul role="tablist" class="nav nav-tabs nav-tabs-transparent">
        <li class="active"><a href="#"><span class="glyphicon glyphicon-envelope offset-right" aria-hidden="true"></span> Emailing</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-cog offset-right" aria-hidden="true"></span> Settings</a></li>
    </ul>
</div>