Navigation

A navigation component makes it easy for users to navigate through your application. Nav accepts Nav Item and Nav Disclosure elements as children.

• Icons should be accompanied by visible text whenever possible.
• If an icon conveys meaning that is not provided by the accompanying text, provide it with a description using the label attribute.
• If no accompanying text is present, provide an aria-label on the Nav Item or Nav Disclosure so screen reader users can understand the purpose of the item.

When the nav has focus:

• Enter: activates the nav-disclosure and toggles the visibility of the content.
• Space: activates the nav-disclosure and toggles the visibility of the content.
• Tab: moves focus to the next element in the tab order.
• Shift + Tab: moves focus to the previous element in the tab order.

• Vivid Nav: Manual accessibility test