Dropdown
The Dropdown component provides a menu for users to select from options, with customizable appearance, alignment, and items.
Usage
Default
<Dropdown
items={[
{ label: "Profile", icon: <FaUser />, onClick: () => alert("View Profile") },
{ label: "Settings", icon: <FaCog />, onClick: () => alert("Settings clicked") },
{ label: "Logout", icon: <FaSignOutAlt />, onClick: () => alert("Logged out"), "data-testid": "logout-button" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Sets the visual theme for the dropdown and menu. |
| align | "left" | "right" | "right" | Menu alignment relative to the toggle button. |
| toggleOutline | boolean | false | Sets the outline style. |
| toggleRounding | "none" | "small" | "medium" | "large" | Configured Default | Rounding style for the dropdown toggle button. |
| toggleShadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Shadow style for the dropdown toggle button. |
| triggerIcon | React.ReactNode | - | Optional icon for the toggle button. |
| items | Array<{ label: string; icon?: React.ReactNode; onClick?: () => void; href?: string }> | - | Dropdown menu items (array of objects). |
| state | "success" | "error" | "warning" | - | Visual state of the dropdown. |
| menuRounding | "none" | "small" | "medium" | "large" | Configured Default | Rounding style for the dropdown menu. |
| menuShadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Shadow style for the dropdown menu. |
| menuClassName | string | - | Custom classname for the menu. |
| ariaLable | string | "Dropdown menu" | Accessible label. |
| className | string | - | Custom CSS class for the dropdown container. |
| data-testid | string | "dropdown" | Test ID for the component container. |