DropdownMenu

Displays a menu of actions triggered by a button. Replaces the legacy Dropdown component with Radix UI primitives for enhanced accessibility and flexibility.

Installation

# Install @opencosmos/ui to use DropdownMenu
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

open— Controls the open state of the dropdown menu

showIcons— Show visual indicator icon on the trigger button

iconType— Style of the trigger icon

Usage

Import

import { DropdownMenu } from '@opencosmos/ui';

Example

<DropdownMenu>
  Content
</DropdownMenu>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
open	boolean	false	Controls the open state of the dropdown menu
showIcons	boolean	true	Show visual indicator icon on the trigger button
iconType	arrow \| dots	"arrow"	Style of the trigger icon

Accessibility

Built on Radix UI DropdownMenu primitive with full ARIA support
Keyboard navigation with arrow keys, Enter, and Escape
Focus management and loop within menu items
Screen reader accessible with proper roles and labels
Supports typeahead to jump to menu items

Code Examples

Basic Usage

Simple dropdown menu with labeled sections

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Button } from '@opencosmos/ui';

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>