tessl/npm-radix-ui--react-dropdown-menu
A React dropdown menu component library providing accessible dropdown menu functionality with keyboard navigation and focus management.
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
menu-items.mddocs/
Menu Items
Individual menu items including basic items, checkbox items, radio items, and their indicators. These components represent the interactive elements within dropdown menus.
Capabilities
DropdownMenuItem (Item)
Basic menu item component that can be clicked or selected via keyboard navigation.
/**
* Basic interactive menu item
* @param disabled - Whether the item is disabled
* @param onSelect - Callback when item is selected
* @param textValue - Text value for typeahead functionality
* @param asChild - Compose with child element
*/
interface DropdownMenuItemProps {
disabled?: boolean;
onSelect?: (event: Event) => void;
textValue?: string;
asChild?: boolean;
children?: React.ReactNode;
}
const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps>;Usage Examples:
// Basic menu item
<DropdownMenu.Item onSelect={() => console.log('Selected')}>
New File
</DropdownMenu.Item>
// Disabled item
<DropdownMenu.Item disabled>
Unavailable Option
</DropdownMenu.Item>
// Custom item using asChild
<DropdownMenu.Item asChild>
<a href="/settings">Settings</a>
</DropdownMenu.Item>
// Item with custom text value for typeahead
<DropdownMenu.Item textValue="Copy to clipboard">
📋 Copy
</DropdownMenu.Item>DropdownMenuCheckboxItem (CheckboxItem)
Menu item with checkbox functionality for toggling boolean states.
/**
* Menu item with checkbox functionality
* @param checked - Controlled checked state
* @param onCheckedChange - Callback when checked state changes
* @param disabled - Whether the item is disabled
* @param onSelect - Callback when item is selected
* @param textValue - Text value for typeahead functionality
*/
interface DropdownMenuCheckboxItemProps {
checked?: boolean | 'indeterminate';
onCheckedChange?: (checked: boolean) => void;
disabled?: boolean;
onSelect?: (event: Event) => void;
textValue?: string;
children?: React.ReactNode;
}
const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps>;Usage Examples:
const [showBookmarks, setShowBookmarks] = React.useState(true);
const [showHistory, setShowHistory] = React.useState(false);
<DropdownMenu.CheckboxItem
checked={showBookmarks}
onCheckedChange={setShowBookmarks}
>
<DropdownMenu.ItemIndicator>
✓
</DropdownMenu.ItemIndicator>
Show Bookmarks
</DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxItem
checked={showHistory}
onCheckedChange={setShowHistory}
>
<DropdownMenu.ItemIndicator>
✓
</DropdownMenu.ItemIndicator>
Show History
</DropdownMenu.CheckboxItem>DropdownMenuRadioGroup (RadioGroup)
Container component for grouping radio button menu items with shared state.
/**
* Container for radio button menu items
* @param value - Currently selected value
* @param onValueChange - Callback when selected value changes
*/
interface DropdownMenuRadioGroupProps {
value?: string;
onValueChange?: (value: string) => void;
children?: React.ReactNode;
}
const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuRadioGroupProps>;DropdownMenuRadioItem (RadioItem)
Individual radio button menu item within a RadioGroup.
/**
* Radio button menu item
* @param value - Value of this radio item
* @param disabled - Whether the item is disabled
* @param onSelect - Callback when item is selected
* @param textValue - Text value for typeahead functionality
*/
interface DropdownMenuRadioItemProps {
value: string;
disabled?: boolean;
onSelect?: (event: Event) => void;
textValue?: string;
children?: React.ReactNode;
}
const DropdownMenuRadioItem: React.ForwardRefExoticComponent<DropdownMenuRadioItemProps>;Usage Examples:
const [theme, setTheme] = React.useState('light');
<DropdownMenu.RadioGroup value={theme} onValueChange={setTheme}>
<DropdownMenu.RadioItem value="light">
<DropdownMenu.ItemIndicator>
●
</DropdownMenu.ItemIndicator>
Light Theme
</DropdownMenu.RadioItem>
<DropdownMenu.RadioItem value="dark">
<DropdownMenu.ItemIndicator>
●
</DropdownMenu.ItemIndicator>
Dark Theme
</DropdownMenu.RadioItem>
<DropdownMenu.RadioItem value="system">
<DropdownMenu.ItemIndicator>
●
</DropdownMenu.ItemIndicator>
System Theme
</DropdownMenu.RadioItem>
</DropdownMenu.RadioGroup>DropdownMenuItemIndicator (ItemIndicator)
Visual indicator component that appears when checkbox or radio items are selected.
/**
* Visual indicator for checkbox/radio items
* Only rendered when parent item is in checked/selected state
* @param forceMount - Force mounting even when not indicated
*/
interface DropdownMenuItemIndicatorProps {
forceMount?: boolean;
children?: React.ReactNode;
}
const DropdownMenuItemIndicator: React.ForwardRefExoticComponent<DropdownMenuItemIndicatorProps>;Usage Examples:
// Checkbox indicator
<DropdownMenu.CheckboxItem checked={isChecked}>
<DropdownMenu.ItemIndicator>
<CheckIcon />
</DropdownMenu.ItemIndicator>
Enable Feature
</DropdownMenu.CheckboxItem>
// Radio indicator
<DropdownMenu.RadioItem value="option1">
<DropdownMenu.ItemIndicator>
<DotIcon />
</DropdownMenu.ItemIndicator>
Option 1
</DropdownMenu.RadioItem>
// Force-mounted indicator
<DropdownMenu.ItemIndicator forceMount>
<Icon />
</DropdownMenu.ItemIndicator>Component Aliases
// Short aliases for composition patterns
const Item = DropdownMenuItem;
const CheckboxItem = DropdownMenuCheckboxItem;
const RadioGroup = DropdownMenuRadioGroup;
const RadioItem = DropdownMenuRadioItem;
const ItemIndicator = DropdownMenuItemIndicator;These item components provide the interactive elements within dropdown menus and support various selection patterns including single selection, multi-selection with checkboxes, and exclusive selection with radio buttons.
Install with Tessl CLI
npx tessl i tessl/npm-radix-ui--react-dropdown-menu