A panel that slides in from the side of the screen, commonly used for navigation, with Default and Custom style variants.
Loading demo: slideoutmenu-real-world
npx sdaia-ui@latest add slideoutmenu
import { SlideoutMenu } from "@/components/ui/slideout-menu"<SlideoutMenu />Props for the Slideout Menu component.
Prop | Type | Default | Required |
|---|---|---|---|
open | boolean | — | optional |
title | string | — | optional |
description | string | — | optional |
headerIcon | ReactNode | — | optional |
divider | boolean | — | optional |
showFooter | boolean | — | optional |
primaryButtonLabel | string | — | optional |
secondaryButtonLabel | string | — | optional |
onPrimaryClick | () => void | — | optional |
onSecondaryClick | () => void | — | optional |
onClose | () => void | — | optional |
children | ReactNode | — | optional |
rtl | boolean | — | optional |
className | string | — | optional |
Use surface="glass" to enable Glass Effect
Loading demo: slideoutmenu-glass
The default slideout menu with LTR layout and standard styling.
Loading demo: slideoutmenu-default
Use `style="Custom"` for branded or themed slideout menu variations.
Loading demo: slideoutmenu-custom