Demo: single-level navigation

Considerations

This navigation pattern uses minimal CSS and JavaScript, so as not to be too opinionated and require lots of overrides and adjustments within projects. Expect to have to make some modifications yourself - though hopefully not too many for the script.
The nav element is only wrapped in a div container with the classname component for styling this demo version.
If you use more than one nav element on a page make sure to add the aria-label attribute to them with a unique descriptive value.

Naming the small screen navigation toggle button

Buttons must always have an accessible name. To allow for an icon-only button design, Amplify uses a span element with the visuallyhidden class for naming the button (`Menu` in the preceding example). It could just as easily be made visible by removing that class, which may be more user-friendly.

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

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 that a user will hear 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 - in other words, avoid using words such as `open` or `close` in the accessible name.

Notes on the JavaScript

The following configuration options are available:

breakpoint: A unitless number, indicating the viewport width in pixels at which the small screen navigation toggle button is no longer required. It is converted to em units in the script. Make sure that this ties up with the breakpoint values used in the Sass.
mobileIcon: The code for the SVG icon used in the small screen navigation toggle button. It is strongly recommended to follow the existing pattern, which uses two path elements, one for the open icon and one for the close icon, and retain the existing classes. CSS is used to change the icon depending on its aria-expanded state.