Menu

A menu component usable directly in the document flow, with grouping, two-level submenus and keyboard navigation

Installation

$npx litefy@latest add menu
$pnpm dlx litefy@latest add menu
$yarn dlx litefy@latest add menu
$bun --bun litefy@latest add menu

Usage

A menu rendered directly in document flow — no trigger or popover wrapper; items are driven by the items config and container styling is yours to provide.

Selected: -

"use client";

import { useState, type ReactNode } from "react";
import { Menu, type MenuConfig } from "@/ui";

const items: MenuConfig[] = [
  {
    group: "Account",
    items: [
      { label: "Profile" },
      { label: "Preferences", children: [{ label: "Theme" }, { label: "Language" }] },
    ],
  },
  {
    group: "System",
    items: [{ label: "Notifications" }, { label: "Settings" }, { label: "Logout" }],
  },
];

export default function Demo() {
  const [selected, setSelected] = useState<ReactNode | null>(null);

  return (
    <div className="flex flex-col items-center gap-3">
      <Menu
        items={items}
        className="w-48 rounded-xl border bg-background p-1 shadow-elevated"
        onSelect={(item) => setSelected(item.label)}
      />
      <p className="text-sm text-muted-foreground">Selected: {selected ?? "-"}</p>
    </div>
  );
}

Key	Behavior
`ArrowDown` / `ArrowUp`	Move between enabled items (wraps around)
`ArrowRight`	Open the submenu of the current item
`ArrowLeft`	Close the submenu and return to the parent item
`Enter`	Select the focused item
`Escape`	Calls `onEscape` and closes the submenu

Escape forwards to your onEscape handler so a wrapping popover (e.g. Popover) can close itself.

API Reference

Prop	Type	Default	Description
`items`	`MenuConfig[]`	-	Menu item config, see items below. Required
`autoFocus`	`boolean`	-	Focuses the first enabled item whenever it turns `true`; pass `open` of a wrapping popover to focus on each open
`onSelect`	`(item: MenuItemConfig) => void`	-	Fired when an item is selected via click or keyboard
`onEscape`	`() => void`	-	Fired when `Escape` is pressed inside the menu
`className`	`ClassNameValue`	-	Custom class for the root list; container styling belongs here in the document flow
`style`	`React.CSSProperties`	-	Inline style for the root list
`itemClassName`	`ClassNameValue`	-	Class applied to every item button
`classNames`	`{ item?; label?; sub? }`	-	Custom classes for each part
`styles`	`{ item?; label?; sub? }`	-	Custom inline styles for each part

items

type MenuItemConfig = {
  label: React.ReactNode;
  disabled?: boolean;
  className?: ClassNameValue;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  children?: Omit<MenuItemConfig, "children">[];
};

type MenuGroupConfig = {
  group: React.ReactNode;
  items: MenuItemConfig[];
};

type MenuConfig = MenuGroupConfig | MenuItemConfig;

Composable Components

MenuRoot

The root list (ul with role="menu"), built-in m-0 list-none p-0.

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom class name
`...props`	`React.ComponentProps<"ul">`	-	Supports all native ul props

MenuItem

Menu item wrapper (li) with built-in m-0 not-last:border-b; the composite renders a role="menuitem" button inside.

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom class name
`...props`	`React.ComponentProps<"li">`	-	Supports all native li props

MenuLabel

Group label row (li) with built-in muted label styling.

Prop	Type	Default	Description
`className`	`ClassNameValue`	-	Custom class name
`...props`	`React.ComponentProps<"li">`	-	Supports all native li props

MenuSubContent

Submenu panel container rendered as a popover="manual" div; anchor it to the parent item via positionAnchor (each item's anchor-name is --menu-sub-{entryId}).

Prop	Type	Default	Description
`positionAnchor`	`string`	-	`anchor-name` of the parent menu item
`className`	`ClassNameValue`	-	Custom class name
`...props`	`React.ComponentProps<"div">`	-	Supports all native div props