Components
Base Menu
A list of actions in a dropdown, enhanced with keyboard navigation. Built on top of Base UI Menu component with shadcn styling.
Loading
Installation
pnpm dlx shadcn@latest add @toui/menu/base
Examples
Nested
Loading
Checkbox
Loading
Radio Group
Loading
Pattern
Tokens
9 CSS variables in 9 categories.
content-min-width
| CSS Variable | Value | Description |
|---|---|---|
--menu-content-min-width | 8rem | — |
content-padding
| CSS Variable | Value | Description |
|---|---|---|
--menu-content-padding | 0.5rem | — |
item-px
| CSS Variable | Value | Description |
|---|---|---|
--menu-item-px | 0.5rem | — |
item-py
| CSS Variable | Value | Description |
|---|---|---|
--menu-item-py | 0.375rem | — |
item-radius
| CSS Variable | Value | Description |
|---|---|---|
--menu-item-radius | var(--component-radius-xs) | — |
item-text
| CSS Variable | Value | Description |
|---|---|---|
--menu-item-text | var(--component-text-sm) | — |
label-text
| CSS Variable | Value | Description |
|---|---|---|
--menu-label-text | var(--component-text-xs) | — |
separator-my
| CSS Variable | Value | Description |
|---|---|---|
--menu-separator-my | 0.375rem | — |
icon-size
| CSS Variable | Value | Description |
|---|---|---|
--menu-icon-size | 1rem | — |
API Reference
This component is based on Base UI Menu.