Skip to contentSkip to footer
Flock of white birds flying

Photo: Richard Lee

Navigation

Introduction

Natura11y offers an assortment of responsive navigation and menu choices.

Generic Navigation

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

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

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

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

Breakpoint Modifiers

The .nav--horizontal modifier accepts breakpoint modifiers.

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

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

Justification

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

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


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

Bordered Navigation

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

HTML
      <ul class="nav nav--divider">
          ...
      </ul>
Figure 5

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

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

Icons in Navigation

Icons are supported within any .nav — no modifier class required. Icon styles apply automatically.

Nav items with icons (<a> or <button>) require two child selectors. The first child is a <span> with its combined icon classes. The second child is a <span> with a .nav__text class, which holds the item’s text. The .nav__text selector is the target for underlining on :hover and :focus states, and provides spacing between the icon and text. See Figure 7.

HTML
      <ul class="nav">
          <li>
              <a href="#1">
                  <span class="icon icon-home" aria-hidden="true"></span>
                  <span class="nav__text">Home</span>
              </a>
          </li>
          <li>
              <a href="#1">
                  <span class="icon icon-calendar" aria-hidden="true"></span>
                  <span class="nav__text">Calendar</span>
              </a>
          </li>
          <li>
              <a href="#1">
                  <span class="icon icon-bell" aria-hidden="true"></span>
                  <span class="nav__text">Notifications</span>
              </a>
          </li>
      </ul>


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

Main Menu

Dropdown

Flyout