Basic principles

Like other Ink components, our navigation elements have an easy and intuitive implementation and their structure is a combination of simple and semantic markup with natural language class naming.

We have five types of navigation elements that are:

• menu A simple menu bar for basic navigation, with horizontal and vertical layouts and sub menus.
• breadcrumbs Breadcrumb type navigation, for when your interfaces require contextual navigation.
• pagination Pagination type navigation, for when you need to split your content intro smaller chunks.
• pills Pill type navigation. Pills are essentially the same as menu navigation but look like single "buttons".
• dropdowns Dropdown menu type navigation. Very similar to what you'd find in your operative system.

• : These classes must be used to make any kind of navigation work.
• : These classes are aware of their context and behave differently according to the type of navigation in which they are used.

All of the navigation elements have the same basic structure:

Structure

<nav class="ink-navigation">
    <ul>
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
        ...
    </ul>
</nav>

Menus

Horizontal

• Css classes:
• ink-navigation
• menu
• horizontal
• heading
• disabled
• active
• submenu
• flyout
• left
• right
• white
• grey
• black
• blue
• green
• orange
• red

Horizontal menu bars are created by adding the menu and horizontal CSS classes to the ul element within our base structure. By default no styling is added to make customization easier, but you can use one of our themes by adding white, grey, black, blue, green, orange or red CSS class to the ul element.

Menu items are created by adding list items containing links.

Code

<nav class="ink-navigation">
    <ul class="menu horizontal black">
        <li><a href="#">Home</a></li>
        <li><a href="#">Post archive</a></li>
    </ul>
</nav>

Demo

You can add extra emphasis to a link by adding the heading CSS class to the corresponding list item.

Code

<nav class="ink-navigation">
    <ul class="menu horizontal black">
        <li class="heading"><a href="#">Home</a></li>
        <li><a href="#">Post archive</a></li>
    </ul>
</nav>

Demo

To add a submenu, create an <ul>with the submenu class within the appropriate top level list item:

Code

<nav class="ink-navigation">
    <ul class="menu horizontal black">
        <li class="heading"><a href="#">Home</a></li>
        <li>
            <a href="#">Post archive</a>
            <ul class="submenu">
                <li><a href="#">January</a></li>
                <li><a href="#">February</a></li>
                <li><a href="#">March</a></li>
                <li><a href="#">...</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

If you need to create more levels, Ink has flyout menus that can be created within the submenu elements. To choose to which side they open just add the left or right class to the flyout <ul> element.

Code

<nav class="ink-navigation">
    <ul class="menu horizontal black">
        <li class="heading"><a href="#">Home</a></li>
        <li>
            <a href="#">Post archive</a>
            <ul class="submenu">
                <li><a href="#">January</a></li>
                <li>
                    <a href="#">February</a>
                    <ul class="submenu flyout right">
                        <li><a href="#">1st week</a></li>
                        <li><a href="#">2nd week</a></li>
                        <li><a href="#">3rd week</a></li>
                        <li><a href="#">4th week</a></li>
                    </ul>
                </li>
                <li><a href="#">March</a></li>
                <li><a href="#">...</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

You can also set the current state of a link by adding active or disabled classes to the corresponding list item:

Code

<nav class="ink-navigation">
    <ul class="menu horizontal black">
        <li class="heading active"><a href="#">Home</a></li>
        <li>
            <a href="#">Post archive</a>
            <ul class="submenu">
                <li><a href="#">January</a></li>
                <li><a href="#">February</a></li>
                <li><a href="#">March</a></li>
                <li><a href="#">...</a></li>
            </ul>
        </li>
        <li class="disabled"><a href="#">About</a></li>
    </ul>
</nav>

Demo

Vertical

• Css classes:
• ink-navigation
• menu
• vertical
• heading
• disabled
• active
• submenu
• flyout
• left
• right
• white
• grey
• black
• blue
• green
• orange
• red

Vertical menus are created by using the vertical CSS class instead of horizontal.

Code

  <nav class="ink-navigation">
    <ul class="menu vertical black">
        <li class="heading active"><a href="#">Home</a></li>
        <li>
            <a href="#">Post archive</a>
            <ul class="submenu">
                <li><a href="#">January</a></li>
                <li><a href="#">February</a></li>
                <li><a href="#">March</a></li>
                <li><a href="#">...</a></li>
            </ul>
        </li>
        <li class="disabled"><a href="#">About</a></li>
    </ul>
</nav>

Code

  <nav class="ink-navigation">
    <ul class="menu vertical black">
        <li class="heading active"><a href="#">Home</a></li>
        <li>
            <a href="#">Post archive</a>
            <ul class="submenu flyout left">
                <li><a href="#">January</a></li>
                <li><a href="#">February</a></li>
                <li><a href="#">March</a></li>
                <li><a href="#">...</a></li>
            </ul>
        </li>
        <li class="disabled"><a href="#">About</a></li>
    </ul>
</nav>

Breadcrumbs

• Css classes:
• ink-navigation
• breadcrumbs
• active
• white
• grey
• black
• blue
• green
• orange
• red

Breadcrumb navigation is created by using the breadcrumbs CSS class in the <ul> element:

<nav class="ink-navigation">
    <ul class="breadcrumbs black">
        <li><a href="#">Start</a></li>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 2</a></li>
        <li class="active"><a href="#">Current item</a></li>
    </ul>
</nav>

Example

Link separators are added automatically and are made with CSS and can be overridden like this:

Code

.ink-navigation .breadcrumbs li:after {
  content: '/'; /* this is the separator character */
}

Pagination

• Css classes:
• ink-navigation
• pagination
• chevron
• dotted
• active
• disabled
• previous
• next
• white
• grey
• black
• blue
• green
• orange
• red

Pagination type navigation is created by using the pagination CSS class in the <ul> element, and by default has a button bar presentation:

Code

<nav class="ink-navigation">
    <ul class="pagination black">
        <li class="disabled"><a href="#">Previous</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</nav>

Demo

Dotted

To get a dotted style of pagination, add the dotted CSS class to the <ul> element:

Code

<nav class="ink-navigation">
    <ul class="pagination dotted">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
    </ul>
</nav>

Demo

Chevron

To get a chevron style of pagination, add the chevron CSS class to the <ul> element:

Code

<nav class="ink-navigation">
    <ul class="pagination chevron">
        <li class="previous"><a href="#"><span>Previous</span></a></li>
        <li class="next"><a href="#"><span>Next</span></a></li>
    </ul>
</nav>

Demo

Pills

• Css classes:
• ink-navigation
• pills
• active
• disabled
• white
• grey
• black
• blue
• green
• orange
• red

Pills type navigation is created by using the pills CSS class in the <ul> element, and by default has a button bar presentation:

Code

<nav class="ink-navigation">
    <ul class="pagination pills black">
        <li class="disabled"><a href="#">Pill disabled</a></li>
        <li class="active"><a href="#">Pill 1</a></li>
        <li><a href="#">Pill 2</a></li>
        <li><a href="#">Pill 3</a></li>
        <li><a href="#">Pill 4</a></li>
    </ul>
</nav>

Demo

Dropdowns

• Css classes:
• ink-navigation
• dropdown
• active
• disabled
• submenu
• heading
• separator-above
• separator-below
• white
• grey
• black
• blue
• green
• orange
• red

Dropdowns use the same base structure as the other navigation types, but have a few extra classes to handle its higher complexity. Adding the dropdown CSS class to the top <ul> element will set the basic styling and behaviour of the dropdown menu.

<div class="ink-navigation">
    <ul class="dropdown">
        <li><a href="#">Back</a></li>
        <li><a href="#">Forward</a></li>
        <li><a href="#">Copy</a></li>
        <li><a href="#">Cut</a></li>
        <li><a href="#">Paste</a></li>
    </ul>
</div>

If you need to organize your menu items into groups, use either the separator-above or separator-below, to create a separating line:

<div class="ink-navigation">
    <ul class="dropdown">
        <li><a href="#">Back</a></li>
        <li><a href="#">Forward</a></li>
        <li class="separator-above"><a href="#">Copy</a></li>
        <li><a href="#">Cut</a></li>
        <li><a href="#">Paste</a></li>
    </ul>
</div>

Menu section headings are also available:

<div class="ink-navigation">
    <ul class="dropdown">
        <li class="heading">Browse</li>
        <li><a href="#">Back</a></li>
        <li><a href="#">Forward</a></li>
        <li class="heading separator-above">Clipboard</li>
        <li><a href="#">Copy</a></li>
        <li><a href="#">Cut</a></li>
        <li><a href="#">Paste</a></li>
    </ul>
</div>

Submenus are created by adding the submenu class to one of your menu items and creating another dropdown within it:

<div class="ink-navigation">
    <ul class="dropdown">
        <li class="heading">Browse</li>
        <li><a href="#">Back</a></li>
        <li><a href="#">Forward</a></li>
        <li class="heading separator-above">Clipboard</li>
        <li><a href="#">Copy</a></li>
        <li><a href="#">Cut</a></li>
        <li><a href="#">Paste</a></li>
        <li class="heading">Screenshot</li>
        <li class="submenu separator-above">
            <a href="#">Options</a>
            <ul class="dropdown">
                <li><a href="#">Whole screen</a></li>
                <li><a href="#">Portion of screen</a></li>
            </ul>
        </li>
    </ul>
</div>

Submenus can be nested to create multiple sub level complex menu structures.

As in other components you can set the state of a menu item with the active or disabled classes, and use our navigation themes:

<div class="ink-navigation">
    <ul class="dropdown red">
        <li class="heading">Browse</li>
        <li class="disabled"><a href="#">Back</a></li>
        <li><a href="#">Forward</a></li>
        <li class="heading separator-above">Clipboard</li>
        <li><a href="#">Copy</a></li>
        <li class="active"><a href="#">Cut</a></li>
        <li><a href="#">Paste</a></li>
        <li class="heading">Screenshot</li>
        <li class="submenu separator-above">
            <a href="#">Options</a>
            <ul class="dropdown">
                <li><a href="#">Whole screen</a></li>
                <li><a href="#">Portion of screen</a></li>
            </ul>
        </li>
    </ul>
</div>