Components / Library Version 5.2.1

Navigation

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.

Properties

Examples

Accessibility

Notes

* Required property

wm-navigation properties

open

boolean

The open state of wm-navigation, if collapsible.

wm-navigation-item properties

href *

string

The link destination.

text *

string

The item's text.

active

boolean

Whether or not the item is the current page.

wm-navigation-hamburger properties

nav-id *

string

The id of the associated wm-navigation

Show Demo

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare venenatis ipsum, sit amet condimentum lacus imperdiet non. Quisque aliquet nisi id est congue, eu congue ipsum interdum. Curabitur eget leo quis metus ultrices fermentum. Donec ut gravida eros, in eleifend arcu. Quisque euismod neque luctus elementum semper. Aliquam suscipit risus a ultricies vehicula. Curabitur id ultrices tortor. In auctor mauris id quam viverra dictum. Nunc rutrum lectus quis commodo mollis. Sed a accumsan tellus, eget maximus mauris. Etiam id tempus sapien. Vestibulum feugiat, elit eu ornare pharetra, urna nisl tincidunt orci, ut tincidunt sapien lacus quis mauris. Proin non aliquam velit. Suspendisse varius pulvinar justo, vel dignissim augue venenatis at.

Close Demo

Usage in HTML

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.

<wm-button onClick="toggleDemo()">Show Demo</wm-button>

<wm-navigation-hamburger nav-id="mynav"></wm-navigation-hamburger>

<h3>Demo Header</h3>

</div>

<wm-navigation id="mynav">

<wm-navigation-item href="#home" text="Home" active onClick="setActive(this)">

</wm-navigation-item>

<wm-navigation-item href="#org" text="Organization Management" onClick="setActive(this)"><span class="mdi mdi-emoticon-cool-outline"></span></wm-navigation-item>

<wm-navigation-item href="#plans" text="Plans" onClick="setActive(this)"><span class="mdi mdi-emoticon-cool-outline"></span></wm-navigation-item>

<wm-navigation-item href="#accreditation_self_studies" text="Accreditation Self-Studies" onClick="setActive(this)"><span class="mdi mdi-emoticon-cool-outline"></span></wm-navigation-item>

<wm-navigation-item href="#program-review" text="Program Review" onClick="setActive(this)"><span class="mdi mdi-emoticon-cool-outline"></span></wm-navigation-item>

</wm-navigation>

<h1>Lorem Ipsum</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare venenatis ipsum, sit amet condimentum lacus imperdiet non. Quisque aliquet nisi id est congue, eu congue ipsum interdum. Curabitur eget leo quis metus ultrices fermentum. Donec ut gravida eros, in eleifend arcu. Quisque euismod neque luctus elementum semper. Aliquam suscipit risus a ultricies vehicula. Curabitur id ultrices tortor. In auctor mauris id quam viverra dictum. Nunc rutrum lectus quis commodo mollis. Sed a accumsan tellus, eget maximus mauris. Etiam id tempus sapien. Vestibulum feugiat, elit eu ornare pharetra, urna nisl tincidunt orci, ut tincidunt sapien lacus quis mauris. Proin non aliquam velit. Suspendisse varius pulvinar justo, vel dignissim augue venenatis at.</p>

<wm-button onClick="toggleDemo()">Close Demo</wm-button>

</div>

Javascript Sample

Example code for functionality.

function toggleDemo() {

const demoEl = document.getElementById("navigation-demo");

demoEl.classList.contains("open") ? demoEl.classList.remove("open") : demoEl.classList.add("open");

}

function setActive(element) {

const navItems = document.querySelectorAll("wm-navigation-item");

navItems.forEach((item) => (item.active = item === element));

}

Usage in Elm

Code generated from HTML.

node "wm-button" [ onClick toggleDemo ] [ text "Show Demo" ]

node "div" [ id "navigation-demo" ]

[ node "div" [ class "header" ]

, node "!--" [ NAVIGATION True, HAMBURGER True, COMPONENT True, MARKUP True, -- True ]

, node "wm-navigation-hamburger" [ attribute "nav-id" "mynav" ] [ text "" ]

, node "!--" [ END True, OF True, NAVIGATION True, HAMBURGER True, COMPONENT True, MARKUP True, -- True ] [ text "" ]

, node "h3" [] [ text "Demo Header" ]

]

node "div" [ class "main" ]

[ node "!--" [ NAVIGATION True, COMPONENT True, MARKUP True, -- True ]

, node "wm-navigation" [ id "mynav" ]

, node "wm-navigation-item" [ attribute "href" "#home", attribute "text" "Home", active True, onClick setActive(thi ]

, node "span" [ class "mdi mdi-emoticon-cool-outline" ] [ text "" ]

]

node "wm-navigation-item" [ attribute "href" "#org", attribute "text" "Organization Management", onClick setActive(thi ] [ text "<span class="mdi mdi-emoticon-cool-outline"></span>" ]

node "wm-navigation-item" [ attribute "href" "#plans", attribute "text" "Plans", onClick setActive(thi ] [ text "<span class="mdi mdi-emoticon-cool-outline"></span>" ]

node "wm-navigation-item" [ attribute "href" "#accreditation_self_studies", attribute "text" "Accreditation Self-Studies", onClick setActive(thi ] [ text "<span class="mdi mdi-emoticon-cool-outline"></span>" ]

node "wm-navigation-item" [ attribute "href" "#program-review", attribute "text" "Program Review", onClick setActive(thi ] [ text "<span class="mdi mdi-emoticon-cool-outline"></span>" ]

node "!--" [ END True, OF True, NAVIGATION True, COMPONENT True, MARKUP True, -- True ]

[ node "div" [ class "content" ]

, node "h1" [] [ text "Lorem Ipsum" ]

, node "p" [] [ text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare venenatis ipsum, sit amet condimentum lacus imperdiet non. Quisque aliquet nisi id est congue, eu congue ipsum interdum. Curabitur eget leo quis metus ultrices fermentum. Donec ut gravida eros, in eleifend arcu. Quisque euismod neque luctus elementum semper. Aliquam suscipit risus a ultricies vehicula. Curabitur id ultrices tortor. In auctor mauris id quam viverra dictum. Nunc rutrum lectus quis commodo mollis. Sed a accumsan tellus, eget maximus mauris. Etiam id tempus sapien. Vestibulum feugiat, elit eu ornare pharetra, urna nisl tincidunt orci, ut tincidunt sapien lacus quis mauris. Proin non aliquam velit. Suspendisse varius pulvinar justo, vel dignissim augue venenatis at." ]

, node "wm-button" [ onClick toggleDemo ] [ text "Close Demo" ]

]

Keyboard Support

Hamburger Menu

Key	Function
`Enter` `Space`	Reveals the Navigation

Navigation

Key	Function
`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.

Stacking context and z-index

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.