Components
Loading preview...
A list of actions in a dropdown, enhanced with keyboard navigation. Built on top of Base UI Menu component with shadcn styling.
npx shadcn@latest add https://21st.dev/r/sean0205/base-menuimport { Button } from '@/components/ui/base-button';
import {
Menu,
MenuContent,
MenuGroup,
MenuGroupLabel,
MenuRadioGroup,
MenuRadioItem,
MenuSeparator,
MenuTrigger,
} from '@/components/ui/base-menu';
export default function MenuDemo() {
return (
<Menu>
<MenuTrigger render={<Button variant="outline">Show Menu</Button>} />
<MenuContent sideOffset={4} className="w-40">
{/* Device Selection */}
<MenuGroup>
<MenuGroupLabel>Device</MenuGroupLabel>
<MenuSeparator />
<MenuRadioGroup defaultValue="desktop">
<MenuRadioItem value="desktop">Desktop</MenuRadioItem>
<MenuRadioItem value="mobile">Mobile</MenuRadioItem>
<MenuRadioItem value="tablet">Tablet</MenuRadioItem>
</MenuRadioGroup>
</MenuGroup>
</MenuContent>
</Menu>
);
}