storyteller.io CSS Styleguide

Navigation

UI Blocks

10.1

Nav

A series of options for places to go. Can be used both for navigation between pages and within.

Example Markup
<ul class="ui-nav">
    <li class="ui-nav__item">
        <a class="ui-nav__link--current" href="#">Mango</a>
    </li>
    <li class="ui-nav__item">
        <a class="ui-nav__link" href="#">Papaya</a>
    </li>
    <li class="ui-nav__item">
        <a class="ui-nav__link" href="#">Guava</a>
    </li>
</ul>
Modifiers  
ui-nav__link--current

Where you are.

ui-nav__link:hover

Futuristic nav item.

10.2

Menu

A vertical series of links, old-school ‘lightbar’ style. Should only be used for navigation between pages.

Example Markup
<ul class="ui-menu">
    <li class="ui-menu__item $modifier">
        <a class="ui-menu__link" href="#">Mango</a>
    </li>
    <li class="ui-menu__item">
        <a class="ui-menu__link" href="#">Papaya</a>
    </li>
</ul>
Modifiers  
ui-menu__item:hover

Futuristic menu item.