zeroUI

Dropdown menu

A list of actions in a panel that drops from its trigger. The rows are Select's: slabs cut at the end, filled with the accent while highlighted.

Install

terminal
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/dropdown-menu

Examples

Actions, a toggle, a choice

dropdown-menu-basic.tsx
import { useState } from "react";import { Button } from "@/components/zero/button";import {  DropdownMenu,  DropdownMenuCheckboxItem,  DropdownMenuContent,  DropdownMenuGroup,  DropdownMenuItem,  DropdownMenuLabel,  DropdownMenuRadioGroup,  DropdownMenuRadioItem,  DropdownMenuSeparator,  DropdownMenuShortcut,  DropdownMenuTrigger,} from "@/components/zero/dropdown-menu";import { ExternalIcon } from "@/components/zero/icons";export default function DropdownMenuBasic() {  const [radio, setRadio] = useState(true);  const [sort, setSort] = useState("reward");  return (    <DropdownMenu>      <DropdownMenuTrigger render={<Button variant="secondary" />}>        Job actions      </DropdownMenuTrigger>      <DropdownMenuContent>        <DropdownMenuGroup>          <DropdownMenuLabel>This job</DropdownMenuLabel>          <DropdownMenuItem>            Take it            <DropdownMenuShortcut>⌘T</DropdownMenuShortcut>          </DropdownMenuItem>          <DropdownMenuItem>            Open the route            <ExternalIcon className="ms-auto" />          </DropdownMenuItem>          <DropdownMenuItem disabled>Hand in</DropdownMenuItem>        </DropdownMenuGroup>        <DropdownMenuSeparator />        <DropdownMenuCheckboxItem checked={radio} onCheckedChange={setRadio}>          Radio on        </DropdownMenuCheckboxItem>        <DropdownMenuSeparator />        <DropdownMenuGroup>          <DropdownMenuLabel>Sort by</DropdownMenuLabel>          <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>            <DropdownMenuRadioItem value="reward">Reward</DropdownMenuRadioItem>            <DropdownMenuRadioItem value="distance">              Distance            </DropdownMenuRadioItem>          </DropdownMenuRadioGroup>        </DropdownMenuGroup>        <DropdownMenuSeparator />        <DropdownMenuItem danger>Abandon</DropdownMenuItem>      </DropdownMenuContent>    </DropdownMenu>  );}

Behaviour

Rows take an icon or a DropdownMenuShortcut; a checkbox row shows a check, a radio row the small slanted mark of a chosen Select row; danger turns a row red.

Arrow keys move the highlight, typing jumps to a row, Enter activates it. Submenus are not part of this release.

Props

DropdownMenuContent

PropTypeDefaultDescription
side"top" | "bottom" | "left" | "right""bottom"Where it opens from the trigger.
align"start" | "center" | "end""start"How it lines up with the trigger.

Also takes every prop of Base UI's Menu.Popup.

DropdownMenuItem

PropTypeDefaultDescription
dangerbooleanfalseA destructive action: red, and red when highlighted.

Also takes every prop of Base UI's Menu.Item.

DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut

Also takes every prop of Base UI's Menu.CheckboxItem.