HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
DrawerView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA panel that slides in from an edge.StableSince 0.1.0OverlaysUsageimport'@fusion.dev/helix/drawer'import'@fusion.dev/helix-headless/drawer'Preview
API ReferenceRoothelix-drawerA panel that slides in from an edge.
PropTypeDescriptionclosedBy"any"|"closerequest"|"none"Which close requests the browser handles on its own.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.dismissiblebooleanDefaultfalseDraws a control that closes the drawer, in the corner where the title is.dismissLabelstringDefault"Close"The close control's accessible name. Translate it with the rest of your
interface.fallbackLabelstringDefault"Drawer"The panel's name where nothing names it: no label, no heading in the
header slot, and no aria-labelledby on the host.labelstringDefault""Accessible name for the panel. When it is empty, the heading in the
header slot names the panel.material"frosted"|"glass"Makes the panel translucent, as frosted or glass. When it is not set,
the panel is opaque.modalbooleanDefaulttrueWhether the drawer blocks the page behind it.openbooleanWhether the element is open.persistentbooleanDefaultfalseStops Escape, a press outside, and a swipe from closing the drawer, for a
drawer that has to be answered.placement"start"|"end"|"top"|"bottom"Which edge the drawer comes from.returnValuestringWhat the dialog closed with, the way <dialog> reports it.snapPointsstringDefault""The fractions of the panel a reader can leave on screen, as a list such as
0.5 1. The drawer opens at the smallest, and a swipe comes to rest at the
nearest, or closes the drawer below the smallest.swipebooleanDefaulttrueWhether a touch or a pen can swipe the drawer away. swipe="false" turns
it off, for a panel whose content has its own use for the gesture, such as
a map.
ReadTypeDescriptionsnapnumberThe fraction of the panel on screen at the snap point it rests at, such as
0.5. It is 1, the whole panel, while the drawer is closed or has no
snap-points.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The drawer's content.dismiss-iconReplaces the glyph inside the close control.footerContent pinned below the scrolling area, such as the drawer's actions.headerContent pinned above the scrolling area.
EventTypeDescriptioncloseEventSent from the host after the drawer closes, because the native close event does not leave the shadow root.helix-before-closeHelixBeforeCloseEventFired before the panel closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before the panel opens, and cancelable. Canceling it keeps the panel closed.toggleToggleEventSent when the drawer opens or closes, with newState and oldState.
MethodTypeDescriptionclose(returnValue: string) => voidRequests that the drawer close, and takes what it closed with, the way
Dialog.close(value) does. A helix-before-close listener can refuse it,
and then the value is not kept.requestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.show() => voidOpens the drawer.snapTo(point: number) => voidMoves the open panel to rest at the snap point nearest point, a fraction
of the panel such as 1 for the whole of it.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontentThe scrolling content region.dismissThe close control, drawn when the drawer is dismissible, in the corner by the title.dismiss-markThe glyph on the close control, where none is slotted.footerThe footer region.headerThe header region.panelThe sliding panel.
CSS PropertyDescription--drawer-backdropFilter applied behind a frosted or glass drawer. Follows the theme's material policy. Set it to change 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 stands out by its shadow unless your theme sets a border.--drawer-paddingPadding inside the panel.--drawer-padding-block-startPadding above the header. It is one step larger than the other three sides, so the first line clears the window's edge. Falls back to --drawer-padding, so setting that alone sets all four sides.--drawer-radiusCorner radius on the edges that face the page.--drawer-scrimThe tint over the page behind the drawer. Set it on the host, because a var() written inside ::backdrop cannot read a token.--drawer-shadowShadow under the panel. Follows --helix-shadow-floating. A floating surface can sit over any content, so it has a shadow by default.--drawer-sizeWidth or height of the panel.--drawer-swipe-xHow far a swipe, or a snap point, has moved the panel across, in pixels, toward the right.--drawer-swipe-yHow far a swipe, or a snap point, has moved the panel down, in pixels.
Custom stateDescriptionenteringFrom the moment the drawer opens until its entrance has finished.exitingFrom the moment the drawer closes until its exit has finished.openWhile the drawer is open.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.snappedWhile the panel rests at a snap point that shows less than the whole panel.
Roothelix-headless-drawerA panel that slides in from an edge.
PropTypeDescriptionclosedBy"any"|"closerequest"|"none"Which close requests the browser handles on its own.defaultOpenbooleanDefaultfalseWhether the element starts open. Ignored once open is written.dismissiblebooleanDefaultfalseDraws a control that closes the drawer, in the corner where the title is.dismissLabelstringDefault"Close"The close control's accessible name. Translate it with the rest of your
interface.fallbackLabelstringDefault"Drawer"The panel's name where nothing names it: no label, no heading in the
header slot, and no aria-labelledby on the host.labelstringDefault""Accessible name for the panel. When it is empty, the heading in the
header slot names the panel.modalbooleanDefaulttrueWhether the drawer blocks the page behind it.openbooleanWhether the element is open.persistentbooleanDefaultfalseStops Escape, a press outside, and a swipe from closing the drawer, for a
drawer that has to be answered.placement"start"|"end"|"top"|"bottom"Which edge the drawer comes from.returnValuestringWhat the dialog closed with, the way <dialog> reports it.snapPointsstringDefault""The fractions of the panel a reader can leave on screen, as a list such as
0.5 1. The drawer opens at the smallest, and a swipe comes to rest at the
nearest, or closes the drawer below the smallest.swipebooleanDefaulttrueWhether a touch or a pen can swipe the drawer away. swipe="false" turns
it off, for a panel whose content has its own use for the gesture, such as
a map.
ReadTypeDescriptionsnapnumberThe fraction of the panel on screen at the snap point it rests at, such as
0.5. It is 1, the whole panel, while the drawer is closed or has no
snap-points.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The drawer's content.dismiss-iconReplaces the glyph inside the close control.footerContent pinned below the scrolling area, such as the drawer's actions.headerContent pinned above the scrolling area.
EventTypeDescriptioncloseEventSent from the host after the drawer closes, because the native close event does not leave the shadow root.helix-before-closeHelixBeforeCloseEventFired before the panel closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before the panel opens, and cancelable. Canceling it keeps the panel closed.toggleToggleEventSent when the drawer opens or closes, with newState and oldState.
MethodTypeDescriptionclose(returnValue: string) => voidRequests that the drawer close, and takes what it closed with, the way
Dialog.close(value) does. A helix-before-close listener can refuse it,
and then the value is not kept.requestOpen(next: boolean) => booleanRequests that the element open or close, and returns whether the change
was applied.show() => voidOpens the drawer.snapTo(point: number) => voidMoves the open panel to rest at the snap point nearest point, a fraction
of the panel such as 1 for the whole of it.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontentThe scrolling content region.dismissThe close control, drawn when the drawer is dismissible.dismiss-markThe glyph on the close control, where none is slotted.footerThe footer region.headerThe header region.panelThe sliding panel.
CSS PropertyDescription--drawer-swipe-xHow far a swipe, or a snap point, has moved the panel across, in pixels, toward the right.--drawer-swipe-yHow far a swipe, or a snap point, has moved the panel down, in pixels.
Custom stateDescriptionenteringFrom the moment the drawer opens until its entrance has finished.exitingFrom the moment the drawer closes until its exit has finished.openWhile the drawer is open.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.snappedWhile the panel rests at a snap point that shows less than the whole panel.
Examples
NameDescriptionEventsThe four events a drawer sends: helix-before-open, helix-before-close, toggle, and the native close.MaterialA glass drawer, which shows the page behind it through its own scrim.PlacementsA drawer from each of the four edges.PreviewA panel that slides in from an edge, opened by a button.PreviewA panel that slides in from an edge, opened by a button.SheetA bottom sheet that rests half open, with its actions in the footer. Swipe it up to open it fully, or down to close it.