Demos: o-hierarchical-nav

o-hierarchical-nav is deprecated. This component should not be used for new projects. Only security-related bugs will be fixed for this component, though existing implementations will continue to work.

Nav

A responsive multi-level menu for site navigation

Demo
HTML

Open demo in a new tab

<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 aria-selected="true"><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li 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 class="o-hierarchical-nav__parent"><a>Item 3.2 (parent) <i></i></a>
                    <ul data-o-hierarchical-nav-level="3">
                        <li><a>Item 3.2.1</a></li>
                        <li><a>Item 3.2.2</a></li>
                        <li><a>Item 3.2.3</a></li>
                        <li><a>Item 3.2.4</a></li>
                    </ul>
                </li>
                <li><a>Item 3.3</a></li>
                <li class="o-hierarchical-nav__parent"><a>Item 3.4 (parent) <i></i></a>
                    <ul data-o-hierarchical-nav-level="3">
                        <li><a>Item 3.4.1</a></li>
                        <li><a>Item 3.4.2</a></li>
                        <li><a>Item 3.4.3</a></li>
                        <li><a>Item 3.4.4</a></li>
                    </ul>
                </li>
                <li><a>Item 3.5</a></li>
            </ul>
        </li>
        <li><a>Item 4</a></li>
        <li 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>Item 5.2 (parent) <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 class="o-hierarchical-nav__parent"><a>Item 5.4 (parent) <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.5</a></li>
            </ul>
        </li>
    </ul>
</nav>

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

<nav class="o-hierarchical-nav demo--vertical-theme" data-o-component="o-hierarchical-nav" data-o-hierarchical-nav-orientiation="vertical">
    <ul data-o-hierarchical-nav-level="1">
        <li aria-selected="true"><a>Item 1</a></li>
        <li><a>Item 2</a></li>
        <li 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 class="o-hierarchical-nav__parent"><a>Item 3.2 (parent) <i></i></a>
                    <ul data-o-hierarchical-nav-level="3">
                        <li><a>Item 3.2.1</a></li>
                        <li><a>Item 3.2.2</a></li>
                        <li><a>Item 3.2.3</a></li>
                        <li><a>Item 3.2.4</a></li>
                    </ul>
                </li>
                <li><a>Item 3.3</a></li>
                <li class="o-hierarchical-nav__parent"><a>Parent Item 3.4 <i></i></a>
                    <ul data-o-hierarchical-nav-level="3">
                        <li><a>Item 3.4.1</a></li>
                        <li><a>Item 3.4.2</a></li>
                        <li><a>Item 3.4.3</a></li>
                        <li><a>Item 3.4.4</a></li>
                    </ul>
                </li>
                <li><a>Item 3.5</a></li>
            </ul>
        </li>
        <li><a>Item 4</a></li>
        <li 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>Item 5.2 (parent) <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 class="o-hierarchical-nav__parent"><a>Parent Item 5.4 (parent) <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.5</a></li>
            </ul>
        </li>
    </ul>
</nav>

Responsive Nav

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

Demo
HTML

Open demo in a new tab

<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>

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

Demo
HTML

Open demo in a new tab

<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>

Support status deprecated

GitHub Repository

Install o-hierarchical-nav

If using the Build Service, add o-hierarchical-nav@^5.1.1 to your script and link tags.

If running a Manual Build, run bower install --save "o-hierarchical-nav@^5.1.1".

Help & Support

o-hierarchical-nav is maintained directly by the Origami team. If you have any questions about o-hierarchical-nav or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com

Demos: o-hierarchical-nav

Nav

Responsive Nav

Mega Dropdown