Drawer
A native top-layer edge panel with logical placement, deterministic dismissal, focus restoration and independently composable sections.
GET STARTED
Import
Import only the standalone sections used by the template.
Basic composition
Header and footer remain optional. The body owns independent scrolling while the panel stays in the browser top layer.
Logical positions
Start and end follow document direction. Top and bottom span the viewport width using the same native lifecycle.
Controlled Signal state
open is a model input, so one state source can drive template and imperative interactions.
Non-modal panel
Set modal false when the page must remain interactive. The Popover top layer keeps the panel above the topbar without making background content inert.
Dismiss policy
Escape and backdrop dismissal can be disabled independently. A visible close path must always remain.
Lifecycle and close reasons
opened confirms top-layer entry. closed reports API, Escape, backdrop, close-button or native intent.
Unstyled and typed slots
Headless mode retains native dialog behavior, placement, focus and structural hooks while consumer classes own every visual decision.
Beta boundary
ACCESSIBILITY
Native focus lifecycle
Drawer builds on the native dialog top layer without global keyboard listeners or synthetic focus traps.
Native semantics
Modal mode uses showModal(); non-modal mode uses show(). Modal background content becomes inert through the browser.
Accessible name
Prefer a visible heading connected through ariaLabelledby. Use ariaLabel when no visible title exists and ariaDescribedby for supporting context.
Focus lifecycle
neuralDrawerInitialFocus receives focus after opening. The original trigger regains focus after every completed close.
Keyboard
Escape follows closeOnEscape. Modal Tab containment is native. Every blocked dismissal flow must expose an obvious focusable close or completion action.
RTL positions
Start opens from the right and end from the left under RTL. Top and bottom remain unchanged.
SSR and hydration
Server output remains a closed native dialog. Top-layer, active-element and focus operations run only after browser hydration.
PUBLIC API
Drawer contract
All runtime declarations follow the canonical NeuralDrawer* naming standard.
Inputs
| Name | Type | Default | Purpose |
|---|---|---|---|
open | ModelSignal<boolean> | false | Controlled visible state. |
position | 'start' | 'end' | 'top' | 'bottom' | 'end' | Logical viewport edge. |
modal | boolean | true | Uses native dialog top layer when true and non-modal Popover top layer when false. |
closable | boolean | true | Renders localized close action. |
closeOnEscape | boolean | true | Allows Escape dismissal. |
dismissibleBackdrop | boolean | true | Allows modal backdrop dismissal. |
ariaLabel | string | null | null | Direct accessible name. |
ariaLabelledby | string | null | null | Visible heading ID. |
ariaDescribedby | string | null | null | Description ID. |
closeLabel | string | null | locale | Close action label override. |
closeIcon | string | 'nt-x' | Neural Icons glyph suffix. |
unstyled | boolean | false | Removes NeuralNg visual classes. |
drawerClass | string | '' | Additive native dialog class. |
classes | NeuralDrawerClasses | {} | Typed additive class slots. |
Outputs
openChangebooleanGenerated by the open model.openedvoidNative drawer entered the top layer.closedNeuralDrawerCloseCompleted close with exact reason.Methods
show()Opens the drawer.
toggle()Toggles controlled state.
close(reason = 'api', returnValue = '', event?)Closes with deterministic metadata.
Sections
neural-drawer-header | NeuralDrawerHeader | headerClass |
neural-drawer-body | NeuralDrawerBody | bodyClass |
neural-drawer-footer | NeuralDrawerFooter | footerClass |
neuralDrawerInitialFocus | NeuralDrawerInitialFocus | Initial focus marker |
Class slots
rootNative dialog panel.
headerProjected header section.
bodyIndependently scrollable body.
footerAction section.
closeButtonLocalized close action.
closeIconClose Neural Icon.
Types
NeuralDrawerPosition'start' | 'end' | 'top' | 'bottom'
NeuralDrawerCloseReason'api' | 'escape' | 'backdrop' | 'close-button' | 'native'
NeuralDrawerClose{ reason, returnValue, nativeEvent? }
NeuralDrawerClasses{ root?, header?, body?, footer?, closeButton?, closeIcon? }
Deprecated aliases
DrawerComponent, the old section component names and DrawerInitialFocusDirective remain only for compatibility. New code and generated output must use NeuralDrawer*.
DESIGN TOKENS
Drawer tokens
Neutral defines the production reference surface. Glass and Futuristic override the same stable contract.
Surface
--neural-drawer-colorComponent foreground color.
--neural-drawer-backgroundComponent background surface.
--neural-drawer-shadowComponent box shadow.
--neural-drawer-backdropComponent backdrop color.
--neural-drawer-backdrop-filterComponent backdrop filter effect.
Layout
--neural-drawer-sizeComponent width and height.
--neural-drawer-close-insetClose logical inset from its containing edge.
Sections
--neural-drawer-header-paddingHeader internal spacing.
--neural-drawer-header-borderHeader border shorthand.
--neural-drawer-body-paddingBody internal spacing.
--neural-drawer-footer-paddingFooter internal spacing.
--neural-drawer-footer-borderFooter border shorthand.
Motion
--neural-drawer-durationComponent animation duration.
--neural-drawer-leave-durationComponent leave animation duration.
--neural-drawer-easingComponent animation easing curve.