Demo: double-level navigation with intro text
Considerations
The HTML markup necessary for the sub menus differs from all the other double-level navigation patterns: pay close attention to the differences.
| Setting | Description | Option used for this pattern |
|---|---|---|
| breakpoint | A number representing the viewport width in pixels at which the navigation toggle button will be hidden. Converted to em units in the script. Make sure that this ties up with the breakpoint values used in the CSS. |
768 |
| cloneTopLevelLink | Boolean determining whether to copy each top level link and add it to the relevant sub menu. | false |
| replaceTopLevelLinks | Boolean determining whether to replace each top level link with a button, or add a button after the link. | Default option (true) |
| mobileIcon | String for the SVG icon code used in the small screen navigation toggle button. Contains two path elements, one for the ‘open’ icon and one for the ‘close’ icon. CSS is used to change which path is shown depending on the aria-expanded state of the button. |
Default option |
| submenuIcon | String for the SVG icon code used for both the sub menu toggle buttons and the ‘Back’ button (where applicable). CSS is used to change which way the icon points, depending on its aria-expanded state and other factors. |
Default option |
| submenuDirection | String determining the direction in which the sub menus will appear to operate on small screens. Choosing the horizontal option results in a ‘Back’ button being added to sub menus, which is visible in the minimum viewport width configuration. |
horizontal |
| submenuIntro | Boolean option determining whether sub menus need to include some introductory text (hidden in the minimum viewport width configuration) and a landing page link. | true |