Advanced navigation

The starting point for these demos involves minimal CSS and JavaScript, to avoid being too opinionated and requiring lots of overrides and adjustments within projects. Be prepared to make some modifications yourself - hopefully not too many as far as the JavaScript is concerned.

Demos

Considerations

Amplify includes scripts and styles for multiple navigation patterns - your project will probably only use one pattern. Remember: only import the Sass/JS files that you need for your project, to reduce the overall CSS and JS payload.
The nav element is only wrapped in a div container with the classname component for the purposes of each demo.
If you have multiple nav landmarks on a page, consider giving each one a unique label using the aria-label attribute with a brief descriptive value. This can be helpful for people using a screen reader. There is no need to include the word ‘navigation’ in the label.

Naming the navigation toggle button

In all the demos, the navigation is hidden behind a button in the minimum viewport width configuration. Beyond a specified viewport width, the button is hidden and the navigation is exposed.

Buttons must always have an accessible name. For an icon-only "hamburger" button, Amplify uses a span with the visuallyhidden class to provide the name (‘Menu’ in these demos). The name could just as easily be made visible by removing that class, which is more user-friendly than relying on an icon alone.

JavaScript adds the aria-expanded attribute to the toggle button to convey its open/closed state to people using Assistive Technology.

Changes to the accessible name are not always conveyed to Assistive Technology. If we were to change both the accessible name of the button and its aria-expanded state, there is a risk of creating a confusing announcement such as "Open menu expanded".

Keep the accessible name simple and use it only to tell users what the button is/does - not its state. Avoid using words such as ‘open’ or ‘close’ in the accessible name.