Components / Library Version 4.7.0
This component serves as the main navigation for a site. The pattern makes
use of wm-navigation with child wm-navigation-items.
A wm-navigation-hamburger can be included as a toggle button for
when the Navigation is collapsible. Any skip-navigation link must be
implemented separately.
At a set breakpoint of 1024px, the Navigation will enter its
collapsible mode. It can be revealed by using the wm-navigation-hamburger
component, or toggling the Navigation's open property.
Navigation Item icons are passed in as children of wm-navigation-item.
PropertiesExamplesAccessibilityNotes
* Required property
open
boolean
The open state of wm-navigation, if collapsible.
href *
string
The link destination.
text *
string
The item's text.
active
boolean
Whether or not the item is the current page.
nav-id *
string
The id of the associated wm-navigation
In order to properly visualize how the Navigation works in relation to a header and main content area, use the
button above to show the demo.
Example code for functionality.
Code generated from HTML.
|
Enter
Space
|
Reveals the Navigation
|
|
Enter
Space
|
While on the close button, closes the Navigation
|
|
Escape
|
Closes the Navigation
|
|
Tab
Shift+Tab
|
Goes to the next wm-navigation-item. If the
Navigation is collapsible, focus is trapped within.
|
The Side Navigation UI pattern is tightly connected to other elements on the page: the header and the content. Unlike other components which can be used in a variety of cases and placed anywhere in the markup, this component is intented for a particular scenario and will only work properly in that case. The recommended markup is as follow (closing tags and intermediary elements omitted for clarity):
<body>
<header>
<wm-navigation-hamburger>
<div>
<wm-navigation>
<main>
In the above example the body of the page doesn't scroll. The <main> content and the navigation scroll when their content overflow.
On screens wider than 1024px (persistent navigation), the component needs to be under the header, so that the shadow of the header falls on it. On smaller screens (collapsible navigation), the component needs to be above the header in order to cover it. The component has a default z-index of 10 when persistent, and 5000 when collapsible. You can override these values if they do not work in your context. Make the CSS rule !important to ensure your rule overrides the component's.