Drawer
Props, sides, tiers, scopes, hooks and helpers of the shared drawer.
- Packages
- ab-nextjs-components
- Client Component
- Stable
These tables are the shared drawer contract from ab-nextjs-components/ab-drawer: props, sides, tiers, scopes, the hooks, and the gesture helpers. They are not every drawer in the package. Product drawers (navigation, outline, search, settings) are separate components and are listed under Not on this page.
AbDrawerProps
ab-nextjs-components/ab-drawer
| Name | Type | Default | Description |
|---|---|---|---|
openRequired | boolean | No default | 🚪 controlled |
onCloseRequired | () => void | No default | ⎋ Escape, scrim click and the close button call it |
scope | AbDrawerScope | undefined | 'app' | 🗺️ which box clips it (default app) |
side | AbDrawerSide | undefined | 'bottom' | 🧭 default bottom |
title | ReactNode | No default | 🏷️ a string becomes the <h2> that labels the dialog |
'aria-labelledby' | string | undefined | No default | ♿ your own visible title id (wins over title) |
'aria-label' | string | undefined | No default | ♿ when there is no visible title |
id | string | undefined | No default | 🆔 the dialog id (aria-controls target) |
children | ReactNode | No default | 📄 the body (it scrolls on its own) |
footer | ReactNode | No default | 🔚 actions row (stays put) |
size | string | undefined | No default | 📏 width (start/end/left/right) or height (top/bottom), e.g. 360px |
modal | boolean | undefined | true | 🔒 trap focus + make the rest of the scope inert (default true) |
closeLabel | string | undefined | 'Close' | 🌍 default "Close" |
noJsFallback | boolean | undefined | true | 🧩 D41: without JS, render the content in flow (default true) |
initialFocus | "first" | "panel" | (string & {}) | undefined | 'first' | 🎯 on open: the first control (default), the panel itself, or (0.2.0) a CSS selector inside the panel, e.g. [role=radio][aria-checked=true] |
tier | AbDrawerTier | undefined | No default | 🥞 stacking tier: 'aside' (z 60) < 'nav' (61) < 'sheet' (62) |
swipe | boolean | undefined | false | 🤏 side drawers: swipe the sheet back toward its edge to close (30% of the width or ≥ 0.5px/ms) |
snapPoints | boolean | undefined | false | 🧲 bottom only, below 768px: snaps at 70% (S1) and full height (S2) with a handle; gestures per the spec |
defaultSnap | AbSheetSnap | undefined | 'partial' | 🧲 where it opens (default 'partial'; e.g. 'full' for a search sheet) |
fullOnly | boolean | undefined | false | 🧲 no 70% stop: opens at full height, a gentle drag springs back, a hard one closes (search: the keyboard is up) |
onSnapChange | ((snap: AbSheetSnap) => void) | undefined | No default | 🔔 |
handleLabels | { expand: string; collapse: string; } | undefined | unknown | ♿ the handle button (default "Expand" / "Collapse") |
centerIn | "main" | undefined | No default | 💻 bottom only, 768px and up: centred in the main pane, min(640px, main width) wide, ≤ 70% tall |
returnFocus | string | undefined | unknown | ↩️ selector focused on close when there was no focusable opener (an edge swipe); default AB_DRAWER_RETURN_FOCUS (the header / brand logo) |
closeIcon | ReactNode | unknown | ✕ the close glyph (default a text ✕) |
headerStart | ReactNode | No default | 🏷️ header content that does NOT label the dialog (e.g. a logo; then use aria-label). title wins |
className | string | undefined | No default | 🏷️ |
AbDrawerSide
ab-nextjs-components/ab-drawer
'top' | 'bottom' | 'left' | 'right' | 'start' | 'end'AbDrawerTier
ab-nextjs-components/ab-drawer
'aside' | 'nav' | 'sheet'AbDrawerScope
ab-nextjs-components/ab-drawer
'app' | 'main' | 'aside'AbSheetSnap
ab-nextjs-components/ab-drawer
'partial' | 'full'UseAbDrawer
ab-nextjs-components/ab-drawer
| Name | Type | Default | Description |
|---|---|---|---|
scopeRequired | AbDrawerScope | No default | 🗺️ |
idRequired | string | No default | 🆔 the drawer id (aria-controls target) |
openRequired | boolean | No default | 🚪 is it open? |
showRequired | () => void | No default | ➕ open it |
closeRequired | () => void | No default | ➖ close it (Escape / scrim / buttons) |
toggleRequired | () => void | No default | 🔁 |
setOpenRequired | (open: boolean) => void | No default | 🎚️ controlled setter |
triggerPropsRequired | { 'aria-expanded': boolean; 'aria-controls': string; 'aria-haspopup': "dialog"; onClick: () => void; } | No default | 🔘 spread on the trigger button: aria-expanded / aria-controls / aria-haspopup / onClick |
drawerPropsRequired | { id: string; scope: AbDrawerScope; open: boolean; onClose: () => void; } | No default | 🗄️ spread on the drawer: id / scope / open / onClose |
useAbDrawer
ab-nextjs-components/ab-drawer
useAbDrawer(scope: AbDrawerScope = 'app', options: { defaultOpen?: boolean; id?: string } = {}): UseAbDrawer| Name | Type | Default | Description |
|---|---|---|---|
scope | AbDrawerScope | 'app' | |
options | { defaultOpen?: boolean; id?: string } | {} |
UseAbEdgeSwipeOptions
ab-nextjs-components/ab-drawer
| Name | Type | Default | Description |
|---|---|---|---|
edgeRequired | "left" | "right" | No default | 🧱 which edge the swipe starts from (left = left-to-right, opens the left drawer) |
onOpenRequired | () => void | No default | 🚪 called when the swipe commits |
enabled | boolean | undefined | true | 🎚️ e.g. false while that drawer is open, or when the page has no aside (default true) |
width | number | undefined | 320 | 📏 the drawer width the 30% rule uses (default 320) |
pointerTypes | readonly string[] | undefined | ['touch', 'pen'] | 🖐️ default touch + pen (a mouse never edge-swipes) |
maxWidth | number | undefined | No default |
useAbEdgeSwipe
ab-nextjs-components/ab-drawer
useAbEdgeSwipe({ edge, onOpen, enabled = true, width = 320, pointerTypes = ['touch', 'pen'], maxWidth }: UseAbEdgeSwipeOptions): void| Name | Type | Default | Description |
|---|---|---|---|
{ edge, onOpen, enabled = true, width = 320, pointerTypes = ['touch', 'pen'], maxWidth }Required | UseAbEdgeSwipeOptions | No default |
AB_ASIDE_DRAWER_MAX_WIDTH
ab-nextjs-components/ab-drawer
1179
1179AB_SWIPE
ab-nextjs-components/ab-drawer
{
ratio: 0.3, // 📏 30% of the travel / sheet / drawer width
velocity: 0.5, // ⚡ px per ms: at or above this a release counts as a fast swipe
edge: 24, // 🧱 edge zone width (px) for the side-drawer swipes
standaloneInset: 16, // 📱 iOS standalone: the zone starts 16px in (the system owns the very edge)
slop: 8, // 🫳 px of movement before a press becomes a drag (taps stay taps)
secondSwipe: 24, // ✌️ px: after a gentle return to S1, a swipe down this long closes (the "second swipe")
}| Name | Type | Default | Description |
|---|---|---|---|
ratio | 0.3 | 0.3 | 📏 30% of the travel / sheet / drawer width |
velocity | 0.5 | 0.5 | ⚡ px per ms: at or above this a release counts as a fast swipe |
edge | 24 | 24 | 🧱 edge zone width (px) for the side-drawer swipes |
standaloneInset | 16 | 16 | 📱 iOS standalone: the zone starts 16px in (the system owns the very edge) |
slop | 8 | 8 | 🫳 px of movement before a press becomes a drag (taps stay taps) |
secondSwipe | 24 | 24 | ✌️ px: after a gentle return to S1, a swipe down this long closes (the "second swipe") |
AB_DRAWER_DURATION
ab-nextjs-components/ab-drawer
240
240AB_PREVIEW_SCOPE_SELECTOR
ab-nextjs-components/ab-drawer
"[data-ab-preview-scope]"
'[data-ab-preview-scope]'AB_DRAWER_RETURN_FOCUS
ab-nextjs-components/ab-drawer
"[data-ab-part=\"mobile-header\"] a[href], [data-ab-part=\"app-bar-brand\"] a[href], [data-ab-part=\"sidebar-logo\"] a[href]"
'[data-ab-part="mobile-header"] a[href], [data-ab-part="app-bar-brand"] a[href], [data-ab-part="sidebar-logo"] a[href]'getAbDrawerHost
ab-nextjs-components/ab-drawer
getAbDrawerHost(scope: AbDrawerScope, from?: Element | null): HTMLElement| Name | Type | Default | Description |
|---|---|---|---|
scopeRequired | AbDrawerScope | No default | |
from | Element | null | No default |
resolveAbSheetRelease
ab-nextjs-components/ab-drawer
resolveAbSheetRelease({ from, dy, velocity, partialHeight, fullHeight, returned = false }: AbSheetReleaseInput): AbSheetRelease| Name | Type | Default | Description |
|---|---|---|---|
{ from, dy, velocity, partialHeight, fullHeight, returned = false }Required | AbSheetReleaseInput | No default |
resolveAbSideRelease
ab-nextjs-components/ab-drawer
resolveAbSideRelease({ distance, velocity, width }: AbSideReleaseInput): boolean| Name | Type | Default | Description |
|---|---|---|---|
{ distance, velocity, width }Required | AbSideReleaseInput | No default |
Not on this page
AbBottomDrawer(ab-nextjs-components/ab-bottom-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbBottomDrawerProps(ab-nextjs-components/ab-bottom-drawer) — Product drawer props. This pass documents the shared drawer contract, not each product drawer.isAbScrolledInside(ab-nextjs-components/ab-bottom-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.useAbSwipeDown(ab-nextjs-components/ab-bottom-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.UseAbSwipeDownOptions(ab-nextjs-components/ab-bottom-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbConfirmDrawer(ab-nextjs-components/ab-confirm-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbConfirmDrawerProps(ab-nextjs-components/ab-confirm-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbDrawer(ab-nextjs-components/ab-drawer) — The component value. Its props are AbDrawerProps on this page.AbDrawerList(ab-nextjs-components/ab-drawer-list) — Product drawer export. This pass documents the shared drawer contract, not this name.AbDrawerListItem(ab-nextjs-components/ab-drawer-list) — Product drawer export. This pass documents the shared drawer contract, not this name.AbDrawerListProps(ab-nextjs-components/ab-drawer-list) — Product drawer export. This pass documents the shared drawer contract, not this name.AbDrawerScope(ab-nextjs-components/ab-drawer/use-ab-drawer) — Documented at ab-nextjs-components/ab-drawer. This path exports the same name.useAbDrawer(ab-nextjs-components/ab-drawer/use-ab-drawer) — Documented at ab-nextjs-components/ab-drawer. This path exports the same name.UseAbDrawer(ab-nextjs-components/ab-drawer/use-ab-drawer) — Documented at ab-nextjs-components/ab-drawer. This path exports the same name.AbNavDrawer(ab-nextjs-components/ab-nav-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbNavDrawerItem(ab-nextjs-components/ab-nav-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbNavDrawerProps(ab-nextjs-components/ab-nav-drawer) — Product drawer props. This pass documents the shared drawer contract, not each product drawer.AbNavDrawerSection(ab-nextjs-components/ab-nav-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AB_SEARCH_RECENT_KEY(ab-nextjs-components/ab-search-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbSearchDrawer(ab-nextjs-components/ab-search-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbSearchDrawerGroup(ab-nextjs-components/ab-search-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbSearchDrawerItem(ab-nextjs-components/ab-search-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbSearchDrawerLabels(ab-nextjs-components/ab-search-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbSearchDrawerProps(ab-nextjs-components/ab-search-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.addAbSearchRecent(ab-nextjs-components/ab-search-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.highlightAbSearch(ab-nextjs-components/ab-search-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbSettingsDrawer(ab-nextjs-components/ab-settings-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbSettingsDrawerLabels(ab-nextjs-components/ab-settings-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbSettingsDrawerProps(ab-nextjs-components/ab-settings-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbSettingsLocale(ab-nextjs-components/ab-settings-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbSettingsTheme(ab-nextjs-components/ab-settings-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbTocDrawer(ab-nextjs-components/ab-toc-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.AbTocDrawerLink(ab-nextjs-components/ab-toc-drawer) — Product drawer link shape. This pass does not add a page for the outline drawer.AbTocDrawerProps(ab-nextjs-components/ab-toc-drawer) — Product drawer export. This pass documents the shared drawer contract, not this name.
Not a public import
These names are not exported from a package entry. There is no supported import path.
AbSheetRelease— Declared beside resolveAbSheetRelease. ab-nextjs-components/ab-drawer does not re-export it, and no exports entry points at its source file.AbSheetReleaseInput— Parameter type of resolveAbSheetRelease. ab-nextjs-components/ab-drawer does not re-export it, and no exports entry points at its source file.AbSideReleaseInput— Parameter type of resolveAbSideRelease. ab-nextjs-components/ab-drawer does not re-export it, and no exports entry points at its source file.isInAbEdgeZone— ab-nextjs-components/ab-drawer does not re-export it, and no exports entry points at its source file.createAbVelocityTracker— ab-nextjs-components/ab-drawer does not re-export it, and no exports entry points at its source file.isInAbHorizontalScroller— ab-nextjs-components/ab-drawer does not re-export it, and no exports entry points at its source file.