Overlays & Tooltips

Dropdown Menu

Actions menu with submenus.

Import

tsx

import { DropdownMenu } from "@cronus-ui/ui";

bash

npx cronus-ui add dropdown-menu

Examples

Actions

A rich menu with icons, shortcuts, a checkbox item, and a submenu.

tsx

function ActionsMenu() {
  const [showStatusBar, setShowStatusBar] = useState(true);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open menu</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="start">
        <DropdownMenuLabel>My account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <User aria-hidden="true" />
            Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <CreditCard aria-hidden="true" />
            Billing
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <Settings aria-hidden="true" />
            Settings
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem
          checked={showStatusBar}
          onCheckedChange={setShowStatusBar}
        >
          Show status bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>
            <Users aria-hidden="true" />
            Invite team
          </DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>
              <UserPlus aria-hidden="true" />
              Email invite
            </DropdownMenuItem>
            <DropdownMenuItem>
              <Copy aria-hidden="true" />
              Copy invite link
            </DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component DropdownMenuDefault layout:inline style:dropdown-menu {
  label "Actions"
  text "Edit"
  text "Delete"
}

page "/audit/dropdown-menu/default" type:custom {
  use DropdownMenuDefault
}

API Reference

Generated from the component's exported types.

DropdownMenuProps

Extends ComponentProps<typeof DropdownMenuPrimitive.Root>

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.
`children`	`ReactNode`	—	Contents of the component.
`modal`	`boolean`	—	When true, interaction outside the surface is blocked.
`dir`	`"ltr" \| "rtl"`	—	Reading direction. Inherits from the document when omitted.

DropdownMenuTriggerProps

Extends ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.Trigger >

Prop	Type	Default	Description
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

DropdownMenuGroupProps

Extends ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>

Prop	Type	Default	Description
`children`	`ReactNode`	—	Contents of the component.

DropdownMenuPortalProps

Extends ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>

Prop	Type	Default	Description
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.

DropdownMenuSubProps

Extends ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	—	Called when the open state changes.

DropdownMenuRadioGroupProps

Extends ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.RadioGroup >

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`onValueChange`	`(value: string) => void`	—	Called when the value changes.

DropdownMenuSubTriggerProps

Extends ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.SubTrigger >

Prop	Type	Default	Description
`inset`	`boolean`	—	—
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.

DropdownMenuSubContentProps

Extends ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.SubContent >

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	—	Preferred side of the trigger.
`align`	`"start" \| "center" \| "end"`	—	Alignment along the chosen side.
`sideOffset`	`number`	—	Distance in pixels from the trigger.
`alignOffset`	`number`	—	Offset along the alignment axis.
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

DropdownMenuContentProps

Extends ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.Content >

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	—	Preferred side of the trigger.
`align`	`"start" \| "center" \| "end"`	—	Alignment along the chosen side.
`sideOffset`	`number`	—	Distance in pixels from the trigger.
`alignOffset`	`number`	—	Offset along the alignment axis.
`forceMount`	`boolean`	—	Keep the node mounted when closed, for exit animation.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

DropdownMenuItemProps

Extends ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>

Prop	Type	Default	Description
`inset`	`boolean`	—	—
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onSelect`	`(event: Event) => void`	—	Called when the item is chosen.
`textValue`	`string`	—	Text used for typeahead. Defaults to the item's text.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

DropdownMenuCheckboxItemProps

Extends ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.CheckboxItem >

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state. Pair with `onCheckedChange`.
`onCheckedChange`	`(checked: boolean) => void`	—	Called with the next checked value whenever the control toggles.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onSelect`	`(event: Event) => void`	—	Called when the item is chosen.
`textValue`	`string`	—	Text used for typeahead. Defaults to the item's text.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

DropdownMenuRadioItemProps

Extends ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.RadioItem >

Prop	Type	Default	Description
`value`	`string`	—	Controlled value.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`onSelect`	`(event: Event) => void`	—	Called when the item is chosen.
`textValue`	`string`	—	Text used for typeahead. Defaults to the item's text.
`asChild`	`boolean`	—	Render as the child element via Slot.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

DropdownMenuLabelProps

Extends ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.Label >

Prop	Type	Default	Description
`inset`	`boolean`	—	—
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

DropdownMenuSeparatorProps

Extends ComponentPropsWithoutRef< typeof DropdownMenuPrimitive.Separator >

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.

DropdownMenuShortcutProps

Extends HTMLAttributes<HTMLSpanElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.