tessl/npm-chakra-ui--menu

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Chakra UI Menu

Name: tessl/npm-chakra-ui--menu
Author: tessl

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>
  );
}