Introduction
Natura11y offers an assortment of responsive navigation and menu choices.
All navigation components provide visible hover and focus states for all actionable items.
Learn more about visible hover and focus
Generic Navigation
Create a simple vertical navigation with the .nav component class added to a <ul> tag (Figure 1).
<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>
For a horizontal menu, apply the .nav--horizontal modifier class (Figure 2).
<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>
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.
Justification
Use the flex justify content utilities for centered or right-justified navigation (Figure 4).
Bordered Navigation
Add the .nav--divider modifier class to a .nav selector for a vertical, bordered navigation (Figure 5).
Include the aformentioned .nav--horizontal and .nav--horizontal--{bp} modifier classes to .nav-divider selectors. This produces a horizontal (and responsive) bordered menu (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.
<ul class="nav" 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" role="menu">
...
</ul>
Dropdown Items
Include dropdown items within .nav and .nav--divider selectors, as well as within the .main-menu__nav selector inside the main menu component.
Learn about dropdowns, link–dropdown combos, and mega menus.
Related CSS Variables
Further customize by redefining any of their related CSS variables as shown below.
:root {
--nav-gap: 0.875em;
--nav-divider-padding-y: 0.625em;
--nav-divider-padding-x: var(--spacer-3);
--main-menu-padding-x: var(--container-padding-x);
--main-menu-padding-y: var(--spacer-2);
}
