Drawers

What is a drawer?

A drawer, also called an off-canvas panel, is a panel that slides in from the edge of the screen, usually left or right, sometimes from the bottom. Drawers hold content that is related to the current page but does not need permanent space: mobile navigation, filters on a product listing, a shopping cart, settings, notifications or the details of a selected item in a dashboard.

When to use a drawer

• Use a drawer for secondary content the user opens on demand, especially on smaller screens.
• Slide navigation in from the left and contextual panels such as carts or details from the right, which matches common expectations.
• Keep the drawer width reasonable on desktop (often 320 to 480 pixels) and let it go full width on phones.
• Bottom sheets work well on mobile for short lists of actions or filters.
• Provide a clear close button and allow closing by clicking the backdrop.

Accessibility and behaviour

A modal drawer with a backdrop should behave like a dialog: role="dialog", aria-modal="true", a label via aria-labelledby, focus moved inside on open, focus kept inside while open, Escape to close and focus returned to the trigger afterwards. The trigger button should expose aria-expanded and aria-controls. Prevent the page behind from scrolling while the drawer is open. Animate with transform rather than left or width for smooth performance, and respect prefers-reduced-motion.

Bootstrap 6, Bootstrap 5, Tailwind and pure CSS

These bootstrap offcanvas examples and drawer HTML CSS snippets are available for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap 5 versions use the offcanvas component; Bootstrap 6 versions build drawers on the native <dialog> element and the ES module build. Tailwind and pure CSS versions use <dialog> or a checkbox toggle with a small script. Open each drawer in the live preview, then copy the code from the code tabs or download it and fill it with your own content.