Layout slots
Slot props for the app, main and aside layouts, plus the page provider.
- Packages
- ab-nextjs-core
- Client Component
- Stable
These tables are the slot props of AbAppLayout, AbMainLayout and AbAsideLayout, and the page-provider API next to them (useAbPage). A heading marked server is that package's server entry. It declares the same members as the client entry, so the members are not repeated. getAbMainScroller is not a core export. It lives on Scroll spy, from ab-nextjs-components/ab-toc.
AbAppLayoutProps (client)
ab-nextjs-core/ab-app-layout
| Name | Type | Default | Description |
|---|---|---|---|
orientationRequired | "vertical" | "horizontal" | No default | |
className | string | undefined | No default | |
hidden | boolean | undefined | No default | |
pageName | string | undefined | No default | |
header | ReactNode | No default | |
sideBar | ReactNode | No default | |
content | ReactNode | No default | |
navBar | ReactNode | No default | |
footer | ReactNode | No default | |
children | ReactNode | No default | |
menus | ReactNode | No default | |
variant | "default" | "panes" | undefined | 'default' | 🧭 0.1.6 (G17): 'panes' = the docs shell (4 breakpoints, rail, overlay aside). Default keeps the old layout. |
railCollapsed | boolean | undefined | false | 🧷 0.1.6: collapse the sidebar to the icon rail (tablet and up, variant="panes"). |
tabletHeader | "header" | "main" | undefined | 'header' | 📟 0.2.0 (P2): 'main' = on tablet (768–1179) hide the app header and show AbMainLayout's mainHeader instead (hidden at other widths). Default 'header'. |
mobileHeader | "header" | "main" | undefined | 'header' | 📱 0.2.1: 'main' = below 768px hide the app header and show AbMainLayout's mainHeader as the 56px mobile bar (16px inset, 1px divider). Default 'header' (unchanged). |
mainHeaderAt | "auto" | "all" | undefined | 'auto' | 📌 0.2.3: 'all' = AbMainLayout's mainHeader stays visible at EVERY width (with mobileHeader="main" it is the mobile bar below 768px, and an extra header row under the app header from 768px), so ONE header can carry e.g. a counter row everywhere instead of rendering it twice. Default 'auto' (unchanged). |
asideBelow | "hidden" | "inline-before-main" | "inline-in-main" | undefined | 'hidden' | 📑 0.2.3: where the aside pane goes below the laptop breakpoint (< 1180px). 'hidden' (default) = unchanged: an overlay sheet / right drawer opened by the TOC button. 'inline-before-main' = the SAME aside element (rendered once, no duplicate DOM) sits in the flow above the main pane (mobile: aside · main · bottom bar; tablet: sidebar | aside over main), e.g. the Welcome live playground. For any other spot, render your aside content into your own node (a portal) and keep 'hidden'. 📜 0.2.3 'inline-in-main' = the SAME aside element joins the main pane's ONE scroller below 1180px, after the main header (and after AbMainLayout's asideAnchor block when given): v6 phone order header bar · counter · scene · text · nav, nothing pinned. ≥ 1180px: the normal side pane. |
surface | "page" | undefined | No default | 🎠 0.2.3: 'page' sets data-ab-surface="page": with theme ≥ 0.3.7 every pane paints the v6 page surface (--ab-color-welcome-pane / -main) instead of the white ≥ 1920px light panes. Default: none. |
asideDrawerAt | "mobile" | undefined | No default | 📱 0.2.3: 'mobile' = below 768px the aside is a RIGHT DRAWER (out of the page flow until opened by AbAsideDrawerTrigger / useAbPage().setAsideOpenOnMobile(true)), while asideBelow="inline-in-main" still puts the SAME element inline at 768–1179px. Rendered once. Default: none (unchanged). |
mainBarPin | "never" | "always" | undefined | No default | 📌 0.2.3: mirror of AbMainLayout mainBarPin on the root (either one pins the bar). |
overlays | boolean | undefined | unknown | 🧰 0.1.6: render the legacy #backdrop / #menus / #dialogs / #toasts / progress / canvas layers. Default: on for variant="default", off for "panes" (the shell brings its own menus and dialogs). |
AbAppLayoutProps (server)
ab-nextjs-core/server/ab-app-layout Server entry. Same members as ab-nextjs-core/ab-app-layout.
ab-nextjs-core/server/ab-app-layout is the server entry. It declares the same members as AbAppLayoutProps on the client entry.
AbMainLayoutProps (client)
ab-nextjs-core/ab-main-layout
| Name | Type | Default | Description |
|---|---|---|---|
orientationRequired | "vertical" | "horizontal" | No default | |
className | string | undefined | No default | |
hidden | boolean | undefined | No default | |
pageName | string | undefined | No default | |
screenName | string | undefined | No default | |
mainHeader | ReactNode | No default | 🔝 0.1.6 (G52): the main pane's header slot (data-ab-part="main-header"); 0px and not rendered when empty. |
mainBar | ReactNode | No default | 🔚 0.1.6 (G52): the main pane's bottom bar slot (data-ab-part="main-bar"); 0px and not rendered when empty. |
mainBarPin | "never" | "always" | undefined | 'never' | 📌 0.2.3: 'always' pins the main bar to the bottom of the scroller at every width (sticky, opaque). |
mainBarLabel | string | undefined | No default | 🏷️ 0.2.3: the main bar's accessible name (aria-label on the <footer>). |
headerDeprecated: 0.1.6: use mainHeader (kept as an alias for one minor). | ReactNode | No default | Alias of mainHeader. |
content | ReactNode | No default | |
footerDeprecated: 0.1.6: use mainBar (kept as an alias for one minor). | ReactNode | No default | Alias of mainBar. |
children | ReactNode | No default | |
menus | ReactNode | No default | |
id | string | undefined | No default | 🆔 0.1.6: element id (e.g. the skip-link target), no inner wrapper needed. |
chromeDeprecated: 0.1.6: false drops the legacy backdrop / menus / dialogs / toasts / progress / canvas layers. Empty header / bar slots are never rendered any more, so this only gates those layers (default true). | boolean | undefined | true | |
scrollerLabel | string | undefined | 'Main content' | ⌨️ 0.2.3: accessible name of the main scroller (the focusable data-ab-part="main-content" region). Pass a translated string (default 'Main content'). |
scrollerFocusable | boolean | undefined | true | ⌨️ 0.2.3: false takes the main scroller out of the tab order (default true: tabIndex 0). |
asideAnchor | ReactNode | No default | ⚓ 0.2.3: content that comes BEFORE the aside when AbAppLayout asideBelow="inline-in-main" pulls the aside into this scroller (< 1180px), e.g. a counter row: order = main header · asideAnchor · aside · children. At ≥ 1180px (or any other asideBelow) it simply renders first in the scroller, so the reading order is the same everywhere. |
AbMainLayoutProps (server)
ab-nextjs-core/server/ab-main-layout Server entry. Same members as ab-nextjs-core/ab-main-layout.
ab-nextjs-core/server/ab-main-layout is the server entry. It declares the same members as AbMainLayoutProps on the client entry.
AbAsideLayoutProps (client)
ab-nextjs-core/ab-aside-layout
| Name | Type | Default | Description |
|---|---|---|---|
orientationRequired | "vertical" | "horizontal" | No default | |
className | string | undefined | No default | |
hidden | boolean | undefined | No default | |
pageName | string | undefined | No default | |
asideHeader | ReactNode | No default | 🔝 0.1.6 (G52): the aside pane's header slot (data-ab-part="aside-header"); 0px and not rendered when empty. |
asideBar | ReactNode | No default | 🔚 0.1.6 (G52): the aside pane's bottom bar slot (data-ab-part="aside-bar"); 0px and not rendered when empty. |
headerDeprecated: 0.1.6: use asideHeader (kept as an alias for one minor). | ReactNode | No default | Alias of asideHeader. |
content | ReactNode | No default | |
footerDeprecated: 0.1.6: use asideBar (kept as an alias for one minor). | ReactNode | No default | Alias of asideBar. |
children | ReactNode | No default | |
dividerHidden | boolean | undefined | No default | |
menus | ReactNode | No default | |
id | string | undefined | No default | 🆔 0.1.6: element id (e.g. the skip-link target), no inner wrapper needed. |
chromeDeprecated: 0.1.6: false drops the legacy backdrop / menus / dialogs / toasts / progress / canvas layers. Empty header / bar slots are never rendered any more, so this only gates those layers (default true). | boolean | undefined | true | |
'aria-label' | string | undefined | No default | 🏷️ 0.2.3: names the <aside> landmark (e.g. "Live Playground"), so screen readers don't list an anonymous "complementary". Pass a translated string. |
'aria-labelledby' | string | undefined | No default | 🏷️ 0.2.3: or point at a visible heading's id (wins over aria-label per ARIA). |
AbAsideLayoutProps (server)
ab-nextjs-core/server/ab-aside-layout Server entry. Same members as ab-nextjs-core/ab-aside-layout.
ab-nextjs-core/server/ab-aside-layout is the server entry. It declares the same members as AbAsideLayoutProps on the client entry.
AbPageContextValue
ab-nextjs-core/ab-page-provider
| Name | Type | Default | Description |
|---|---|---|---|
mainScrollElementRequired | HTMLElement | null | No default | 📜 0.1.6 (G55): the main pane's scroller (AbMainLayout's content wrapper), e.g. useAbScrollSpy({ root }). |
asideScrollElementRequired | HTMLElement | null | No default | 📜 0.1.6 (G55): the aside pane's scroller. |
setMainScrollElementRequired | (el: HTMLElement | null) => void | No default | 🔗 ref callbacks used by AbMainLayout / AbAsideLayout. |
appScrollElementRequired | HTMLElement | null | No default | 📜 0.2.3: AbAppLayout's content wrapper: THE scroller in asideBelow="inline-in-main" (< 1180px). |
setAppScrollElementRequired | (el: HTMLElement | null) => void | No default | |
setAsideScrollElementRequired | (el: HTMLElement | null) => void | No default | |
isAsideOpenRequired | boolean | No default | |
isAsideOpenOnMobileRequired | boolean | No default | |
asideDurationRequired | number | No default | |
asideElementRequired | HTMLElement | null | No default | |
setAsideElementRequired | (el: HTMLElement | null) => void | No default | |
isAsideOpeningRequired | boolean | No default | |
isAsideClosingRequired | boolean | No default | |
isAsideLoadingRequired | boolean | No default | |
setAsideOpenRequired | (open: boolean) => void | No default | |
setAsideOpenOnMobileRequired | (open: boolean) => void | No default | |
setAsideLoadingRequired | (loading: boolean) => void | No default | |
asideIdRequired | string | No default | 🆔 0.1.6: id of the aside element (for aria-controls on the TOC / »« buttons). |
toggleAsideRequired | () => void | No default | 🔁 0.1.6: flip the laptop+ aside (»/« toggle). |
toggleAsideOnMobileRequired | () => void | No default | 📱 0.1.6: flip the mobile/tablet aside sheet (TOC button). |
AbPageProviderProps
ab-nextjs-core/ab-page-provider
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | No default | |
defaultAsideOpen | boolean | undefined | true | Initial aside open state (default true so shells render visibly). |
asideDuration | number | undefined | AB_ASIDE_DURATION | 🎞️ slide duration in ms (default 240, 0.1.6; was 300). Reduced motion always makes it instant. |
asideId | string | undefined | 'ab-aside' | 🆔 aside element id for aria-controls (default 'ab-aside'). |
useAbPage
ab-nextjs-core/ab-page-provider
useAbPage(): AbPageContextValueAbAsideToggle
ab-nextjs-core/ab-page-provider
| Name | Type | Default | Description |
|---|---|---|---|
isSheetRequired | boolean | No default | 📐 true below 1180px (the aside is a sheet, driven by isAsideOpenOnMobile). |
expandedRequired | boolean | No default | 👀 is the aside shown for the current viewport? |
toggleRequired | () => void | No default | 🔁 flip it for the current viewport. |
propsRequired | { 'aria-expanded': boolean; 'aria-controls': string; onClick: () => void; } | No default | ♿ aria-expanded + aria-controls + onClick for a toggle button. |
useAbAsideToggle
ab-nextjs-core/ab-page-provider
useAbAsideToggle(): AbAsideToggleAbAsideDrawer
ab-nextjs-core/ab-page-provider
| Name | Type | Default | Description |
|---|---|---|---|
isOpenRequired | boolean | No default | 👀 is the mobile drawer open? |
openRequired | () => void | No default | 🔓 open it (remembers the focused element, so focus returns there on close). |
closeRequired | () => void | No default | 🔒 close it (focus returns to the opener). |
propsRequired | { 'aria-haspopup': "dialog"; 'aria-expanded': boolean; 'aria-controls': string; onClick: (e: { currentTarget: { focus?: (o?: FocusOptions) => void; }; }) => void; } | No default | ♿ aria-haspopup + aria-expanded + aria-controls + onClick (focuses itself first: Safari never focuses buttons on click). |
useAbAsideDrawer
ab-nextjs-core/ab-page-provider
useAbAsideDrawer(): AbAsideDraweruseAbInlineScroller
ab-nextjs-core/ab-page-provider
useAbInlineScroller(): HTMLElement | nullAB_ASIDE_DURATION
ab-nextjs-core/ab-page-provider
240
240AB_ASIDE_SHEET_QUERY
ab-nextjs-core/ab-page-provider
"(max-width: 1179px)"
'(max-width: 1179px)'getAbAsideDuration
ab-nextjs-core/ab-page-provider
getAbAsideDuration(duration: number, reducedMotion: boolean): number| Name | Type | Default | Description |
|---|---|---|---|
durationRequired | number | No default | |
reducedMotionRequired | boolean | No default |
AB_REDUCED_MOTION_QUERY
ab-nextjs-core/ab-page-provider
"(prefers-reduced-motion: reduce)"
'(prefers-reduced-motion: reduce)'shouldCloseAbAsideOnSwipe
ab-nextjs-core/ab-aside-layout
shouldCloseAbAsideOnSwipe(dx: number, dy: number, threshold = 60): boolean| Name | Type | Default | Description |
|---|---|---|---|
dxRequired | number | No default | |
dyRequired | number | No default | |
threshold | number | 60 |
Not on this page
AbAppLayout(ab-nextjs-core/ab-app-layout) — Public core export. This pass documents the layout slots and the page provider, not this name.acquireAbLayoutLock(ab-nextjs-core/ab-app-layout) — Public helper, not a layout slot. This pass documents the slot props.AbAsideLayout(ab-nextjs-core/ab-aside-layout) — Public core export. This pass documents the layout slots and the page provider, not this name.AbMainLayout(ab-nextjs-core/ab-main-layout) — Public core export. This pass documents the layout slots and the page provider, not this name.AbPageProvider(ab-nextjs-core/ab-page-provider) — Public core export. This pass documents the layout slots and the page provider, not this name.AbAppLayout(ab-nextjs-core/server/ab-app-layout) — Public core export. This pass documents the layout slots and the page provider, not this name.AbAsideLayout(ab-nextjs-core/server/ab-aside-layout) — Public core export. This pass documents the layout slots and the page provider, not this name.AbMainLayout(ab-nextjs-core/server/ab-main-layout) — Public core export. This pass documents the layout slots and the page provider, not this name.
Not a public import
These names are not exported from a package entry. There is no supported import path.
toAbSlot— Used by the layout implementations. ab-nextjs-core/ab-page-provider does not export it, and no exports entry points at its source file.AbScrollRegistrar— Used by the server layouts. ab-nextjs-core/ab-page-provider does not export it, and no exports entry points at its source file.AbScrollRegistrarProps— Props of AbScrollRegistrar. ab-nextjs-core/ab-page-provider does not export it, and no exports entry points at its source file.AbMainBarHeight— Rendered inside the main layout. ab-nextjs-core/ab-main-layout does not export it, and no exports entry points at its source file.