Menu
Dropdown menu component with trigger and content pattern. Use when building selectable menus, action menus, or nested navigation.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Accordion component with collapsible sections. Use for FAQs, nested content, or expandable details sections.
Button component with variants, sizes, loading states, and icon support. Use when creating clickable actions, forms, or navigation buttons.
Calendar component for date and month selection. Use when building date pickers, scheduling interfaces, or date range selectors.
Carousel component for image/content sliders with navigation controls. Use for image galleries, hero sections, or content that scrolls horizontally.
Checkbox component for boolean or multi-select inputs. Use when building forms with boolean toggles or multiple selection lists.
Icon-only button component for actions. Use for toolbars, navigation bars, or compact action buttons without text.
| name | groww-dropdown |
| description | Dropdown menu component with trigger and content pattern. Use when building selectable menus, action menus, or nested navigation. |
import Dropdown, { DropdownTrigger, DropdownContent } from '@groww-tech/ui-toolkit/dist/esm/components/atoms/Dropdown';
import DropdownV2 from '@groww-tech/ui-toolkit/dist/esm/components/atoms/DropdownV2';
// or
import { Dropdown, DropdownV2 } from '@groww-tech/ui-toolkit';
interface DropdownProps {
children: React.ReactNode[]; // DropdownTrigger and DropdownContent
disabled?: boolean; // Disable the dropdown
active?: boolean; // Controlled open state
onHide?: () => void; // Called when dropdown closes
onShow?: () => void; // Called when dropdown opens
className?: string;
style?: React.CSSProperties;
dataTestId?: string;
}
interface DropdownTriggerProps {
children: React.ReactNode; // Trigger content (button/icon)
addMenuRef?: (ref: HTMLDivElement) => void;
}
interface DropdownContentProps {
children: React.ReactNode; // Dropdown menu items
addMenuRef?: (ref: HTMLDivElement) => void;
className?: string;
}
interface DropdownV2Props {
children: React.ReactNode[]; // DropdownTrigger and DropdownContent
disabled?: boolean;
active?: boolean; // Controlled state
position?: 'top' | 'bottom'; // Vertical position
horizontalPosition?: 'left' | 'right'; // Horizontal alignment
onHide?: () => void;
onShow?: () => void;
className?: string;
style?: React.CSSProperties;
}
<Dropdown
active={isOpen}
onHide={() => setIsOpen(false)}
onShow={() => setIsOpen(true)}
>
<DropdownTrigger>
<Button buttonText="Open Menu" />
</DropdownTrigger>
<DropdownContent>
<div onClick={() => handleAction()}>Action 1</div>
<div onClick={() => handleAction()}>Action 2</div>
<div onClick={() => handleAction()}>Action 3</div>
</DropdownContent>
</Dropdown>
import { MoreVerticalIcon } from '@groww-tech/icon-store';
<Dropdown
active={isMenuOpen}
onHide={() => setIsMenuOpen(false)}
>
<DropdownTrigger>
<IconButton icon={MoreVerticalIcon} />
</DropdownTrigger>
<DropdownContent>
<MenuItem icon={<EditIcon />} label="Edit" onClick={handleEdit} />
<MenuItem icon={<DeleteIcon />} label="Delete" onClick={handleDelete} />
</DropdownContent>
</Dropdown>
<DropdownV2
active={isOpen}
position="bottom"
horizontalPosition="right"
onHide={() => setIsOpen(false)}
>
<DropdownTrigger>
<span>Click me</span>
</DropdownTrigger>
<DropdownContent>
{menuItems}
</DropdownContent>
</DropdownV2>