Menu

A list of actions that opens from a trigger, with keyboard navigation and typeahead.

React, Vue, Solid, and Svelte

SourceRecipeArk UI docs

Built on Ark UI's Menu. Each item takes a value, and onSelect on Menu.Root reports which one was picked. Use asChild on an item to render it as a link.

Usage

import { Portal } from "@ark-ui/react/portal"
import { Button } from "@isbatak/react-ui/button"
import { Menu } from "@isbatak/react-ui/menu"

export function MenuDemo() {
  return (
    <Menu.Root>
      <Menu.Trigger asChild>
        <Button variant="outline">Actions</Button>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="rename">Rename</Menu.Item>
            <Menu.Item value="duplicate">Duplicate</Menu.Item>
            <Menu.Separator />
            <Menu.Item value="delete" color="fg.error">
              Delete
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}