Components / Library version 3.26.0
This component serves as the main navigation for a site. The pattern makes
wm-navigation with child
wm-navigation-hamburger can be included as a toggle button for
when the Navigation is collapsible. Any skip-navigation link must be
At a set breakpoint of
1024px, the Navigation will enter its
collapsible mode. It can be revealed by using the
component, or toggling the Navigation's
Navigation Item icons are passed in as children of
* Required property
The open state of
wm-navigation, if collapsible.
The link destination.
Whether or not the item is the current page.
The item's text.
The id of the associated
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.
Reveals the Navigation
While on the close button, closes the Navigation
Closes the Navigation
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):
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.