Layout & Containers
Drawer
A panel that slides in from an edge, built on the native <dialog> element. temporary (default) shows a modal with a backdrop and focus trap; persistent shows a non-modal panel that doesn't block the page.
Preview
Section titled “Preview”Click to open. The drawer is a native modal — backdrop, focus trap, and closes on Esc, backdrop click, or the close button.
Refine your results.
<nana-button onclick="this.parentElement.querySelector('nana-drawer').show()">
Open drawer
</nana-button>
<nana-drawer placement="end" size="md" label="Filters" close-button>
<p style="margin: 0 0 1rem">Refine your results.</p>
<nana-input
label="Keyword"
placeholder="Search…"
style="width: 100%"
></nana-input>
<nana-button
slot="footer"
variant="ghost"
onclick="this.closest('nana-drawer').close()"
>
Cancel
</nana-button>
<nana-button
slot="footer"
variant="primary"
onclick="this.closest('nana-drawer').close()"
>
Apply
</nana-button>
</nana-drawer>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/drawer";Basic usage
Section titled “Basic usage”Open with the open attribute or .show(); close with .close(), the close
button, backdrop click, or Esc.
<nana-button onclick="document.getElementById('d').show()">Open</nana-button>
<nana-drawer id="d" placement="end" label="Settings" close-button> <p>Drawer body content.</p> <nana-button slot="footer" variant="primary" onclick="document.getElementById('d').close()"> Save </nana-button></nana-drawer>Placements
Section titled “Placements”The placement attribute picks the edge — start, end (default), top, or
bottom.
<nana-button onclick="this.nextElementSibling.show()">Start</nana-button>
<nana-drawer placement="start" label="Start" close-button>
Slides from the start edge.
</nana-drawer>
<nana-button onclick="this.nextElementSibling.show()">End</nana-button>
<nana-drawer placement="end" label="End" close-button>
Slides from the end edge.
</nana-drawer>
<nana-button onclick="this.nextElementSibling.show()">Top</nana-button>
<nana-drawer placement="top" label="Top" close-button>
Slides from the top.
</nana-drawer>
<nana-button onclick="this.nextElementSibling.show()">Bottom</nana-button>
<nana-drawer placement="bottom" label="Bottom" close-button>
Slides from the bottom.
</nana-drawer>size sets the panel’s width (start/end) or height (top/bottom):
sm (16rem), md (20rem, default), lg (28rem), xl (36rem), or full
(100%). Override any of them with --nana-drawer-size.
<nana-button onclick="this.nextElementSibling.show()">Small</nana-button>
<nana-drawer placement="end" size="sm" label="Small · 16rem" close-button>
The small drawer.
</nana-drawer>
<nana-button onclick="this.nextElementSibling.show()">Medium</nana-button>
<nana-drawer placement="end" size="md" label="Medium · 20rem" close-button>
The default drawer.
</nana-drawer>
<nana-button onclick="this.nextElementSibling.show()">Large</nana-button>
<nana-drawer placement="end" size="lg" label="Large · 28rem" close-button>
The large drawer.
</nana-drawer>
<nana-button onclick="this.nextElementSibling.show()">XL</nana-button>
<nana-drawer placement="end" size="xl" label="XL · 36rem" close-button>
The extra-large drawer.
</nana-drawer>
<nana-button onclick="this.nextElementSibling.show()">Full</nana-button>
<nana-drawer placement="end" size="full" label="Full · 100%" close-button>
The full-size drawer.
</nana-drawer>Header, footer & close button
Section titled “Header, footer & close button”Give it a title with label (and close-button for a built-in ✕), or take
full control with the header and footer slots.
<nana-drawer placement="end" close-button> <div slot="header">Custom header</div>
Body content…
<div slot="footer"> <nana-button variant="ghost">Cancel</nana-button> <nana-button variant="primary">Save</nana-button> </div></nana-drawer>Persistent (non-modal)
Section titled “Persistent (non-modal)”Add persistent for a non-modal panel that doesn’t dim or block the page — ideal
for a filter rail or navigation that stays open alongside the content.
<nana-drawer placement="start" persistent open label="Filters">
</nana-drawer>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
ariaLabel | aria-label | string | null | null | Accessible label (falls back to label) |
closeButton | close-button | boolean | false | Show a built-in close button in the header |
closeLabel | close-label | string | 'Close' | Accessible label for the close button |
label | label | string | '' | Header title text (ignored when the header slot is used) |
noBackdropClose | no-backdrop-close | boolean | false | Don't close on backdrop click (temporary only) |
noEscapeClose | no-escape-close | boolean | false | Don't close on Escape |
open | open | boolean | false | Whether the drawer is open |
persistent | persistent | boolean | false | Persistent (non-modal, no backdrop) vs temporary (modal) |
placement | placement | DrawerPlacement | 'end' | Which edge the drawer slides from |
size | size | DrawerSize | 'md' | Panel size — width (start/end) or height (top/bottom) |
Events
| Event | Description |
|---|---|
nana-open | Fired after opening |
nana-close | Fired after closing |
Slots
| Slot | Description |
|---|---|
(default) | Body content |
header | Header content (overrides the label attribute) |
footer | Footer actions |
CSS parts
| Part | Description |
|---|---|
::part(dialog) | The native <dialog> |
::part(panel) | The sliding panel |
::part(header) | The header row |
::part(close-button) | The built-in close button |
CSS custom properties
| Property | Description |
|---|---|
--nana-drawer-size | Panel width (start/end) or height (top/bottom) |
--nana-drawer-backdrop | Backdrop fill behind the panel |
--nana-drawer-bg | Panel background |
--nana-drawer-duration | How long the panel takes to slide in |
--nana-drawer-ease | Easing curve for the opening slide |
--nana-drawer-ease-in | Easing curve for the closing slide |
--nana-drawer-exit-duration | How long the panel takes to slide out |
--nana-drawer-sheet-radius | Top corner radius when the drawer opens as a bottom sheet on phones |
Methods
Section titled “Methods”| Method | Description |
|---|---|
show() | Open the drawer |
close() | Close the drawer |
Events
Section titled “Events”| Event | Description |
|---|---|
nana-open | Fired after opening |
nana-close | Fired after closing |
| Slot | Description |
|---|---|
(default) | Drawer body content |
header | Custom header (overrides the label attribute) |
footer | Footer actions, pinned to the bottom |
CSS Variables
Section titled “CSS Variables”| Variable | Description |
|---|---|
--nana-drawer-size | Panel width (start/end) or height (top/bottom) |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
dialog | The native <dialog> element |
panel | The sliding panel |
header | The header row |
close-button | The built-in close button |
Accessibility
Section titled “Accessibility”- Native dialog semantics
- Focus trapped while open
- Escape to close
- Focus returns to trigger
- WCAG 2.2 AA contrast
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Drawer interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook