Dropdown

Use Dropdown for compact action menus.

Quick Preview

Preset Examples

Code

<DropdownContent variant="default">...</DropdownContent>
<DropdownContent variant="elevated">...</DropdownContent>
<DropdownContent variant="soft">...</DropdownContent>
<DropdownItem variant="default">Edit</DropdownItem>
<DropdownItem variant="success">Approve</DropdownItem>
<DropdownItem variant="danger">Delete</DropdownItem>

Usage

Code

import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "@altech-ui/react"
 
<Dropdown>
  <DropdownTrigger>Open</DropdownTrigger>
  <DropdownContent variant="elevated">
    <DropdownItem>Profile</DropdownItem>
    <DropdownItem>Settings</DropdownItem>
    <DropdownItem variant="danger">Sign out</DropdownItem>
  </DropdownContent>
</Dropdown>

Props

Dropdown: Radix DropdownMenu Root props
DropdownTrigger: Radix DropdownMenu Trigger props
DropdownContent.variant?: default | elevated | soft
DropdownItem.variant?: default | danger | success
DropdownContent: Radix DropdownMenu Content props
DropdownItem: Radix DropdownMenu Item props