Menu

A menu that pours out of its button like liquid.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/menu

Needs the @liquikit registry in your components.json. Set it up once.

Usage#

import { Menu } from "@/components/liquikit/menu"

<Menu.Root>
  <Menu.Trigger>Options</Menu.Trigger>
  <Menu.Popup>
    <Menu.Item>Copy</Menu.Item>
    <Menu.Item>Rename</Menu.Item>
    <Menu.Separator />
    <Menu.Item>Delete</Menu.Item>
  </Menu.Popup>
</Menu.Root>

Menu.Trigger is a glass button. Menu.Item takes an icon.

Examples#

Alignment#

A menu opens over its trigger, with its leading edge lined up with the trigger's, so the first item lands under the pointer. Pass align to Menu.Popup to line it up by the centre or the trailing edge instead, and side or sideOffset to open it beside the trigger.

Checkbox and radio items#

Submenu#

A submenu opens from its own item, in a panel of its own.

API Reference#

Prop	Type	Default
`open`	`boolean` Whether the popup is open. Pair it with `onOpenChange` to control it.	—

Also takes every prop of Base UI's menu, plus className and style.

Prop	Type	Default
`side`	`BaseMenu.Positioner.Props["side"]` Which side of the trigger the popup opens on.	—
`align`	`BaseMenu.Positioner.Props["align"]` How the popup lines up with its trigger along that side.	—
`sideOffset`	`BaseMenu.Positioner.Props["sideOffset"]` Gap between the trigger and the popup, in pixels.	—
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"
`children`	`ReactNode` The content.	—

Also takes every prop of Base UI's menu, plus className and style.

Prop	Type	Default
`open`	`boolean` Whether the popup is open. Pair it with `onOpenChange` to control it.	—

Also takes every prop of Base UI's menu, plus className and style.