Navigation Drawer
Navigation Drawers allow people to switch between different sections of an app on tablet and desktop. The hierarchy level and state is preserved as the user navigates between sections.
Navigation Drawer, Option 1
When the user taps the Menu button in the App Bar, a modal Navigation Drawer is pushed from the leading edge. The user can collapse the menu by tapping the Close button, drag the menu to the left or tap anywhere outside the menu.
Navigation Drawer, Option 2
When the user taps the Menu button in the App Bar, an inline Navigation Drawer is pushed from the leading edge. The user can collapse the menu by tapping the Close button or drag the menu to the left. Use this option only if the content area is large enough.
Navigation Drawer, Option 3
An inline Navigation Drawer is displayed from the start. The user can collapse the menu by tapping the Close button or drag the menu to the left. Use this option only if the content area is large enough.
Semantik
Navigation Drawer presenteras som en dialogruta (role="dialog") där alla menyvalen ligger som länkar i en lista.
<div role="dialog" aria-label="Main navigation">
<ul>
<li>
<a href="">Start</a>
</li>
<li>
<a href="">Journeys</a>
</li>
<li>
<a href="">Login</a>
</li>
<li>
<a href="">Traffic info</a>
</li>
<li>
<a href="">More</a>
</li>
</ul>
</div>Tillgängligt namn
Dialogrutan bör få ett namn genom propen ariaLabel – t.ex. "Huvudnavigation". Detta gör det lättare för användare med hjälpmedel urskilja dialogens syfte.
Visning av aktivt val
Det aktiva valet i navigationen måste gå att urskilja från de övriga valen. Visuellt görs detta genom att textfärgen och typografin ändras.
För användare med skärmläsare kommuniceras det aktiva valet med WAI-ARIA attributet aria-current="page". Detta sker automatiskt på komponentnivå.