These templates follow the Standard Navigation pattern. For a full description and usage guidelines, please see the Standard Navigation Pattern documentation. If you’re not sure if this navigation pattern is right for your project, the Navigation Pattern Overview contains descriptions of all the navigation pattern options available.
To make our navigation menus accessible to more users, certain ARIA tags are required. The following tags can be seen in the templates: aria-haspopup, aria-expanded and aria-labelledby.
aria-haspopup communicates to all screen readers that there is a submenu.
aria-expanded communicates if something is open or closed. It is toggled by Javascript using a string representation of a boolean value.
aria-labelledby provides a concise description of a submenu element. If the submenu is already clear, this attribute isn’t necessary.
Roles of menubar and menuitem can also be used to enhance the experience for screen reader users. For more information, please see the W3C’s Menubar documentation.
The Global Navigation Bar, Section Navigation Bar, and Section Title can use .SiteNav--full, .SectionTitle--full and SectionNav--full on a desktop applications. Do not mix and match this full width option with the standard max-width option. The full-width navigation should not be used with hero components. Do not use the full-width option on marketing or informational websites.
