Components
Dropdown Menu
A versatile and accessible dropdown menu component with support for sub-menus, checkboxes, and radio groups.
Introduction
The DropdownMenu component is a flexible menu interface that supports various use cases, including sub-menus, checkbox selections, and radio group selections.
Default Use Case: Basic Dropdown Menu
Advanced Use Case 1: Checkbox Dropdown Menu
Advanced Use Case 2: Timezone Selection Dropdown
Installation
Install the DropdownMenu component using the following command:
File Structure
dropdown-menu.tsx
Prop Types
| Prop | Type | Default |
|---|---|---|
checked | boolean | - |
onCheckedChange | (checked: boolean) => void | - |
value | string | - |
onValueChange | (value: string) => void | - |
inset | boolean | - |
Features
- Nested Sub-Menus:
- Supports multi-level menu structures.
- Checkbox and Radio Integration:
- Use for multi-select or single-select preferences.
- Customizable:
- Easily adjust styling and behavior.
Accessibility
The DropdownMenu is designed with accessibility in mind:
- ARIA Roles:
- Implements ARIA attributes for a fully accessible experience.
- Keyboard Navigation:
- Navigate menus with
Tab,Arrow, andEnterkeys.
- Navigate menus with
- Screen Reader Support:
- Descriptive labels and focus management for screen readers.
Conclusion
The DropdownMenu component is a powerful and accessible solution for creating customizable menus, checkboxes, and radio selections.