Menu
Menu renders a vertical list of navigation or action items with optional background fill, border, and RTL layout support.
Loading preview…
Installation
npx sdaia-ui@latest add menu
Usage
import { Menu } from "@/components/ui/menu"1<Menu />2<Menu background={true} border={true} />
Examples
Default
The default menu without background fill or border.
Loading preview…
1
<Menu2
sections={[3
{ label: 'GROUP LABEL', items },4
{ label: 'GROUP LABEL', items },5
{ label: 'GROUP LABEL', items },With Background
Set background=true to add a filled background behind the menu.
Loading preview…
1
<Menu background sections={sections} />With Border
Set border=true to add a border around the menu container.
Loading preview…
API Reference
MenuProps
Props for the Menu component.
Prop | Type | Default | Required |
|---|---|---|---|
sections | MenuSectionData[] | - | optional |
value | string | null | - | optional |
defaultValue | string | null | null | optional |
onValueChange | (value: string) => void | - | optional |
background | boolean | false | optional |
border | boolean | false | optional |
divider | boolean | true | optional |
children | ReactNode | - | optional |