Dropdown menu

Pro

shadcn's dropdown menu (Radix) in Candor's theme.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/dropdown-menu

Brings in: render-prop, utils · npm: lucide-react@^1.67.0, radix-ui@^1.8.1

Usage

TSX · The example above

"use client"

import { MoreHorizontal, Pencil, Pin, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon" aria-label="Thread actions">
          <MoreHorizontal />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-48">
        <DropdownMenuLabel>Clean up stale flags</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <Pencil /> Rename
          <DropdownMenuShortcut>R</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Pin /> Pin
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <Trash2 /> Delete thread
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

<DropdownMenu>

No props.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.Root>.

<DropdownMenuPortal>

No props.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.Portal>.

<DropdownMenuTrigger>

No props.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>RenderProp.

<DropdownMenuContent>

No props.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.Content>.

<DropdownMenuGroup>

No props.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.Group>.

<DropdownMenuLabel>

Prop	Type	Default	Description
inset	`boolean \| undefined`	—	Indents the label to line up with items that have an icon.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.Label>.

<DropdownMenuItem>

Prop	Type	Default	Description
inset	`boolean \| undefined`	—	Indents the item to line up with items that have an icon.
variant	`"default" \| "destructive" \| undefined`	"default"	destructive colours the item for actions that remove or can't be undone.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.Item>.

<DropdownMenuCheckboxItem>

No props.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>.

<DropdownMenuRadioGroup>

No props.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>.

<DropdownMenuRadioItem>

No props.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>.

<DropdownMenuSeparator>

No props.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.Separator>.

<DropdownMenuShortcut>

No props.

Also takes the props of React.ComponentProps<"span">.

<DropdownMenuSub>

No props.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.Sub>.

<DropdownMenuSubTrigger>

Prop	Type	Default	Description
inset	`boolean \| undefined`	—	Indents the trigger to line up with items that have an icon.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>.

<DropdownMenuSubContent>

No props.

Also takes the props of React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>.