Base Menu

Component 47

About

A list of actions in a dropdown, enhanced with keyboard navigation. Built on top of Base UI Menu component with shadcn styling.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Base Menu to your project and fits it to your theme.

Code

How Base Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Button } from '@/components/ui/base-button';
import {
  Menu,
  MenuContent,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  MenuSeparator,
  MenuShortcut,
  MenuTrigger,
} from '@/components/ui/base-menu';
import { LogOut, Mail, Settings, User } from 'lucide-react';

export default function MenuDemo() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline">Show Menu</Button>} />
      <MenuContent sideOffset={4} className="w-64">
        {/* Account Section */}
        <MenuGroup>
          <MenuGroupLabel>My Account</MenuGroupLabel>
          <MenuSeparator />
          <MenuItem>
            <User />
            <span>Profile</span>
            <MenuShortcut>⇧⌘P</MenuShortcut>
          </MenuItem>
          <MenuItem>
            <Mail />
            <span>Inbox</span>
            <MenuShortcut>⌘I</MenuShortcut>
          </MenuItem>
          <MenuItem>
            <Settings />
            <span>Settings</span>
            <MenuShortcut>⌘S</MenuShortcut>
          </MenuItem>
        </MenuGroup>

        {/* Logout */}
        <MenuSeparator />
        <MenuGroup>
          <MenuItem>
            <LogOut />
            <span>Log Out</span>
            <MenuShortcut>⇧⌘Q</MenuShortcut>
          </MenuItem>
        </MenuGroup>
      </MenuContent>
    </Menu>
  );
}