# Dropdown
Action menu built on Base UI Menu primitives.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { Button, DropdownContent, DropdownItem, DropdownRoot, DropdownTrigger } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/dropdown
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=dropdown--with-icons&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="380" title="Dropdown component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
<DropdownRoot>
  <DropdownTrigger render={<Button size="sm" variant="outline" />}>Options</DropdownTrigger>
  <DropdownContent>
    <DropdownItem>Duplicate</DropdownItem>
    <DropdownItem>Rename</DropdownItem>
    <DropdownItem variant="destructive">Delete</DropdownItem>
  </DropdownContent>
</DropdownRoot>
```

## Props

### DropdownItem

<PropsTable
  props={[
  {
    name: "variant",
    type: '"default" | "destructive"',
    default: '"default"',
    description: "Visual variant for the menu item.",
  },
  {
    name: "onSelect",
    type: "(event: React.MouseEvent<HTMLDivElement>) => void",
    description: "Callback fired when the item is selected. Maps to onClick internally for Base UI compatibility.",
  },
]}
/>

Built on [Base UI Menu](https://base-ui.com/react/components/menu). See their docs for primitive-level details on `DropdownRoot`, `DropdownTrigger`, `DropdownContent`, `DropdownGroup`, `DropdownLabel`, `DropdownPortal`, and `DropdownSeparator`.