Skip to main content

Navigation menu

Navigation menu is a typical dropdown menu system that is used to navigate to other pages.

Example

Navigation menu example with several levels of nesting

Best practices

Use the navigation menu component when you require a menu with dropdown and nesting capabilities. It should only be used to navigate to new pages. If you require in page navigation, use action menu or in-page navigation instead.

Do

  • Use when users will be directed to other pages.
  • Plan for localization. Certain strings may expand in length when translated to other languages.

Don’t

Also known as

Dropdown
Select menu

Related

Select

Accessibility

  • The triggering element has both aria-haspopup="true" and aria-expanded.
  • The menu being toggled has aria-hidden values.

Options

  • Associate the triggering element with the menu it expands by using aria-controls with the value of the menus id.

Development

  • Schema definition: The navigation-menu schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Primary navigation menu

<div class="c-navigation-menu">
    <button aria-controls="navigationMenuA" aria-haspopup="true" aria-expanded="false">Navigation menu</button>
    <ul id="navigationMenuA" aria-hidden="true">
        <li class="f-sub-menu">
            <button aria-controls="navigationMenuAMenu1" aria-haspopup="true" aria-expanded="false">Sub menu 1</button>
            <ul id="navigationMenuAMenu1" aria-hidden="true">
                <li>
                    <a href="#">Hyperlink 1</a>
                </li>
                <li>
                    <a href="#">Hyperlink 2</a>
                </li>
                <li>
                    <a href="#">Hyperlink 3</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Hyperlink 1</a>
        </li>
        <li>
            <a href="#">Hyperlink 2</a>
        </li>
        <li>
            <a href="#">Hyperlink 3</a>
        </li>
        <li>
            <a href="#" target="_blank">Hyperlink 4</a>
        </li>
    </ul>
</div>

Navigation menu for secondary page menus

<div class="c-navigation-menu">
    <button aria-controls="divMenuA" aria-haspopup="true" aria-expanded="false">Div menu</button>
    <ul id="divMenuA" aria-hidden="true">
        <li>
            <a href="#">Hyperlink 1</a>
        </li>
        <li>
            <a href="#">Hyperlink 2</a>
        </li>
        <li>
            <a href="#">Hyperlink 3</a>
        </li>
        <li>
            <a href="#" target="_blank">Hyperlink 4</a>
        </li>
        <li>
            <a href="#">Hyperlink 5</a>
        </li>
    </ul>
</div>