Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Default color
Custom color
The side drawer implements focus trapping to ensure keyboard navigation stays within the drawer when it's open. This is important for accessibility.
<!-- Trigger button -->
<button class="btn" data-drawer-target="my-drawer">Open Drawer</button>
<!-- Drawer component -->
<side-drawer id="my-drawer">
<div>
<h2>Drawer Content</h2>
<button>Focusable Button 1</button>
<button>Focusable Button 2</button>
<input type="text" placeholder="Focusable input">
</div>
</side-drawer>side
- Position of the drawer ("left", "right", or "center", defaults to "left")width
- Width of the drawer (defaults to "375px")animation-duration
- Duration of open/close animation in milliseconds (defaults to 300)<!-- Right side drawer -->
<side-drawer
id="my-drawer"
side="right"
width="400px"
animation-duration="400">
<div>Drawer content</div>
</side-drawer>
<!-- Center popup/modal -->
<side-drawer
id="my-popup"
side="center"
width="500px">
<div>Popup content</div>
</side-drawer>This drawer slides in from the left side.
Press Escape to close
This drawer slides in from the right side.
Press Escape to close
This appears as a centered popup/modal with scaling animation.
Press Escape to close or click outside
Round
Princess
Pear
Emerald
Radiant
Cushion
Oval
Heart
Marquise
Asscher
Blue Sapphire
Pink Sapphire
Yellow Sapphire
Garnet
Tanzanite
Emerald
Amethyst
Alexandrite
Peridot
Morganite
Ruby
Aquamarine
Blue Topaz
Citrine
Moissanite