Responsive Menu
GitHubPriority-aware menu that moves whole groups of related actions into a dropdown when space is limited.
Installation
bash
pnpm dlx shadcn@latest add @cs/responsive-menuUsage
tsx
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
import { ResponsiveMenu, ResponsiveMenuGroup, ResponsiveMenuItem, ResponsiveMenuSeparator, ResponsiveMenuSub, ResponsiveMenuToggleItem } from "@/components/cs/responsive-menu";tsx
<ResponsiveMenu>
<ResponsiveMenuGroup priority={1}>
<ResponsiveMenuItem>Save</ResponsiveMenuItem>
</ResponsiveMenuGroup>
<ResponsiveMenuSeparator />
<ResponsiveMenuGroup priority={0}>
<ResponsiveMenuToggleItem>Show sidebar</ResponsiveMenuToggleItem>
<ResponsiveMenuSub trigger="More" variant="outline">
<DropdownMenuItem>Move to folder</DropdownMenuItem>
</ResponsiveMenuSub>
</ResponsiveMenuGroup>
</ResponsiveMenu>API Reference
ResponsiveMenu
A menu that keeps higher-priority groups visible and moves lower-priority groups into a dropdown when space is limited.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| trigger | React.ReactElement | - | Custom trigger rendered when one or more items overflow. |
ResponsiveMenuGroup
Groups related menu items so they move into the overflow dropdown together.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Menu items rendered in the group. |
| priority * | number | - | Higher values remain visible longer; zero always renders in the overflow menu. |
ResponsiveMenuItem
A button that becomes a dropdown menu item when ResponsiveMenu overflows.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | "icon" | "default" | "xs" | "lg" | "sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined | - | - |
| variant | "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined | - | - |
ResponsiveMenuToggleItem
A toggle that becomes a checkbox menu item when ResponsiveMenu overflows.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | "default" | "lg" | "sm" | null | undefined | - | - |
| variant | "default" | "outline" | null | undefined | - | - |
ResponsiveMenuSub
A toolbar dropdown that becomes a nested dropdown menu when ResponsiveMenu overflows.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Dropdown menu items and other menu content. |
| size | "icon" | "default" | "xs" | "lg" | "sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined | - | - |
| trigger * | React.ReactNode | - | Content rendered in the dropdown trigger. |
| variant | "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined | - | - |
ResponsiveMenuSeparator
A divider that renders between ResponsiveMenuGroup elements in the menu and overflow dropdown.