Skip Navigation

Photo by Richard Lee  on Unsplash

Navigation

Natura11y offers an assortment of responsive navigation and menu choices.

Accessibility Spotlight

All navigation components provide visible hover and focus states for all actionable items.

Learn more about visible hover and focus

Primary Navigation Component

The primary navigation component is a complete header menu system. It's made up of four preassigned areas: logo, main menu, search, and actions. The main menu container includes an optional search field.

There are two distinct placements available for the main menu. The first menu placement is inline with the logo, creating a slim navigation bar:

The second menu placement is below the logo, spanning the full width of the component:

Both menus use the same HTML markup but include a different modifier on their parent selector.

The .primary-nav--inline--{x} places the menu inline with the logo. In contrast, .primary-nav--below--{x} selector places the menu below the logo. Here, x equals its breakpoint modifier (e.g., lg for large). At this point the component changes layout from mobile to desktop.

Figure 1 (below) provides the entire HTML for the primary navigation component.

<div class="primary-nav--inline--lg">

    <div class="primary-nav__logo">

        <a href="#1" title="Home" data-logo="brand">
            <!-- Placeholder logo, replace the following <svg> tag with your own -->
            <svg xmlns="http://www.w3.org/2000/svg" width="126" height="34" viewBox="0 0 126 34">
                <g>
                    <polygon points="8 25 8 1 0 1 0 33 3 33 8 33 16 33 16 25 8 25"/>
                    <path d="M35,0A17,17,0,1,0,52,17,17,17,0,0,0,35,0Zm0,26a9,9,0,1,1,9-9A9,9,0,0,1,35,26Z"/>
                    <path d="M109,0a17,17,0,1,0,17,17A17,17,0,0,0,109,0Zm0,26a9,9,0,1,1,9-9A9,9,0,0,1,109,26Z"/>
                    <path d="M88.95,16H72v6h7.4824a9,9,0,1,1,0-10H88.25A17.0052,17.0052,0,1,0,89,17C89,16.6624,88.9689,16.3327,88.95,16Z"/>
                </g>
            </svg>
        </a>

    </div>

    <nav class="primary-nav__menu" id="main-menu" aria-label="Main Menu">

        <ul>
            <li>
                <button data-toggle="dropdown">Dropdown</button>
                <ul class="nav__dropdown box-shadow-1--lg">
                    <li>
                        <a href="#1">Link</a>
                    </li>
                    <li>
                        <a href="#1">Link</a>
                    </li>
                    <li>
                        <a href="#1">Link</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#1">Link</a>
            </li>
            <li>
                <a href="#1">Link</a>
            </li>
            <li>
                <a href="#1">Link</a>
            </li>
        </ul>

    </nav>

    <div class="primary-nav__toggle">

        <button
            class="mobile-menu-toggle button button--icon-only"
            aria-label="Menu"
            data-toggle="collapse"
            data-target-toggle="#main-menu"
            data-target-close="#search">
                <span class="icon icon-menu"></span>
        </button>

        <!-- The search toggle button is only required for inline navigation -->

        <button
            class="mobile-menu-toggle button button--icon-only"
            aria-label="Search"
            data-toggle="collapse"
            data-target-toggle="#search"
            data-target-close="#main-menu">
                <span class="icon icon-search"></span>
        </button>

    </div>

    <form class="primary-nav__search" id="search" role="search" data-focus-first>

        <div class="form-entry">
            <div class="form-entry__field">
                <span class="form-entry__field__input">
                    <input type="text" name="global-search">
                    <button class="button">
                        Search
                    </button>
                </span>
            </div>
        </div>

    </form>

    <div class="primary-nav__actions">

        <button
            class="button button--icon-only"
            aria-label="Language">
                <span class="icon icon-language"></span>
        </button>

    </div>

</div>
Figure 1
Line #Details
1

The .primary-nav--{x}--{y} block-level selector is required.

It's completed with two modifiers: where x indicates the menu position (below or inline), while y indicates the component's responsive breakpoint.

3-17

The .primary-nav__logo selector is required.

It contains the website's logo and home link.

When using a single color svg for the logo, the data-logo="brand" attribute placed on the <a> tag sets the svg fill color to currentColor. This is useful when a theme color utility is present on a parent element.

19-47

The .primary-nav__menu selector is required.

The id attribute equals the value of aria-controls from the associated menu button (found within the .primary-nav__toggle selector).

It is recommended to include aria-label="{y}", where y provides a descriptive name for assistive technology.

49-71

The .primary-nav__toggle selector is required.

It contains the website's menu and search buttons (on mobile viewports).

The search toggle button is only required within the .primary-nav--inline--{x} selector. This is because with .primary-nav--below--{x}, the .primary-nav__search selector (described below) remains visible from mobile to dektop.

The data-target-toggle attribute equals the value of the main menu's id attribute.

The aria-label="Toggle Menu" attribute provides a descriptive name for assistive technology.

The data-toggle="collapse" attribute is required.

Learn about collapse.

73-86

The .primary-nav__search selector is optional.

The role="search" attribute on the form tag is present for assistive technology.

Learn about form entries.

88-96

The .primary-nav__actions selector is optional.

It contains actions buttons that should persist on every page (e.g. Sign In, Translate).

Breadcrumb

A simple breadcrumb navigation to support wayfinding.

<ul class="nav-breadcrumb">
    <li>
        <a class="button button--icon-only" href="#1">
            <span class="icon icon-home" aria-hidden="true"></span>
        </a>
    </li>
    <li>
        <a href="#1">About</a>
    </li>
    <li class="text-color-primary">
        Services
    </li>
</ul>
Figure 2

Generic Navigation

Create a simple vertical navigation with the .nav component class added to a <ul> tag (Figure 3).

<ul class="nav">
    <li>
        <a href="#1">Link</a>
    </li>
    <li>
        <a href="#1">Link</a>
    </li>
    <li>
        <a href="#1">Link</a>
    </li>
</ul>
Figure 3

For a horizontal menu, apply the .nav--horizontal modifier class (Figure 4).

<ul class="nav nav--horizontal">
    <li>
        <a href="#1">Link</a>
    </li>
    <li>
        <a href="#1">Link</a>
    </li>
    <li>
        <a href="#1">Link</a>
    </li>
</ul>
Figure 4

Breakpoint Modifiers

The .nav--horizontal modifier accepts breakpoint modifiers.

With the HTML in Figure 5, the nav starts in the vertical direction. It then changes to the horizontal direction at the large breakpoint.

<ul class="nav nav--horizontal--lg">
    ...
</ul>
Figure 5
<ul class="nav nav--horizontal--lg">
    ...
</ul>
Figure 5

Justification

Use the flex justify content utilities for centered or right-justified navigation (Figure 6).

<ul class="nav nav--horizontal justify-content-center">
    ...
</ul>

<ul class="nav nav--horizontal justify-content-end">
    ...
</ul>
Figure 6

Bordered Navigation

Add the .nav--divider modifier class to a .nav selector for a vertical, bordered navigation (Figure 7).

<ul class="nav nav--horizontal--lg">
    ...
</ul>
Figure 7

Include the aformentioned .nav--horizontal and .nav--horizontal--{bp} modifier classes to .nav-divider selectors. This produces a horizontal (and responsive) bordered menu (Figure 8).

<ul class="nav nav--divider nav--horizontal">
    ...
</ul>
Figure 8

Icons in Navigation

Generic navigation can include icons. Add the .nav--has-icons modifier class to a .nav selector. Nav items with icons (<a> or <button>) require two child selectors.

The first child is is a <span> with its combined icon classes. The second child is a <span> with a .nav__text class. This holds the nav items's text. Further, the .nav__text selector is our target for underlining the text on :hover and :focus states. It also provides a small margin to separate the text from the icon. See Figure 9.

<ul class="nav nav--has-icons" role="menu">
    <li>
        <a href="#1">
            <span class="icon icon-home"></span>
            <span class="nav__text">Home</span>
        </a>
    </li>
    <li>
        <a href="#1">
            <span class="icon icon-calendar"></span>
            <span class="nav__text">Calendar</span>
        </a>
    </li>
    <li>
        <a href="#1">
            <span class="icon icon-bell"></span>
            <span class="nav__text">Notifications</span>
        </a>
    </li>
</ul>

<ul class="nav nav--divider nav--has-icons" role="menu">
    ...
</ul>
Figure 9

Dropdown Items

Include dropdown items within .nav, and .nav--divider selectors. As well as within the .primary-nav__menu selector inside the primary navigation component.

To create a dropdown, include the data-toggle="dropdown" attribute on a <button> (Figure 8, line 3). Add a sibling <ul> with the .nav__dropdown class (Figure 10, line 4).

<ul class="nav nav--horizontal">
    <li>
        <button data-toggle="dropdown">Dropdown</button>
        <ul class="nav__dropdown">
            <li>
                <a href="#1">Link</a>
            </li>
            <li>
                <a href="#1">Link</a>
            </li>
            <li>
                <a href="#1">Link</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#1">Link</a>
    </li>
    <li>
        <a href="#1">Link</a>
    </li>
</ul>
Figure 9

Dropdowns work as you might expect within vertical navigation:

<ul class="nav nav--divider nav--horizontal">
    ...
</ul>
Figure 10

Related CSS Variables

Further customize Navigation by redefining any of their related CSS variables as shown below.

:root {
    --nav-gap: 0.75em;
    --nav-divider-padding-y: 0.625em;
    --nav-divider-padding-x: var(--spacer-3);
    --primary-nav-padding-x: var(--spacer-3);
    --primary-nav-padding-y: var(--spacer-2);
    --primary-nav-search-width: 200px;
}