HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
DrawerView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA panel that slides in from an edge.ExperimentalSince 0.1.0OverlaysUsageimport'@fusion.dev/helix/drawer'import'@fusion.dev/helix-headless/drawer'Preview
API ReferenceRoothelix-drawerA panel that slides in from an edge.
PropTypeDefaultDescriptionclosedBy"any"|"closerequest"|"none"Which close requests the browser answers on its own.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.labelstring""Accessible name for the panel.material"frosted"|"glass"Whether the panel is glass rather than opaque.modalbooleantrueWhether the drawer blocks the page behind it.openbooleanWhether the element is open.placement"start"|"end"|"top"|"bottom"Which edge the drawer comes from.returnValuestringWhat the dialog closed with, the way `<dialog>` reports it.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The drawer's content.headerContent pinned above the scrolling area.
EventTypeDescriptioncloseEventRelayed, because the platform's own does not escape.helix-before-closeHelixBeforeCloseEventFired before the panel closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before the drawer opens or closes. Cancelable: refusing it takes the decision and nothing moves.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionrequestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.toggleOpen() => booleanRequests the opposite of the current state.
CSS PropertyDescription--drawer-backdropFilter applied behind a `material="glass"` drawer. Follows the theme's material policy; set it to override the strength on one drawer.--drawer-background-colorSurface behind the panel.--drawer-border-colorColor of the panel's edge.--drawer-border-widthWidth of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise.--drawer-paddingPadding inside the panel.--drawer-padding-block-startPadding above the content, which clears the close control.--drawer-radiusCorner radius on the edges that face the page.--drawer-scrimThe wash over the page behind the drawer. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one.--drawer-shadowLift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default.--drawer-sizeWidth or height of the panel.
Roothelix-headless-drawerA panel that slides in from an edge.
PropTypeDefaultDescriptionclosedBy"any"|"closerequest"|"none"Which close requests the browser answers on its own.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.labelstring""Accessible name for the panel.modalbooleantrueWhether the drawer blocks the page behind it.openbooleanWhether the element is open.placement"start"|"end"|"top"|"bottom"Which edge the drawer comes from.returnValuestringWhat the dialog closed with, the way `<dialog>` reports it.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The drawer's content.headerContent pinned above the scrolling area.
EventTypeDescriptioncloseEventRelayed, because the platform's own does not escape.helix-before-closeHelixBeforeCloseEventFired before the panel closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before the panel opens. Cancelable: refusing it takes the decision and nothing moves.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionrequestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.toggleOpen() => booleanRequests the opposite of the current state.
ExamplesNameDescriptionEventsFour announcements for one panel, and `close` is the platform's own.InlineA panel beside the page rather than over it, with the page still usable behind it.MaterialGlass, so the page it covers stays visible under its own scrim.PlacementsThe four edges a drawer can arrive from.PreviewA panel from the edge, opened by a button.PreviewA panel from the edge, opened by a button.