o-hierarchical-nav

Responsive hierarchical nav

active

Nav

A responsive multi-level menu for site navigation

Responsive-nav

A demo responsive layout where the navigation is hidden behind a single item at a narrow screen width

<h1 class="demo__title">Base theme</h1>

<nav class="o-hierarchical-nav demo--horizontal-theme" data-o-component="o-hierarchical-nav">
    <ul data-o-hierarchical-nav-level="1">
        <li data-priority="2" aria-selected="true"><a>Item 1</a></li>
        <li data-priority="3"><a>Item 2</a></li>
        <li data-priority="1" class="o-hierarchical-nav__parent"><a>Item 3 (parent) <i></i></a>
            <ul data-o-hierarchical-nav-level="2">
                <li><a>Item 3.1</a></li>
                <li><a>Item 3.2</a></li>
                <li><a>Item 3.3</a></li>
                <li><a>Item 3.4</a></li>
            </ul>
        </li>
        <li data-priority="2"><a>Item 4</a></li>
        <li data-priority="1" class="o-hierarchical-nav__parent"><a>Item 5 (parent) <i></i></a>
            <ul data-o-hierarchical-nav-level="2">
                <li><a>Item 5.1</a></li>
                <li class="o-hierarchical-nav__parent"><a>Parent Item 5.2 <i></i></a>
                    <ul data-o-hierarchical-nav-level="3">
                        <li><a>Item 5.2.1</a></li>
                        <li><a>Item 5.2.2</a></li>
                        <li><a>Item 5.2.3</a></li>
                        <li><a>Item 5.2.4</a></li>
                    </ul>
                </li>
                <li><a>Item 5.3</a></li>
                <li><a>Item 5.4</a></li>
            </ul>
        </li>
        <li data-more="" class="o-hierarchical-nav__parent" aria-hidden="true"><a><span class="o-hierarchical-nav__more--if-some">More</span><span class="o-hierarchical-nav__more--if-all">Menu</span> <i></i></a></li>
    </ul>
</nav>

Mega-dropdown

A mega dropdown menu for sites with a large tree-like navigation

<h1 class="demo__title">Horizontal megadropdown</h1>

<nav class="o-hierarchical-nav demo--horizontal-theme" data-o-component="o-hierarchical-nav">
    <ul data-o-hierarchical-nav-level="1">
        <li data-priority="2" aria-controls="megadropdown-p1"><a>Mega 1 p2 <i></i></a></li>
        <li data-priority="3" aria-controls="megadropdown-p2"><a>Mega 2 p3 <i></i></a></li>
        <li data-priority="1" aria-controls="megadropdown-p3"><a>Mega 3 p1 <i></i></a></li>
        <li data-priority="2" aria-controls="megadropdown-p4"><a>Mega 4 p2 <i></i></a></li>
        <li class="o-hierarchical-nav__parent"><a>Item 1 <i></i></a>
            <ul data-o-hierarchical-nav-level="2">
                <li><a>Item 1.1</a></li>
                <li><a>Item 1.2</a></li>
                <li><a>Item 1.3</a></li>
            </ul>
        </li>
        <li data-priority="1" aria-controls="megadropdown-p5"><a>Mega 5 p1 <i></i></a></li>
        <li data-priority="2" aria-controls="megadropdown-p6"><a>Mega 6 p2 <i></i></a></li>
        <li data-more="" aria-controls="megadropdown-pmore" aria-hidden="true"><a>More <i></i></a></li>
    </ul>
</nav>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-p1" aria-hidden="true">Mega-dropdown for Mega 1</div>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-p2" aria-hidden="true">Mega-dropdown for Mega 2</div>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-p3" aria-hidden="true">Mega-dropdown for Mega 3</div>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-p4" aria-hidden="true">Mega-dropdown for Mega 4</div>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-p5" aria-hidden="true">Mega-dropdown for Mega 5</div>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-p6" aria-hidden="true">Mega-dropdown for Mega 6</div>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-pmore" aria-hidden="true">Mega-dropdown for More</div>
Bower Dependencies
o-colors ^4.0.1
o-hoverable >=0.1.1 <4
o-viewport >=1.0.0 <4
o-dom >=0.4.0 <3
ftdomdelegate >=1.0.0 <3
o-squishy-list >=1.0.0 <3
o-layers >=0.2.0 <3
o-icons >=4.4.2 <6
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-hierarchical-nav@^5.0.4

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-hierarchical-nav"@"^5.0.4"

For more information see the Origami build process.