Navigation With Dropdown
Back to complex components
A collection of elements grouped together with the intention of site navigation. Each element will contain an interactive dropdown sub-group of elements. Sometimes this is called a fly-out menu.
WHEN I navigate by tabbing on an element in a navigation
AND the element receives focus
THEN I expect a visual indication of focus on the element,
WHEN I navigate by tabbing on an element in a navigation
AND the element receives focus
THEN I expect an indication to the screen-reader,
WHEN I navigate by tabbing on an element in a navigation
AND the element receives focus and the dropdown is revealed and I focus on a dropdown element
THEN I expect a visual indication of focus on the element,
WHEN I navigate by tabbing on an element in a navigation
AND the element receives focus and the dropdown is revealed and I focus on a dropdown element
THEN I expect an indication to the screen-reader,
WHEN I navigate by tabbing on an element in a navigation
AND the element receives focus and the dropdown is revealed,
THEN I expect an indication to the screen-reader,
AND the element receives focus
THEN I expect a visual indication of focus on the element,
WHEN I navigate by tabbing on an element in a navigation
AND the element receives focus
THEN I expect an indication to the screen-reader,
WHEN I navigate by tabbing on an element in a navigation
AND the element receives focus and the dropdown is revealed and I focus on a dropdown element
THEN I expect a visual indication of focus on the element,
WHEN I navigate by tabbing on an element in a navigation
AND the element receives focus and the dropdown is revealed and I focus on a dropdown element
THEN I expect an indication to the screen-reader,
WHEN I navigate by tabbing on an element in a navigation
AND the element receives focus and the dropdown is revealed,
THEN I expect an indication to the screen-reader,
More Information
Remember that the ARIA attribute aria-expanded should be used for any sub-menu here, upon expansion, set aria-expanded to true. Generally, one can access a sub-menu by hovering and focusing on an element, although sometimes this is done by clicking or with the keyboard. This needs to be made apparent to the user through text or a special ARIA message.