uix-uiMenu
Menu item + dropdown menu. 2 types × 3 states.
import * as React from "react";
import { Copy, Search } from "@/components/ui/icons";
import { Menu, MenuItem, MenuSeparator } from "@/components/ui/menu";
export default function Example() {
const [grid, setGrid] = React.useState(true);
return (
<Menu style={{ width: 240, maxWidth: "100%" }} aria-label="Order actions">
<MenuItem icon={<Copy />} shortcut="⌘C">Copy order number</MenuItem>
<MenuItem icon={<Search />}>Find similar</MenuItem>
<MenuItem checked={grid} onClick={() => setGrid(!grid)}>Show as grid</MenuItem>
<MenuSeparator />
<MenuItem type="destructive">Cancel order</MenuItem>
</Menu>
);
}
Installation
$ npx uix-ui@latest add menuThis copies the file into components/ui/menu.tsx in your project. npx shadcn@latest add @uix/menu works too.
Usage
import { Menu, MenuItem, MenuSeparator } from "@/components/ui/menu";
<Menu style={{ width: 240, maxWidth: "100%" }} aria-label="Order actions">
<MenuItem icon={<Copy />} shortcut="⌘C">Copy order number</MenuItem>
<MenuItem icon={<Search />}>Find similar</MenuItem>
<MenuItem checked={grid} onClick={() => setGrid(!grid)}>Show as grid</MenuItem>
<MenuSeparator />
<MenuItem type="destructive">Cancel order</MenuItem>
</Menu>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | default | destructive | "default" | |
icon | React.ReactNode | – | Icon before the label. |
leadingAvatar | React.ReactNode | – | Avatar before the label. |
shortcut | React.ReactNode | – | Hint at the end, for example ⌘S. |
checked | boolean | – | Turns the item into a checkbox item and sets its state. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx
This file exports 3 parts: Menu, MenuItem, MenuSeparator. Use only the ones you need.