--- title: "Drawer UI: anatomy, variants and examples | Kombai" description: "A drawer slides in from the edge of the screen with detail, a form, filters or a menu, and the page stays where people left it." canonical_url: https://kombai.com/glossary/drawer/ author: "The Kombai Team" --- # Drawer A drawer slides in from the edge of the screen with detail, a form, filters or a menu, and the page stays where people left it. - Also called: side sheet, off-canvas - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/drawer/), [210 mobile designs](https://kombai.com/gallery/mobile/drawer/) - [Order #7261438095](https://kombai.com/gallery/inspirations/drawer-web-6/) (Web) - [Northfell](https://kombai.com/gallery/inspirations/drawer-ios-12/) (Mobile) - [Kettlefold](https://kombai.com/gallery/inspirations/drawer-web-12/) (Web) ## What is a drawer? A drawer is a panel that slides in from an edge of the screen, usually the right or the left, and sits over the page. It holds detail, a form, filters or a menu while the page behind stays in place. Closing it slides it back out, and people are where they were. - Modal drawers dim the page behind a scrim. Standard drawers sit beside the content and leave it usable. - On phones, many drawers rise from the bottom edge instead, the same way a bottom sheet does. ## When to use drawer - **Detail without leaving a list.** Open an order, a task or a file next to the list it came from. - **Filters and settings.** Many options that would crowd the page and apply together. - **Menus on small screens.** Account links and app sections that stay hidden until needed. ## When not to use one - **A single decision.** For one yes or no question, use a dialog. - **The main content.** If people need it to finish the task, keep it on the page. - **Navigation on large screens.** Show side navigation that stays open instead. ## Anatomy 1. **Scrim**: Dims the page, closes on tap 2. **Panel**: Slides in from the edge 3. **Header**: Title and close button 4. **Body**: Scrolls on its own 5. **Footer**: Pinned actions 6. **States**: Closed, open, focus, applied ## Variants We sorted every drawer design in the Kombai gallery and found six patterns. ### 1. Detail drawers A record opens beside the list it came from, so people can read or edit it and close back to their place. - [Tasks](https://kombai.com/gallery/inspirations/drawer-web-4/) (Web) - [Files](https://kombai.com/gallery/inspirations/drawer-web-15/) (Web) - [Trusshold](https://kombai.com/gallery/inspirations/drawer-web-10/) (Web) ### 2. Form drawers Create and edit forms, with the save button pinned to the bottom of the panel. - [Handover points](https://kombai.com/gallery/inspirations/drawer-web-31/) (Web) - [Default access pack](https://kombai.com/gallery/inspirations/drawer-web-14/) (Web) - [Calendar](https://kombai.com/gallery/inspirations/drawer-web-41/) (Web) ### 3. Filter and view drawers Filters, sorting and view options grouped in one panel, applied together with one button. - [Recipes](https://kombai.com/gallery/inspirations/drawer-web-44/) (Web) - [Portolane](https://kombai.com/gallery/inspirations/drawer-ios-13/) (Mobile) - [Morning check-in](https://kombai.com/gallery/inspirations/drawer-web-48/) (Web) ### 4. Menu drawers Account links and app sections in a panel that slides in from the left or right, mostly on phones. - [Verglade](https://kombai.com/gallery/inspirations/drawer-ios-19/) (Mobile) - [Mossgrain](https://kombai.com/gallery/inspirations/drawer-ios-24/) (Mobile) - [Beaconry](https://kombai.com/gallery/inspirations/drawer-ios-15/) (Mobile) ### 5. Bottom drawers On phones, most designs filed as drawers rise from the bottom edge and hold a list of choices or settings. - [Loomfield](https://kombai.com/gallery/inspirations/drawer-ios-205/) (Mobile) - [Dinelane](https://kombai.com/gallery/inspirations/drawer-ios-186/) (Mobile) - [Sumbird](https://kombai.com/gallery/inspirations/drawer-ios-171/) (Mobile) ### 6. Top drawers Search panels, sort menus and quick settings that drop down from the top edge over the page. - [Firnholt](https://kombai.com/gallery/inspirations/drawer-web-50/) (Web) - [Pendulark](https://kombai.com/gallery/inspirations/drawer-ios-17/) (Mobile) - [Tickstead](https://kombai.com/gallery/inspirations/drawer-ios-20/) (Mobile) ## Where drawers show up ### Carts and bags The cart opens from the right with quantities, a free delivery bar and a checkout button. - [Fenlis](https://kombai.com/gallery/inspirations/stepper-web-32/) (Web) - [Panbox](https://kombai.com/gallery/inspirations/cart-bag-web-33/) (Web) - [Yarrowen](https://kombai.com/gallery/inspirations/announcement-banner-web-4/) (Web) ### Assistants and help Chat assistants, past conversations and help guides that open beside the work instead of replacing it. - [Chapefield](https://kombai.com/gallery/inspirations/drawer-web-42/) (Web) - [Brimwold](https://kombai.com/gallery/inspirations/drawer-web-45/) (Web) - [Feldspire](https://kombai.com/gallery/inspirations/drawer-ios-2/) (Mobile) ### Rooms and activity Channel details, members and notifications that slide over a chat or a feed. - [Cairnly](https://kombai.com/gallery/inspirations/drawer-ios-11/) (Mobile) - [Skeinhall](https://kombai.com/gallery/inspirations/drawer-ios-30/) (Mobile) - [Millsail](https://kombai.com/gallery/inspirations/drawer-web-35/) (Web) ### Editors and builders Insert panels, design settings and chart options docked beside the canvas they change. - [Pinionfold](https://kombai.com/gallery/inspirations/drawer-web-47/) (Web) - [Design](https://kombai.com/gallery/inspirations/drawer-web-25/) (Web) - [Cairnfell](https://kombai.com/gallery/inspirations/drawer-web-16/) (Web) ## Drawer vs similar components | | [Drawer](https://kombai.com/glossary/drawer/) | [Bottom sheet](https://kombai.com/glossary/bottom-sheet/) | [Dialog](https://kombai.com/glossary/dialog/) | [Side navigation](https://kombai.com/glossary/side-navigation/) | |---|---|---|---|---| | Sits | Along a side edge | Along the bottom edge | Centered over the screen | Docked beside the content | | Shown | Until closed | Until closed or swiped down | Until answered | Always | | Best for | Detail, forms and filters | Short tasks on mobile | Decisions that block the page | Moving between sections | ## Build notes - A modal drawer is a dialog: role="dialog", aria-modal="true" and aria-labelledby pointing at its title. - Move focus into the drawer on open, keep Tab inside it and close it on Escape. - On close, return focus to the button that opened it. - Give a modal drawer a scrim, and let a tap on the scrim close it. - A standard drawer sits beside the content with no scrim, so people can use both at once. - Pin the header and the footer actions, and let only the body scroll. ## FAQ ### What's the difference between a drawer and side navigation? Side navigation stays on screen next to the content. A navigation drawer holds the same links but stays hidden until people open it, which suits phones where there is no room to keep it open. ### Should a drawer open from the left or the right? Detail, form, filter and cart drawers usually open from the right, the end edge. Menu drawers open from either side. Set the edge as start or end rather than left or right, so it flips for right-to-left languages. ### Drawer or bottom sheet on mobile? A bottom sheet suits short choices and can be dragged down to close. A side drawer suits menus and long, full-height lists. Most phone designs in the gallery that are called drawers are bottom sheets. ### Should a drawer close when people click outside it? A modal drawer should: a tap on the scrim closes it. If it holds a form with unsaved changes, ask before throwing them away. A standard drawer has no scrim and stays open while people work beside it. ## Related terms - [Bottom sheet](https://kombai.com/glossary/bottom-sheet/) - [Side navigation](https://kombai.com/glossary/side-navigation/) - [Dialog](https://kombai.com/glossary/dialog/) - [Popover](https://kombai.com/glossary/popover/) ## References - [WAI-ARIA Authoring Practices: Dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) - [Material Components for Android: Side sheets](https://github.com/material-components/material-components-android/blob/master/docs/components/SideSheet.md) - [Material Components for Android: Navigation drawer](https://github.com/material-components/material-components-android/blob/master/docs/components/NavigationDrawer.md)