Navigation - ZUI Documentation

Summary

The navigation pattern should be used to define a section on a page that acts as a collection of links.

There are no attributes defined for this pattern.

Example

Markup

<nav class="zui-navgroup zui-navgroup-horizontal">
    <div class="zui-navgroup-inner">
        <div class="zui-navgroup-primary">
            <ul class="zui-nav">
                <li><a href="http://example.com">Item</a></li>
                <li class="selected"><a href="http://example.com">Selected</a></li>
                <li><a href="http://example.com">Item <span class="zui-badge">123</span></a></li>
                <li><a href="http://example.com">Item</a></li>
            </ul>
        </div>

        <div class="zui-navgroup-secondary">
            <ul class="zui-nav">
                <li><a href="http://example.com">Item</a></li>
            </ul>
        </div>
    </div>
</nav>

<nav class="zui-navgroup zui-navgroup-vertical">
    <div class="zui-navgroup-inner">
        <div class="zui-nav-heading">
            <strong>Heading</strong>
        </div>
        <ul class="zui-nav">
            <li><a href="http://example.com">Item <span class="zui-badge">123</span></a></li>
            <li><a href="http://example.com">Item</a></li>
            <li class="selected"><a href="http://example.com">Selected Nav Item</a></li>
            <li><a href="http://example.com">Item</a></li>
            <li><a href="http://example.com">Item</a></li>
        </ul>
        <ul class="zui-nav">
            <li><a href="http://example.com">Item</a></li>
            <li><a href="http://example.com">Item</a></li>
        </ul>
        <ul class="zui-nav">
            <li><a href="http://example.com">Item</a></li>
            <li><a href="http://example.com">Item</a></li>
        </ul>
        <div class="zui-nav-heading">
            <strong>Heading</strong>
        </div>
        <ul class="zui-nav">
            <li><a href="http://example.com">Item</a></li>
            <li><a href="http://example.com">Item</a></li>
            <li><a href="http://example.com">Item</a></li>
            <li><a href="http://example.com">Item</a></li>
        </ul>
    </div>
</nav>

<ol class="zui-nav zui-nav-breadcrumbs">
    <li><a href="http://example.com">Homepage</a></li>
    <li><a href="http://example.com">Sub page</a></li>
    <li class="unavailable"><a href="http://example.com">Unavailable page <span class="zui-badge">0</span></a></li>
    <li class="selected">Easy</li>
</ol>