Navigation

Open in Figma View all renders

Navigation items should be wrapped in a navigation parent element (following the BEM naming pattern). This will gap the components. The content can be further justified (evenly, space around, etc) using trumps to suit the design pattern. 

<div>
    <nav class="navigation" aria-label="navigation menu">
        <ul>
            <li>
                <a href="/navigation" class="navigation__item">policy overview</a>
            </li>
            <li>
                <a href="/navigation" class="navigation__item navigation__item--selected">policy overview</a>
            </li>
        </ul>
    </nav>
</div>

Variations and modifiers

Navigation item with icon

These examples show a leading icon, but the icon can both precede and follow the navigation text. 

    <a href="/navigation" class="navigation__item">
        <span class="material-symbols-rounded" aria-hidden="true">info</span>
        policy overview
    </a>
    <a href="/navigation" class="navigation__item navigation__item--selected">
        <span class="material-symbols-rounded" aria-hidden="true">info</span>
        policy overview
    </a>

Underlined navigation item

    <a href="/navigation" class="navigation__item navigation__item--underlined">
        policy overview
    </a>
    <a href="/navigation" class="navigation__item navigation__item--underlined navigation__item--selected">
        policy overview
    </a>