or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-components.mdhooks.mdindex.mdoption-components.mdutility-components.md
tile.json

tessl/npm-chakra-ui--menu

A React component to render accessible menus with comprehensive dropdown functionality and WAI-ARIA compliance

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@chakra-ui/menu@2.2.x

To install, run

npx @tessl/cli install tessl/npm-chakra-ui--menu@2.2.0

index.mddocs/

Chakra UI Menu

A comprehensive React component library for building accessible dropdown menus, context menus, and navigation systems that follow WAI-ARIA guidelines. Provides full keyboard navigation, focus management, positioning, and extensive customization options with built-in accessibility features.

Package Information

  • Package Name: @chakra-ui/menu
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @chakra-ui/menu

Core Imports

import {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  MenuGroup,
  MenuDivider,
  MenuOptionGroup,
  MenuItemOption,
} from "@chakra-ui/menu";

For CommonJS:

const {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  MenuGroup,
  MenuDivider,
  MenuOptionGroup,
  MenuItemOption,
} = require("@chakra-ui/menu");

Basic Usage

import {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
} from "@chakra-ui/menu";

function BasicMenu() {
  return (
    <Menu>
      <MenuButton>Actions</MenuButton>
      <MenuList>
        <MenuItem>Download</MenuItem>
        <MenuItem>Create a Copy</MenuItem>
        <MenuItem>Mark as Draft</MenuItem>
        <MenuItem>Delete</MenuItem>
      </MenuList>
    </Menu>
  );
}

// With option groups
function AdvancedMenu() {
  return (
    <Menu closeOnSelect={false}>
      <MenuButton>Options</MenuButton>
      <MenuList>
        <MenuOptionGroup defaultValue="asc" title="Sort Order" type="radio">
          <MenuItemOption value="asc">Ascending</MenuItemOption>
          <MenuItemOption value="desc">Descending</MenuItemOption>
        </MenuOptionGroup>
        <MenuDivider />
        <MenuOptionGroup title="Filters" type="checkbox">
          <MenuItemOption value="active">Show Active</MenuItemOption>
          <MenuItemOption value="completed">Show Completed</MenuItemOption>
        </MenuOptionGroup>
      </MenuList>
    </Menu>
  );
}

Architecture

Chakra UI Menu is built around several key architectural patterns:

  • Context-Based State Management: Menu state is managed through React context and shared across all child components
  • Descendant Tracking: Uses a descendant context system to track and manage focus between menu items
  • Accessibility-First Design: Built with WAI-ARIA guidelines, including proper roles, states, and keyboard navigation
  • Positioning System: Integrates with Popper.js for dynamic menu positioning and collision detection
  • Animation System: Uses Framer Motion for smooth open/close animations with customizable transitions
  • Hook-Based API: Provides low-level hooks for custom menu implementations and advanced use cases
  • Composable Components: Each component can be used independently or combined for complex menu structures

Capabilities

Core Menu Components

Essential components for building basic dropdown menus with proper structure and accessibility.

// Root menu context provider
const Menu: React.FC<MenuProps>;

// Menu trigger button  
const MenuButton: React.ForwardRefExoticComponent<MenuButtonProps>;

// Menu container with positioning and animation
const MenuList: React.ForwardRefExoticComponent<MenuListProps>;

// Individual menu items
const MenuItem: React.ForwardRefExoticComponent<MenuItemProps>;

Core Components

Selectable Option Components

Components for creating menus with radio and checkbox selection functionality.

// Container for selectable options
const MenuOptionGroup: React.FC<MenuOptionGroupProps>;

// Selectable menu item with check/radio states
const MenuItemOption: React.ForwardRefExoticComponent<MenuItemOptionProps>;

Option Components

Utility Components

Supporting components for menu structure, styling, and visual organization.

// Group related menu items
const MenuGroup: React.ForwardRefExoticComponent<MenuGroupProps>;

// Visual separator
const MenuDivider: React.FC<MenuDividerProps>;

// Command/shortcut text display
const MenuCommand: React.ForwardRefExoticComponent<MenuCommandProps>;

// Icon wrapper with proper styling
const MenuIcon: React.FC<HTMLChakraProps<"span">>;

Utility Components

Hooks and Context

Low-level hooks for custom menu implementations and accessing menu state.

// Main menu state and logic hook
function useMenu(props?: UseMenuProps): UseMenuReturn;

// Menu button behavior hook
function useMenuButton(props?: UseMenuButtonProps, ref?: React.Ref<any>): ButtonProps;

// Menu list behavior hook  
function useMenuList(props?: UseMenuListProps, ref?: React.Ref<any>): ListProps;

// Menu item behavior hook
function useMenuItem(props?: UseMenuItemProps, ref?: React.Ref<any>): ItemProps;

// Access menu context
function useMenuContext(): MenuContextValue;

// Access menu styles
function useMenuStyles(): Record<string, SystemStyleObject>;

Hooks and Context

Key Features

  • Full Accessibility: WAI-ARIA compliant with screen reader support and keyboard navigation
  • Keyboard Navigation: Arrow keys, Enter, Escape, Tab, and typeahead search support
  • Focus Management: Automatic focus handling with proper focus restoration
  • Dynamic Positioning: Smart positioning with collision detection using Popper.js
  • Smooth Animations: Configurable enter/exit animations with Framer Motion
  • Selection Groups: Radio and checkbox selection with controlled/uncontrolled modes
  • Customizable Styling: Full Chakra UI theme integration with style overrides
  • TypeScript Support: Complete type definitions for all components and hooks
  • Performance Optimized: Lazy rendering options and efficient re-rendering patterns
  • Flexible API: Both high-level components and low-level hooks for custom implementations

Common Patterns

Controlled Menu State

function ControlledMenu() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <Menu isOpen={isOpen} onClose={() => setIsOpen(false)}>
      <MenuButton onClick={() => setIsOpen(!isOpen)}>
        Menu
      </MenuButton>
      <MenuList>
        <MenuItem>Item 1</MenuItem>
        <MenuItem>Item 2</MenuItem>
      </MenuList>
    </Menu>
  );
}

Render Props Pattern

function RenderPropsMenu() {
  return (
    <Menu>
      {({ isOpen, onClose }) => (
        <>
          <MenuButton>
            {isOpen ? "Close Menu" : "Open Menu"}
          </MenuButton>
          <MenuList>
            <MenuItem onClick={onClose}>Close and Do Action</MenuItem>
          </MenuList>
        </>
      )}
    </Menu>
  );
}

Custom Menu Items

function CustomMenu() {
  return (
    <Menu>
      <MenuButton>Custom Items</MenuButton>
      <MenuList>
        <MenuItem icon={<DownloadIcon />} command="⌘D">
          Download
        </MenuItem>
        <MenuItem as="a" href="/profile">
          Profile
        </MenuItem>
        <MenuItem isDisabled>
          Disabled Item
        </MenuItem>
      </MenuList>
    </Menu>
  );
}