Ember UI LogoEmber UI
Components

Dropdown Menu

A dropdown-menu component

Preview

Loading...
import { Button } from "@/registry/axon/ui/button";import {  DropdownMenu,  DropdownMenuContent,  DropdownMenuGroup,  DropdownMenuItem,  DropdownMenuLabel,  DropdownMenuPortal,  DropdownMenuSeparator,  DropdownMenuShortcut,  DropdownMenuSub,  DropdownMenuSubContent,  DropdownMenuSubTrigger,  DropdownMenuTrigger,} from "@/registry/axon/ui/dropdown-menu";export default function DropdownMenuDemo() {  return (    <DropdownMenu>      <DropdownMenuTrigger asChild>        <Button variant="outline">Open</Button>      </DropdownMenuTrigger>      <DropdownMenuContent align="start" className="w-56">        <DropdownMenuLabel>My Account</DropdownMenuLabel>        <DropdownMenuGroup>          <DropdownMenuItem>            Profile            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>          </DropdownMenuItem>          <DropdownMenuItem>            Billing            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>          </DropdownMenuItem>          <DropdownMenuItem>            Settings            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>          </DropdownMenuItem>          <DropdownMenuItem>            Keyboard shortcuts            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>          </DropdownMenuItem>        </DropdownMenuGroup>        <DropdownMenuSeparator />        <DropdownMenuGroup>          <DropdownMenuItem>Team</DropdownMenuItem>          <DropdownMenuSub>            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>            <DropdownMenuPortal>              <DropdownMenuSubContent>                <DropdownMenuItem>Email</DropdownMenuItem>                <DropdownMenuItem>Message</DropdownMenuItem>                <DropdownMenuSeparator />                <DropdownMenuItem>More...</DropdownMenuItem>              </DropdownMenuSubContent>            </DropdownMenuPortal>          </DropdownMenuSub>          <DropdownMenuItem>            New Team            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>          </DropdownMenuItem>        </DropdownMenuGroup>        <DropdownMenuSeparator />        <DropdownMenuItem>GitHub</DropdownMenuItem>        <DropdownMenuItem>Support</DropdownMenuItem>        <DropdownMenuItem disabled>API</DropdownMenuItem>        <DropdownMenuSeparator />        <DropdownMenuItem>          Log out          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>        </DropdownMenuItem>      </DropdownMenuContent>    </DropdownMenu>  );}

Installation

CLI

npx shadcn@latest add @emberui/dropdown-menu
yarn shadcn@latest add @emberui/dropdown-menu
pnpm dlx shadcn@latest add @emberui/dropdown-menu
bunx --bun shadcn@latest add @emberui/dropdown-menu

Reference

This component is based on the shadcn/ui Dropdown Menu component.

On this page