Menu renders a vertical list of navigation or action items with optional background fill, border, and RTL layout support.
Loading demo: menu-real-world
npx sdaia-ui@latest add menu
import { Menu } from "@/components/ui/menu"1<Menu />2<Menu background={true} border={true} />
Use surface="glass" to enable Glass Effect.
Loading demo: menu-glass
The default menu without background fill or border.
Loading demo: menu-default
Set background=true to add a filled background behind the menu.
Loading demo: menu-background
Set border=true to add a border around the menu container.
Loading demo: menu-border
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 |
dir | "ltr" | "rtl" | — | optional |