Slideout Menu
A panel that slides in from the side of the screen, commonly used for navigation, with Default and Custom style variants.
Loading preview…
1
<SlideoutMenu2
title="Sarah Ahmed"3
description="Product Designer"4
showFooter={false}5
dividerInstallation
npx sdaia-ui@latest add slideoutmenu
Usage
import { SlideoutMenu } from "@/components/ui/slideout-menu"<SlideoutMenu />Examples
Default
The default slideout menu with LTR layout and standard styling.
Loading preview…
1
<SlideoutMenu2
rtl={false}3
/>Custom Style
Use `style="Custom"` for branded or themed slideout menu variations.
Loading preview…
1
<SlideoutMenu2
style="Custom"3
/>API Reference
Slideout Menu Props
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 |