Demo: double-level navigation with intro text

Back to navigation index

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.
• It uses the same script as the double-level navigation pattern but with differences in the options (more below) and the initial HTML markup.
• 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 with a unique descriptive value for each instance.

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, and other buttons needed for this navigation pattern, to convey the 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.

cloneTopLevelLink

The script converts all top-level links that are followed by a nested sub menu into buttons that will toggle the sub menu. This boolean option determines whether to copy these links and add them to the relevant sub menu. For this pattern it is recommended to set this option to false

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.

submenuDirection

A string to determine the direction in which the sub menus will appear to operate on small screens (`vertical` or `horizontal`). This ties in with the preceding submenuicon option. The `horizontal` wraps the sub menu in a div and inserts a `Back` button.

submenuIcon

The code for the SVG icon used in the sub menu toggle buttons (and the `Back` button, where relevant). It is strongly recommended to follow the existing pattern, which uses two path elements, one a vertical indicator and one for a horizontal indicator, and retain the existing classes. CSS is used to change the icon direction depending on the button type and its aria-expanded state.

submenuIntro

Whether or not the sub menus include introductory text and an additional landing page link. This boolean option adds a class to the nav for specific styling, and inserts the `Back` button into a different place in the DOM. Set this option to true for this pattern.