Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Import

import { DropdownMenu } from '@chimera-ui/components'

Usage

<DropdownMenu.Root>
  <DropdownMenu.Trigger asChild>
    <Button>
      Open
    </Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content className="w-56">
    <DropdownMenu.Label>
      My Account
    </DropdownMenu.Label>
    <DropdownMenu.Separator />
    <DropdownMenu.Group>
      <DropdownMenu.Item>
        <User className="mr-2 h-4 w-4" />
        <span>
          Profile
        </span>
        
        
        <DropdownMenu.Shortcut>
          ⇧⌘P
        </DropdownMenu.Shortcut>
      </DropdownMenu.Item>
      <DropdownMenu.Item>
        <CreditCard className="mr-2 h-4 w-4" />
        <span>
          Billing
        </span>
        
        
        <DropdownMenu.Shortcut>
          ⌘B
        </DropdownMenu.Shortcut>
      </DropdownMenu.Item>
      <DropdownMenu.Item>
        <Settings className="mr-2 h-4 w-4" />
        <span>
          Settings
        </span>
        
        
        <DropdownMenu.Shortcut>
          ⌘S
        </DropdownMenu.Shortcut>
      </DropdownMenu.Item>
      <DropdownMenu.Item>
        <Keyboard className="mr-2 h-4 w-4" />
        <span>
          Keyboard shortcuts
        </span>
        
        
        <DropdownMenu.Shortcut>
          ⌘K
        </DropdownMenu.Shortcut>
      </DropdownMenu.Item>
    </DropdownMenu.Group>
    <DropdownMenu.Separator />
    <DropdownMenu.Group>
      <DropdownMenu.Item>
        <Users className="mr-2 h-4 w-4" />
        <span>
          Team
        </span>
      </DropdownMenu.Item>
      <DropdownMenu.Sub>
        <DropdownMenu.SubTrigger>
          <UserPlus className="mr-2 h-4 w-4" />
          <span>
            Invite users
          </span>
        </DropdownMenu.SubTrigger>
        <DropdownMenu.Portal>
          <DropdownMenu.SubContent>
            <DropdownMenu.Item>
              <Mail className="mr-2 h-4 w-4" />
              <span>
                Email
              </span>
            </DropdownMenu.Item>
            <DropdownMenu.Item>
              <MessageSquare className="mr-2 h-4 w-4" />
              <span>
                Message
              </span>
            </DropdownMenu.Item>
            <DropdownMenu.Separator />
            <DropdownMenu.Item>
              <PlusCircle className="mr-2 h-4 w-4" />
              <span>
                More...
              </span>
            </DropdownMenu.Item>
          </DropdownMenu.SubContent>
        </DropdownMenu.Portal>
      </DropdownMenu.Sub>
      <DropdownMenu.Item>
        <Plus className="mr-2 h-4 w-4" />
        <span>
          New Team
        </span>
        
        
        <DropdownMenu.Shortcut>
          ⌘+T
        </DropdownMenu.Shortcut>
      </DropdownMenu.Item>
    </DropdownMenu.Group>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>
      <Github className="mr-2 h-4 w-4" />
      <span>
        GitHub
      </span>
    </DropdownMenu.Item>
    <DropdownMenu.Item>
      <LifeBuoy className="mr-2 h-4 w-4" />
      <span>
        Support
      </span>
    </DropdownMenu.Item>
    <DropdownMenu.Item disabled>
      <Cloud className="mr-2 h-4 w-4" />
      <span>
        API
      </span>
    </DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>
      <LogOut className="mr-2 h-4 w-4" />
      <span>
        Log out
      </span>
      
      
      <DropdownMenu.Shortcut>
        ⇧⌘Q
      </DropdownMenu.Shortcut>
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Dialog Input