Dropdown Menu
A menu of actions that opens from a trigger.
<DropdownMenu>
<DropdownMenuTrigger render={<Button>Actions</Button>} />
<DropdownMenuContent>
<DropdownMenuItem>Rename</DropdownMenuItem>
<DropdownMenuItem>Duplicate</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem destructive>Delete</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Props
side
align
Installation
npx shadcn@latest add https://sproutboat.com/ikada/r/dropdown-menu.jsonThe CLI writes components/ikada/dropdown-menu.tsx and merges the ikada theme into your CSS. Or take it from the package: import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator } from "@sproutboat/ikada";
Usage
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
<DropdownMenu>
<DropdownMenuTrigger render={<Button>robin</Button>} />
<DropdownMenuContent>
<DropdownMenuItem>Redeploy</DropdownMenuItem>
<DropdownMenuItem>Roll back</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem destructive>Delete sprout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>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
| 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. |
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. |
| 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. |
Also takes every prop of Omit<ComponentProps<typeof Menu.Item>, "className">.
| 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. |
| 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. |
| 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. |
| 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: src/components/dropdown-menu.tsx