@pras-ui/menu

A low-level, headless component for building accessible menus and submenus. This package handles state management, keyboard interactions, and accessibility.

This package provides the core puzzle pieces for creating menu-type components like popups, dropdowns, and dialogs. It's designed to be composed with a positioning library (like @pras-ui/floating-kit) and an animation library (like @pras-ui/presence) to create fully-featured, interactive components.

Installation

npm install @pras-ui/menu

Usage

Here is a basic example of how to create a menu. Note that this package does not handle showing, hiding, or positioning the menu content. It is intended to be used with a presence component (like @pras-ui/presence) and a positioning component.

import React from 'react';
import {
  MenuRoot,
  MenuTrigger,
  MenuContent,
  MenuItem,
} from '@pras-ui/menu';

function MyMenu() {
  const [open, setOpen] = React.useState(false);

  return (
    <MenuRoot open={open} onOpenChange={setOpen}>
      <MenuTrigger>
        <button>Open Menu</button>
      </MenuTrigger>

      {open && (
        <MenuContent>
          <MenuItem onSelect={() => alert('Copying')}>Copy</MenuItem>
          <MenuItem onSelect={() => alert('Pasting')}>Paste</MenuItem>
        </MenuContent>
      )}
    </MenuRoot>
  );
}

Components

This package exports the following headless components:

Core Menu

• MenuRoot: The root component that provides the context for the menu state.
• MenuTrigger: The element that opens or closes the menu.
• MenuContent: The wrapper for the menu items which handles keyboard navigation.
• MenuItem: The individual selectable items in the menu.

Sub-Menu

• SubMenuRoot: The root for a nested menu.
• SubMenuTrigger: The MenuItem that opens a sub-menu.
• SubMenuContent: The content wrapper for a sub-menu.

Choice Items

• MenuChoice: A group of checkable or radio items.
• MenuChoiceItem: A selectable item within a MenuChoice group.
• MenuChoiceIndicator: A visual indicator for the selected state of a MenuChoiceItem.

Grouping

• MenuGroup: A component to group related items.
• MenuLabel: The label for a MenuGroup.