Responsive Menu
A menu that adapts to the viewport — a Dropdown Menu on desktop, a bottom Drawer menu on mobile — since a hover-triggered dropdown doesn't translate to touch.
Last updated January 1, 1980
CreditsModifiedPublished
Copied from shadcn/ui.
- Not a shadcn/ui component — this composition (switch between Dropdown Menu and a Drawer menu by viewport width, behind one shared API) is original to this registry, built on top of this registry's own Dropdown Menu and Drawer
- Added variant="destructive" support to Dropdown Menu's item so it matches Context Menu and Menubar, and so a destructive action looks the same on both the desktop and mobile surface here
Overview
Resize the browser window to see the preview switch between a dropdown and a drawer menu.
Installation
Usage
import {
ResponsiveMenu,
ResponsiveMenuContent,
ResponsiveMenuItem,
ResponsiveMenuSeparator,
ResponsiveMenuTrigger,
} from "@/components/ui/responsive-menu"
export function Example() {
return (
<ResponsiveMenu>
<ResponsiveMenuTrigger render={<Button variant="outline">Open menu</Button>} />
<ResponsiveMenuContent groupLabel="My Account">
<ResponsiveMenuItem onClick={() => {}}>Profile</ResponsiveMenuItem>
<ResponsiveMenuItem onClick={() => {}}>Billing</ResponsiveMenuItem>
<ResponsiveMenuSeparator />
<ResponsiveMenuItem variant="destructive" onClick={() => {}}>
Log out
</ResponsiveMenuItem>
</ResponsiveMenuContent>
</ResponsiveMenu>
)
}