Navigation

These are the different types of navigation components.

Tab Navigation

Navigation for switching views. Results in a collection of left aligned, horizontal tabs. The example below shows a selected, regular and menu tab; the later causes display of the Tab Navigation Menu Dropdown.

<!-- Empty comments used to remove line breaks. -->
<div class="daptiv-header">
    <nav class="daptiv-nav ">
        <a class="tab" href="#" onclick="return false;">Home</a><!--
        --><a class="selected tab" href="#" onclick="return false;">Selected</a><!--
        --><a class="tab" href="#" onclick="return false;">About</a><a class="tab" href="#" onclick="return false;">Contact</a>
    </nav>
</div>


Tab Navigation Menu Dropdown

Item 1 Item 2 Selected Item 3 Disabled Item 4 Label Item 5 
<div class="daptiv-dropdown">
    <a class="item" href="#" onclick="return false;">Item 1</a>
    <a class="item" href="#" onclick="return false;">Item 2</a>
    <a class="selected item" href="#" onclick="return false;">Selected Item 3</a>
    <a class="disabled item" href="#" onclick="return false;">Disabled Item 4</a>
    <span class="label" tabindex="-1">Label Item 5</span>
</div>


Alternate Tab-Navigation Menu Dropdown

Item 1 Item 2 Selected Item 3 Disabled Item 4 
<div class="daptiv-dropdown">
    <a class="alternate item" href="#" onclick="return false;">Item 1</a>
    <a class="alternate item" href="#" onclick="return false;">Item 2</a>
    <a class="alternate selected item" href="#" onclick="return false;">Selected Item 3</a>
    <a class="alternate disabled item" href="#" onclick="return false;">Disabled Item 4</a>
</div>


Tab Sub-Navigation

<nav class="daptiv-subnav">
    <a class="tab" href="#" onclick="return false;">Home</a>
    <a class="selected tab" href="#" onclick="return false;">Selected</a>
    <a class="tab" href="#" onclick="return false;">About</a>
    <a class="tab" href="#" onclick="return false;">Contact</a>
    <a class="disabled tab" href="#" onclick="return false;" tabIndex="-1">Disabled</a>
</nav>