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
layout-components.mddocs/
Layout Components
Components for organizing and structuring menu layout including groups, labels, separators, and arrows. These components help create well-organized and visually structured dropdown menus.
Capabilities
DropdownMenuGroup (Group)
Container component for grouping related menu items together, providing semantic organization.
/**
* Container for grouping related menu items
* Provides semantic grouping without visual changes
*/
interface DropdownMenuGroupProps {
children?: React.ReactNode;
}
const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuGroupProps>;Usage Examples:
<DropdownMenu.Content>
<DropdownMenu.Group>
<DropdownMenu.Item>New File</DropdownMenu.Item>
<DropdownMenu.Item>New Folder</DropdownMenu.Item>
</DropdownMenu.Group>
<DropdownMenu.Separator />
<DropdownMenu.Group>
<DropdownMenu.Item>Cut</DropdownMenu.Item>
<DropdownMenu.Item>Copy</DropdownMenu.Item>
<DropdownMenu.Item>Paste</DropdownMenu.Item>
</DropdownMenu.Group>
</DropdownMenu.Content>DropdownMenuLabel (Label)
Label component for providing section headers and descriptions within menu groups.
/**
* Label component for menu sections
* Provides descriptive text that doesn't receive focus
* @param asChild - Compose with child element
*/
interface DropdownMenuLabelProps {
asChild?: boolean;
children?: React.ReactNode;
}
const DropdownMenuLabel: React.ForwardRefExoticComponent<DropdownMenuLabelProps>;Usage Examples:
<DropdownMenu.Content>
<DropdownMenu.Label>File Operations</DropdownMenu.Label>
<DropdownMenu.Item>New File</DropdownMenu.Item>
<DropdownMenu.Item>Open File</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Label>Edit Operations</DropdownMenu.Label>
<DropdownMenu.Item>Cut</DropdownMenu.Item>
<DropdownMenu.Item>Copy</DropdownMenu.Item>
</DropdownMenu.Content>
// Custom label using asChild
<DropdownMenu.Label asChild>
<h3 className="menu-section-header">Recent Files</h3>
</DropdownMenu.Label>DropdownMenuSeparator (Separator)
Visual separator component for creating distinct sections within the menu.
/**
* Visual separator for creating menu sections
* Renders as a horizontal line between menu items
*/
interface DropdownMenuSeparatorProps {
children?: React.ReactNode;
}
const DropdownMenuSeparator: React.ForwardRefExoticComponent<DropdownMenuSeparatorProps>;Usage Examples:
<DropdownMenu.Content>
<DropdownMenu.Item>New</DropdownMenu.Item>
<DropdownMenu.Item>Open</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Settings</DropdownMenu.Item>
<DropdownMenu.Item>Help</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Quit</DropdownMenu.Item>
</DropdownMenu.Content>DropdownMenuArrow (Arrow)
Arrow component that points from the menu content to the trigger element.
/**
* Arrow pointing from content to trigger element
* @param width - Width of the arrow in pixels
* @param height - Height of the arrow in pixels
* @param asChild - Compose with child element
*/
interface DropdownMenuArrowProps {
width?: number;
height?: number;
asChild?: boolean;
}
const DropdownMenuArrow: React.ForwardRefExoticComponent<DropdownMenuArrowProps>;Usage Examples:
<DropdownMenu.Content>
<DropdownMenu.Arrow />
<DropdownMenu.Item>Menu Item</DropdownMenu.Item>
</DropdownMenu.Content>
// Custom sized arrow
<DropdownMenu.Content>
<DropdownMenu.Arrow width={10} height={5} />
<DropdownMenu.Item>Menu Item</DropdownMenu.Item>
</DropdownMenu.Content>
// Custom arrow using asChild
<DropdownMenu.Content>
<DropdownMenu.Arrow asChild>
<div className="custom-arrow" />
</DropdownMenu.Arrow>
<DropdownMenu.Item>Menu Item</DropdownMenu.Item>
</DropdownMenu.Content>Complete Layout Example
function ComplexDropdownMenu() {
const [showGrid, setShowGrid] = React.useState(false);
const [viewMode, setViewMode] = React.useState('list');
return (
<DropdownMenu.Root>
<DropdownMenu.Trigger>View Options</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content>
<DropdownMenu.Arrow />
<DropdownMenu.Label>View Settings</DropdownMenu.Label>
<DropdownMenu.Group>
<DropdownMenu.CheckboxItem
checked={showGrid}
onCheckedChange={setShowGrid}
>
<DropdownMenu.ItemIndicator>✓</DropdownMenu.ItemIndicator>
Show Grid
</DropdownMenu.CheckboxItem>
</DropdownMenu.Group>
<DropdownMenu.Separator />
<DropdownMenu.Label>View Mode</DropdownMenu.Label>
<DropdownMenu.RadioGroup value={viewMode} onValueChange={setViewMode}>
<DropdownMenu.RadioItem value="list">
<DropdownMenu.ItemIndicator>●</DropdownMenu.ItemIndicator>
List View
</DropdownMenu.RadioItem>
<DropdownMenu.RadioItem value="grid">
<DropdownMenu.ItemIndicator>●</DropdownMenu.ItemIndicator>
Grid View
</DropdownMenu.RadioItem>
</DropdownMenu.RadioGroup>
<DropdownMenu.Separator />
<DropdownMenu.Group>
<DropdownMenu.Item>Refresh</DropdownMenu.Item>
<DropdownMenu.Item>Reset View</DropdownMenu.Item>
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
);
}Component Aliases
// Short aliases for composition patterns
const Group = DropdownMenuGroup;
const Label = DropdownMenuLabel;
const Separator = DropdownMenuSeparator;
const Arrow = DropdownMenuArrow;These layout components help create well-structured and visually organized dropdown menus with proper semantic grouping and visual separation.
Install with Tessl CLI
npx tessl i tessl/npm-radix-ui--react-dropdown-menu