lunaDOM Docs
lunaDOM Docs

lunaDOM is a collection of lightweight, accessible shadowdom based web components built with JavaScript.

v0.0.25

Drawer

Slide-out panel from any edge with overlay support.

The <luna-drawer> component provides slide-out panels from any edge with overlay and contained modes.

Paths

/lunadom/components/drawer/drawer.js REQUIRED

Placement Options

Left Drawer Right Drawer Top Drawer Bottom Drawer
Account Settings

Modify your account preferences here.

Cancel
Large Sidebar

This drawer slides from the start and has a custom width.

Scroll down to see isolated scrolling...
Notifications

New events since your last visit.

 Terminal
> _

Contained Drawer

This content is inside a position: relative container.

Open Contained Drawer
Inner Menu

I am contained to the parent div!

Close

Customization

Slots
title - Title content for the drawer
default - Main content for the drawer
footer - Footer content for actions
Attributes
placement - Edge to slide from (start, end, top, bottom)
contained - Whether drawer is contained to parent
initial-focus - A selector for the element to receive focus when the drawer opens
CSS Variables
--luna-drawer-size - Width or height of the drawer
--luna-bg - Drawer background color
--luna-color - Text color within the drawer
--luna-border - Border color for segments and edges
--luna-overlay-bg - Background color of the backdrop overlay
--luna-transition-speed - Animation duration for slide and fade
Events
luna-show - Emitted when the drawer opens
luna-hide - Emitted when the drawer closes
luna-request-close - Emitted when the drawer attempts to close (via close button, ESC, or overlay). Can be cancelled.

Example Code

<!-- Basic Drawer --> <luna-drawer id="drawer" placement="end"> <span slot="title">Drawer Title</span> Drawer content goes here. <div slot="footer"> <luna-button onclick="drawer.hide()">Close</luna-button> </div> </luna-drawer> <luna-button onclick="drawer.show()">Open Drawer</luna-button> <!-- Placement Options --> <luna-drawer placement="start"></luna-drawer> <!-- Left --> <luna-drawer placement="end"></luna-drawer> <!-- Right (default) --> <luna-drawer placement="top"></luna-drawer> <!-- Top --> <luna-drawer placement="bottom"></luna-drawer> <!-- Bottom --> <!-- Custom Size --> <luna-drawer style="--luna-drawer-size: 400px;"></luna-drawer> <!-- Contained Drawer --> <div style="position: relative; height: 400px;"> <luna-drawer id="contained" contained> Contained drawer content </luna-drawer> </div>