SlideoutMenu is a nav panel with a header, grouped items, and a footer. Unlike Drawer it uses real list and link semantics; side flips with direction.
When to use
Use SlideoutMenu for app-level navigation on mobile or in a compact header: sections of a portal, account links, and language or sign-out actions. Group items and keep the top level short.
For secondary flows with forms, use Drawer. For persistent desktop navigation, use Sidebar.
Props
Props declared by SlideoutMenu. Native attributes of the underlying element pass through.
<SlideoutMenu>
| Prop | Type | Default | Description |
|---|
children | ReactNode | – | |
open | boolean | – | |
defaultOpen | boolean | – | |
onOpenChange | (open: boolean) => void | – | |
modal | boolean | – | |
<SlideoutMenuTrigger>
| Prop | Type | Default | Description |
|---|
asChild | boolean | – | |
<SlideoutMenuClose>
| Prop | Type | Default | Description |
|---|
asChild | boolean | – | |
<SlideoutMenuContent>
| Prop | Type | Default | Description |
|---|
side | "start" | "end" | – | |
background | "white" | "gray" | – | |
forceMount | true | – | Used to force mounting when more control is needed. Useful when
controlling animation with React animation libraries. |
onOpenAutoFocus | (event: Event) => void | – | Event handler called when auto-focusing on open.
Can be prevented. |
onCloseAutoFocus | (event: Event) => void | – | Event handler called when auto-focusing on close.
Can be prevented. |
deferPointerDownOutside | boolean | – | When true, a 'pointerdown' event outside of the layered element will
wait for the interaction's click event before dispatching, allowing
third-party code to stop propagation of later events and cancel dismissal. |
onEscapeKeyDown | (event: KeyboardEvent) => void | – | Event handler called when the escape key is down.
Can be prevented. |
onPointerDownOutside | (event: PointerDownOutsideEvent) => void | – | Event handler called when the a pointerdown event happens outside of the DismissableLayer.
Can be prevented. |
onFocusOutside | (event: FocusOutsideEvent) => void | – | Event handler called when the focus moves outside of the DismissableLayer.
Can be prevented. |
onInteractOutside | (event: PointerDownOutsideEvent | FocusOutsideEvent) => void | – | Event handler called when an interaction happens outside the DismissableLayer.
Specifically, when a pointerdown event happens outside or focus moves outside of it.
Can be prevented. |
asChild | boolean | – | |
<SlideoutMenuHeader>
| Prop | Type | Default | Description |
|---|
icon | react.ReactNode | – | Optional featured icon, shown in a 32px brand-tinted disc before the title. |
showCloseButton | boolean | – | Render the close (X) button. Defaults to true. |
closeLabel | string | – | Localized aria-label for the close button. Defaults to "Close". |
<SlideoutMenuTitle>
| Prop | Type | Default | Description |
|---|
asChild | boolean | – | |
<SlideoutMenuDescription>
| Prop | Type | Default | Description |
|---|
asChild | boolean | – | |
<SlideoutMenuGroup>
| Prop | Type | Default | Description |
|---|
label | react.ReactNode | – | Section heading rendered above the list (SDGA "Group Label"). |
<SlideoutMenuItem>
| Prop | Type | Default | Description |
|---|
asChild | boolean | – | Render as the child element (e.g. an <a> or router <Link>). |
icon | react.ReactNode | – | Leading 24px icon. |
trailing | react.ReactNode | – | Trailing slot - counter text, an icon button, a check, a Tag, etc. |
active | boolean | – | Marks the current page - sets aria-current="page" and the active style. |
level | 1 | 2 | – | SDGA Nav Drawer level: 2 indents the row under its parent (40px). Defaults to 1. |
expanded | boolean | – | SDGA Nav Drawer "Parent (Sub-menu)": renders a rotating chevron in the trailing slot and sets
aria-expanded. Render the level-2 rows after this item while it is expanded. |
Accessibility
The panel renders a <nav> with a real list of links, so screen readers expose it as a navigation landmark. The current page is marked with aria-current="page", and separators use role="separator".
The close button and trigger have accessible names, and the panel opens from the inline start so it matches the reading direction.