Dropdown
A versatile menu component built on Radix UI with customizable positioning and animations. Supports nested sub-menus for hierarchical navigation.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Dropdown component
Copy this code to create your Dropdown component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Positions
The dropdown can be positioned in different directions.
Animations
Various animations can be applied to the dropdown.
Sub Menu
Dropdowns can contain nested sub-menus for hierarchical navigation.
API Reference
The Dropdown component is built on top of the Radix UI Dropdown Menu primitive and extends its functionality with additional styling options, animations, and positioning features.
Dropdown.Root
The container component that provides the main dropdown functionality.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
position | "top""bottom""left""right" | "bottom" | The position where the dropdown menu will be displayed relative to the trigger. |
animationVariant | "scaleUp""slideDown""slideUp""slideLeft""slideRight""fadeIn" | "slideDown" | The animation style to use when opening and closing the dropdown. |
open | "boolean" | "undefined" | The controlled open state of the dropdown menu. |
onOpenChange | "function" | "undefined" | Event handler called when the open state of the dropdown menu changes. |
defaultOpen | "boolean" | "false" | The open state of the dropdown menu when it is initially rendered. |
Dropdown.Trigger
The button that opens the dropdown menu.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | "boolean" | "false" | Change the default rendered element for the one passed as a child. |
className | "string" | "undefined" | Additional CSS classes to apply to the trigger. |
Dropdown.Content
The component that contains the dropdown menu items.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm""md""lg""xl""auto" | "md" | Controls the minimum width of the dropdown content. |
sideOffset | "number" | "4" | The distance in pixels from the trigger. |
className | "string" | "undefined" | Additional CSS classes to apply to the content. |
forceMount | "boolean" | "undefined" | Force mounting when more control is needed. |
Dropdown.Item
The component that represents a selectable item in the dropdown menu.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
href | "string" | "undefined" | When provided, the item will render as an anchor element with this URL. |
disabled | "boolean" | "false" | When true, prevents the user from interacting with the item. |
className | "string" | "undefined" | Additional CSS classes to apply to the item. |
Dropdown.Sub
The component that provides a nested submenu functionality.
See Radix UI docs for base props.
| Prop | Type | Default | Description |
|---|---|---|---|
position | "top""bottom""left""right" | "right" | The position where the submenu will be displayed relative to its trigger. |
animationVariant | "scaleUp""slideDown""slideUp""slideLeft""slideRight""fadeIn" | "slideRight" | The animation style to use when opening and closing the submenu. |
open | "boolean" | "undefined" | The controlled open state of the submenu. |
onOpenChange | "function" | "undefined" | Event handler called when the open state of the submenu changes. |