A contextual menu for actions and navigation
Triggered by a button or element, the dropdown menu displays a floating panel with items, sections, keyboard shortcuts, a line of description under an item where the choice needs one, and nested sub-menus. Hover fills are inset from the panel edge for a refined look.
Default
Sections and groups
Sub-menus
With shortcuts
Compact
Selected state
When a menu picks one option from a set, give every member a selected value. The current choice holds a quiet fill and a check, and assistive technology hears the rows as radio items.
With descriptions
An item can carry a line of description under its label, for a choice a word alone does not settle. The row grows to two lines and keeps its icon centred on the pair; the rest of the menu is unchanged.
Checkbox items
When each option is picked on its own, give it a checked value. The row leads with the checkbox's own box, assistive technology hears it as a checkbox item, and choosing it leaves the menu open so several can be toggled in one visit. closeOnSelect overrides that either way.
// From the npm package
import { DropdownMenu } from 'rift-ds/components/DropdownMenu/DropdownMenu';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/dropdown-menu.json