OOratiq

Dropdown Menu

Ready

Menu from a trigger.

Requires radix-ui

Installation

$ npx @oratiq-js/ui add dropdown-menu

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuRadioGroup, /* … */ } from "@/components/ui/dropdown-menu";

Default

Submenus open toward the reading direction

In RTL the submenu opens to the left, and the trigger's chevron mirrors with it. Both come free — Radix resolves placement from the DirectionProvider, and the chevron carries .rtl-flip.

Accessibility

  • Full keyboard support: arrows move, Enter activates, Escape closes, typing jumps to a matching item.
  • Arrow-key direction inverts under RTL.
  • Destructive items are marked with data-variant, giving them colour and a distinct focus state — not colour alone.
  • Shortcut hints are pinned dir="ltr" so ⌘K never renders as K⌘.

View source on GitHub → components/ui/dropdown-menu.tsx