Open primary navigation
Origami Frontend Components & Services

Demos: o-hierarchical-nav

o-hierarchical-nav has a support status of "deprecated". This means that no new features will be added to this component, but security-related bugs will be fixed. We do not recommend using this component in new projects. If you still rely on this component or have concerns, please contact the Origami team.

Nav

A responsive multi-level menu for site navigation

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

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>

Mega Dropdown

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

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>
Switch component view

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