# Navigation Drawer A Material Design navigation drawer. **Example: A standard navigation drawer with Inbox selected** ```html

Mail

inbox Inbox send Sent ``` ## Usage guidelines * **Use it for top-level destinations.** A drawer lists the main sections of an app, with the current one selected. * **Choose standard or modal.** A standard drawer (above) sits beside the content on large windows; a [modal drawer](#modal-drawer) opens over a scrim on small ones. * **Group with labels.** Use section labels and dividers to organize long lists. * **Keep labels short.** Long [labels](#text-labels-only) truncate. This component is new in [M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive). ## Anatomy A drawer holds an optional headline, section labels, dividers, and items. **Example: A drawer with a headline, section label, items, badge and divider** ```html

Mail

Folders

inbox 24 Inbox draft Drafts delete Trash ``` ## Examples ### Modal drawer Set `modal` to open the drawer over a scrim. Escape, the scrim, or swiping closes it. **Example: A button that opens a modal navigation drawer** *HTML* ```html Menu Inbox Sent ``` *JavaScript* ```js document.querySelector('#open-menu').addEventListener('click', () => { document.querySelector('#menu').show(); }); ``` ### Modal drawer without swipe Set `gestures-disabled` on a modal drawer to turn off swipe-to-close. Escape, the scrim, and `close()` still work. **Example: A modal navigation drawer that can't be swiped closed** *HTML* ```html Menu Inbox Sent ``` *JavaScript* ```js document.querySelector('#open-fixed-menu').addEventListener('click', () => { document.querySelector('#fixed-menu').show(); }); ``` ### Text labels only Items work without icons. Labels that are too long truncate, and `disabled` items are not interactive. **Example: A navigation drawer with text labels only** ```html General Privacy Billing ``` ## Accessibility * The drawer renders a `