# Dropdown Menu

A menu of actions that opens from a trigger.

Source page: https://sproutboat.com/ikada/components/dropdown-menu

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/dropdown-menu.json
```
Or from the package: `import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator } from "@sproutboat/ikada";`
## Usage
```tsx
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator } from "@/components/ikada/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger render={<Button>Actions</Button>} />
  <DropdownMenuContent>
    <DropdownMenuItem>Rename</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem destructive>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```
## Examples
### Menu
Arrow keys move, Enter picks, Escape closes. A disabled item is skipped; destructive ones sit last, after a separator.
```tsx
<DropdownMenu>
  <DropdownMenuTrigger render={<Button>Actions</Button>} />
  <DropdownMenuContent>
    <DropdownMenuItem>Rename</DropdownMenuItem>
    <DropdownMenuItem>Duplicate</DropdownMenuItem>
    <DropdownMenuItem disabled>Transfer</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```
### Destructive item

```tsx
<DropdownMenu>
  <DropdownMenuTrigger render={<Button>robin</Button>} />
  <DropdownMenuContent>
    <DropdownMenuItem>Redeploy</DropdownMenuItem>
    <DropdownMenuItem>Roll back</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem destructive>Delete sprout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```
### Radio and checkbox items
With either kind present every item shares one gutter, so labels line up whether or not a row shows a check.
```tsx
const [region, setRegion] = useState("eu-west");
const [alerts, setAlerts] = useState(true);

<DropdownMenu>
  <DropdownMenuTrigger render={<Button>View options</Button>} />
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>Region</DropdownMenuLabel>
      <DropdownMenuRadioGroup value={region} onValueChange={setRegion}>
        <DropdownMenuRadioItem value="eu-west">eu-west</DropdownMenuRadioItem>
        <DropdownMenuRadioItem value="us-east">us-east</DropdownMenuRadioItem>
      </DropdownMenuRadioGroup>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuCheckboxItem checked={alerts} onCheckedChange={setAlerts}>
      Deploy alerts
    </DropdownMenuCheckboxItem>
  </DropdownMenuContent>
</DropdownMenu>
```
## Props
### DropdownMenuContentProps
Also takes every prop of `Omit<ComponentProps<typeof Menu.Popup>, "className">`.
| Prop | Type | Description |
| --- | --- | --- |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
| side? | `Side` | Which side of the trigger the popup opens on. Flips when there is no room. Default `bottom`. |
| align? | `Align` | How the popup lines up with the trigger along that side. Default `end`. |
| style? | `CSSProperties \| ((state: MenuPopupState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuPopupState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### DropdownMenuItemProps
Also takes every prop of `Omit<ComponentProps<typeof Menu.Item>, "className">`.
| Prop | Type | Description |
| --- | --- | --- |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
| destructive? | `boolean` | Destructive items use the danger text color. Default `false`. |
| style? | `CSSProperties \| ((state: MenuItemState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuItemState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
### DropdownMenuCheckboxItemProps

| Prop | Type | Description |
| --- | --- | --- |
| style? | `CSSProperties \| ((state: MenuCheckboxItemState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuCheckboxItemState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
### DropdownMenuRadioItemProps

| Prop | Type | Description |
| --- | --- | --- |
| style? | `CSSProperties \| ((state: MenuRadioItemState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuRadioItemState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
### DropdownMenuLabelProps

| Prop | Type | Description |
| --- | --- | --- |
| style? | `CSSProperties \| ((state: MenuGroupLabelState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, MenuGroupLabelState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
### DropdownMenuSeparatorProps

| Prop | Type | Description |
| --- | --- | --- |
| style? | `CSSProperties \| ((state: SeparatorState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, SeparatorState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/dropdown-menu.tsx