or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-components.mdindex.mdinteractive-items.mdmenu-items.mdsubmenus.mdutilities.md
tile.json

tessl/npm-radix-ui--react-menubar

An accessible React menubar component that provides keyboard navigation, submenus, and customizable styling while maintaining semantic HTML structure and screen reader compatibility.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@radix-ui/react-menubar@1.1.x

To install, run

npx @tessl/cli install tessl/npm-radix-ui--react-menubar@1.1.0

index.mddocs/

Radix UI React Menubar

Radix UI React Menubar is a comprehensive collection of React components for building accessible menubar interfaces. It provides keyboard navigation, submenu support, and complete accessibility features while maintaining semantic HTML structure and screen reader compatibility.

Package Information

  • Package Name: @radix-ui/react-menubar
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @radix-ui/react-menubar

Core Imports

'use client';
import * as Menubar from "@radix-ui/react-menubar";

Or import specific components:

'use client';
import { 
  Menubar, 
  MenubarMenu, 
  MenubarTrigger, 
  MenubarContent, 
  MenubarItem 
} from "@radix-ui/react-menubar";

Alternative short-form imports:

'use client';
import { 
  Root, 
  Menu, 
  Trigger, 
  Content, 
  Item 
} from "@radix-ui/react-menubar";

Basic Usage

'use client';
import * as Menubar from "@radix-ui/react-menubar";

function MenubarDemo() {
  return (
    <Menubar.Root>
      <Menubar.Menu>
        <Menubar.Trigger>File</Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content>
            <Menubar.Item>New File</Menubar.Item>
            <Menubar.Item>Open</Menubar.Item>
            <Menubar.Separator />
            <Menubar.Item>Exit</Menubar.Item>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
      
      <Menubar.Menu>
        <Menubar.Trigger>Edit</Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content>
            <Menubar.Item>Cut</Menubar.Item>
            <Menubar.Item>Copy</Menubar.Item>
            <Menubar.Item>Paste</Menubar.Item>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
    </Menubar.Root>
  );
}

Architecture

Radix UI React Menubar is built around several key architectural components:

  • Primitive Foundation: Built on top of Radix UI primitives for consistent behavior and styling
  • Context Management: Uses React context for state management and component communication
  • Focus Management: Implements roving tabindex pattern for keyboard navigation
  • Portal Rendering: Optional portal-based rendering for dropdown content positioning
  • Accessibility-First: Full ARIA attributes, keyboard navigation, and screen reader support
  • Composable Design: Individual components that can be combined flexibly

Capabilities

Core Menubar Structure

Essential components for creating the basic menubar structure and managing overall state.

// Root menubar container
function Menubar(props: MenubarProps): React.ReactElement;

// Individual menu within the menubar
function MenubarMenu(props: MenubarMenuProps): React.ReactElement;

// Button that triggers menu opening
function MenubarTrigger(props: MenubarTriggerProps): React.ReactElement;

// Portal for rendering content outside DOM tree
function MenubarPortal(props: MenubarPortalProps): React.ReactElement;

// Container for menu items
function MenubarContent(props: MenubarContentProps): React.ReactElement;

Core Components

Menu Items and Layout

Components for organizing and displaying menu items with various interaction patterns.

// Basic interactive menu item
function MenubarItem(props: MenubarItemProps): React.ReactElement;

// Group related menu items
function MenubarGroup(props: MenubarGroupProps): React.ReactElement;

// Non-interactive label for sections
function MenubarLabel(props: MenubarLabelProps): React.ReactElement;

// Visual separator between groups
function MenubarSeparator(props: MenubarSeparatorProps): React.ReactElement;

Menu Items and Layout

Interactive Menu Items

Advanced menu items with checkbox, radio button, and visual indicator functionality.

// Menu item with checkbox behavior
function MenubarCheckboxItem(props: MenubarCheckboxItemProps): React.ReactElement;

// Container for radio button items
function MenubarRadioGroup(props: MenubarRadioGroupProps): React.ReactElement;

// Menu item with radio button behavior
function MenubarRadioItem(props: MenubarRadioItemProps): React.ReactElement;

// Visual indicator for checked/selected items
function MenubarItemIndicator(props: MenubarItemIndicatorProps): React.ReactElement;

Interactive Items

Submenus and Advanced Features

Components for creating nested submenus and additional visual elements.

// Container for submenu functionality
function MenubarSub(props: MenubarSubProps): React.ReactElement;

// Trigger that opens a submenu
function MenubarSubTrigger(props: MenubarSubTriggerProps): React.ReactElement;

// Content container for submenu items
function MenubarSubContent(props: MenubarSubContentProps): React.ReactElement;

// Optional arrow pointing from trigger to content
function MenubarArrow(props: MenubarArrowProps): React.ReactElement;

Submenus

Utilities

Utility functions for advanced usage patterns and context management.

// Creates scoped context for nested menubars
function createMenubarScope(): ScopeHook;

Utilities

Common Type Definitions

// Direction for text and navigation
type Direction = 'ltr' | 'rtl';

// Base element types
type MenubarElement = React.ComponentRef<'div'>;
type MenubarTriggerElement = React.ComponentRef<'button'>;
type MenubarContentElement = HTMLDivElement;
type MenubarGroupElement = HTMLDivElement;
type MenubarLabelElement = HTMLDivElement;
type MenubarItemElement = HTMLDivElement;
type MenubarCheckboxItemElement = HTMLDivElement;
type MenubarRadioGroupElement = HTMLDivElement;
type MenubarRadioItemElement = HTMLDivElement;
type MenubarItemIndicatorElement = HTMLSpanElement;
type MenubarSeparatorElement = HTMLDivElement;
type MenubarArrowElement = SVGSVGElement;
type MenubarSubTriggerElement = HTMLDivElement;
type MenubarSubContentElement = HTMLDivElement;

// Scoping types
interface Scope {
  __scopeMenubar?: string;
}

type ScopeHook = () => Scope;

// Event types
interface FocusOutsideEvent {
  target: HTMLElement;
  preventDefault(): void;
}

interface InteractOutsideEvent {
  target: HTMLElement;
  preventDefault(): void;
}

interface PointerDownOutsideEvent {
  target: HTMLElement;
  preventDefault(): void;
}

interface SelectEvent {
  preventDefault(): void;
  target: HTMLElement;
}

// State types  
type CheckedState = boolean | 'indeterminate';

// Collection item data
interface ItemData {
  value: string;
  disabled: boolean;
}