side-drawer

A simple, animating side drawer built as a Web Component

This small, simple web component has no dependencies and can be consumed by vanilla JS or any front-end framework. It uses a standard dialog element under the hood with some (customizable) opinionated default styles and animations.

• ✅ Lightweight (~1kb gzipped)
• ✅ No Dependencies
• ✅ Standard dialog under the hood
• ✅ Portable
• ✅ Customizable via CSS
• ✅ Focus Trap
• ✅ Keyboard friendly (ESC to dismiss)
• ✅ Click outside drawer to dismiss

Example Customization

• border-top-right-radius: 20%; border-bottom-right-radius: 20%;
• width: 500px; max-width: 90vw;
• --side-drawer-transition: transform .75s ease-out; --side-drawer-backdrop-filter: blur(10px); --side-drawer-overlay-transition: opacity linear .75s; --side-drawer-overlay-opacity: .25;
• <side-drawer right><side-drawer>