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.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Interactive Items

Name: tessl/npm-radix-ui--react-menubar
Author: tessl

Advanced menu items with checkbox, radio button, and visual indicator functionality for creating interactive menus with state management.

Capabilities

MenubarCheckboxItem (CheckboxItem)

Menu item with checkbox behavior for toggling boolean state, ideal for settings and preferences.

/**
 * Menu item with checkbox behavior for toggling boolean values
 * @param props - Checkbox item props
 * @returns JSX element representing the checkbox menu item
 */
function MenubarCheckboxItem(props: MenubarCheckboxItemProps): React.ReactElement;

interface MenubarCheckboxItemProps extends React.ComponentPropsWithoutRef<'div'> {
  /** Whether the checkbox is checked */
  checked?: CheckedState;
  /** Callback fired when checked state changes */
  onCheckedChange?: (checked: CheckedState) => void;
  /** Whether the item is disabled */
  disabled?: boolean;
  /** Callback fired when the item is selected */
  onSelect?: (event: SelectEvent) => void;
  /** Text value for accessibility */
  textValue?: string;
}

Usage Examples:

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

// Basic checkbox item
const [showLineNumbers, setShowLineNumbers] = React.useState(false);

<Menubar.CheckboxItem 
  checked={showLineNumbers}
  onCheckedChange={setShowLineNumbers}
>
  <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
  Show Line Numbers
</Menubar.CheckboxItem>

// Multiple checkbox items for preferences
function PreferencesMenu() {
  const [wordWrap, setWordWrap] = React.useState(true);
  const [autoSave, setAutoSave] = React.useState(false);
  const [darkMode, setDarkMode] = React.useState(true);

  return (
    <Menubar.Content>
      <Menubar.Label>Editor Settings</Menubar.Label>
      
      <Menubar.CheckboxItem checked={wordWrap} onCheckedChange={setWordWrap}>
        <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
        Word Wrap
      </Menubar.CheckboxItem>
      
      <Menubar.CheckboxItem checked={autoSave} onCheckedChange={setAutoSave}>
        <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
        Auto Save
      </Menubar.CheckboxItem>
      
      <Menubar.CheckboxItem checked={darkMode} onCheckedChange={setDarkMode}>
        <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
        Dark Mode
      </Menubar.CheckboxItem>
    </Menubar.Content>
  );
}

MenubarRadioGroup (RadioGroup)

Container for radio items allowing single selection within a group.

/**
 * Container for radio items with single selection behavior
 * @param props - Radio group props
 * @returns JSX element representing the radio group
 */
function MenubarRadioGroup(props: MenubarRadioGroupProps): React.ReactElement;

interface MenubarRadioGroupProps extends React.ComponentPropsWithoutRef<'div'> {
  /** Currently selected value */
  value?: string;
  /** Callback fired when selection changes */
  onValueChange?: (value: string) => void;
  /** Child radio items */
  children?: React.ReactNode;
}

MenubarRadioItem (RadioItem)

Menu item with radio button behavior for single selection within a radio group.

/**
 * Menu item with radio button behavior for single selection
 * @param props - Radio item props
 * @returns JSX element representing the radio menu item
 */
function MenubarRadioItem(props: MenubarRadioItemProps): React.ReactElement;

interface MenubarRadioItemProps extends React.ComponentPropsWithoutRef<'div'> {
  /** Value for this radio item */
  value: string;
  /** Whether the item is disabled */
  disabled?: boolean;
  /** Callback fired when the item is selected */
  onSelect?: (event: SelectEvent) => void;
  /** Text value for accessibility */
  textValue?: string;
}

Usage Examples:

// Theme selection with radio group
function ThemeSelector() {
  const [theme, setTheme] = React.useState("light");

  return (
    <Menubar.Content>
      <Menubar.Label>Theme</Menubar.Label>
      <Menubar.RadioGroup value={theme} onValueChange={setTheme}>
        <Menubar.RadioItem value="light">
          <Menubar.ItemIndicator>•</Menubar.ItemIndicator>
          Light Theme
        </Menubar.RadioItem>
        
        <Menubar.RadioItem value="dark">
          <Menubar.ItemIndicator>•</Menubar.ItemIndicator>
          Dark Theme
        </Menubar.RadioItem>
        
        <Menubar.RadioItem value="auto">
          <Menubar.ItemIndicator>•</Menubar.ItemIndicator>
          Auto (System)
        </Menubar.RadioItem>
      </Menubar.RadioGroup>
    </Menubar.Content>
  );
}

// Font size selection
function FontSizeMenu() {
  const [fontSize, setFontSize] = React.useState("medium");

  return (
    <Menubar.RadioGroup value={fontSize} onValueChange={setFontSize}>
      <Menubar.RadioItem value="small">
        <Menubar.ItemIndicator>○</Menubar.ItemIndicator>
        Small (12px)
      </Menubar.RadioItem>
      
      <Menubar.RadioItem value="medium">
        <Menubar.ItemIndicator>○</Menubar.ItemIndicator>
        Medium (14px)
      </Menubar.RadioItem>
      
      <Menubar.RadioItem value="large">
        <Menubar.ItemIndicator>○</Menubar.ItemIndicator>
        Large (16px)
      </Menubar.RadioItem>
    </Menubar.RadioGroup>
  );
}

MenubarItemIndicator (ItemIndicator)

Visual indicator for checked/selected state of checkbox and radio items, only rendered when the item is in checked state.

/**
 * Visual indicator for checked/selected state of interactive items
 * @param props - Item indicator props
 * @returns JSX element representing the indicator (only when checked)
 */
function MenubarItemIndicator(props: MenubarItemIndicatorProps): React.ReactElement;

interface MenubarItemIndicatorProps extends React.ComponentPropsWithoutRef<'span'> {
  /** Content to show when item is checked/selected */
  children?: React.ReactNode;
  /** Whether to force show the indicator (renders even when not checked) */
  forceMount?: boolean;
}

Usage Examples:

// Checkbox with checkmark indicator
<Menubar.CheckboxItem checked={isEnabled} onCheckedChange={setIsEnabled}>
  <Menubar.ItemIndicator>
    <CheckIcon />
  </Menubar.ItemIndicator>
  Enable Feature
</Menubar.CheckboxItem>

// Radio item with dot indicator
<Menubar.RadioItem value="option1">
  <Menubar.ItemIndicator>
    <DotIcon />
  </Menubar.ItemIndicator>
  Option 1
</Menubar.RadioItem>

// Custom styled indicators
<Menubar.CheckboxItem checked={showSidebar} onCheckedChange={setShowSidebar}>
  <Menubar.ItemIndicator className="custom-checkmark">
    ✓
  </Menubar.ItemIndicator>
  Show Sidebar
</Menubar.CheckboxItem>

// Force-mounted indicator (always visible)
<Menubar.ItemIndicator forceMount>
  <span style={{ opacity: isChecked ? 1 : 0 }}>✓</span>
</Menubar.ItemIndicator>

Complete Interactive Menu Example

function CompleteInteractiveMenu() {
  const [preferences, setPreferences] = React.useState({
    wordWrap: true,
    lineNumbers: false,
    autoSave: true,
    theme: "dark",
    fontSize: "medium"
  });

  return (
    <Menubar.Content>
      <Menubar.Label>View Options</Menubar.Label>
      
      <Menubar.CheckboxItem 
        checked={preferences.wordWrap}
        onCheckedChange={(checked) => 
          setPreferences(prev => ({ ...prev, wordWrap: checked }))
        }
      >
        <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
        Word Wrap
      </Menubar.CheckboxItem>
      
      <Menubar.CheckboxItem 
        checked={preferences.lineNumbers}
        onCheckedChange={(checked) => 
          setPreferences(prev => ({ ...prev, lineNumbers: checked }))
        }
      >
        <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
        Line Numbers
      </Menubar.CheckboxItem>

      <Menubar.Separator />

      <Menubar.Label>Theme Selection</Menubar.Label>
      <Menubar.RadioGroup 
        value={preferences.theme}
        onValueChange={(theme) => 
          setPreferences(prev => ({ ...prev, theme }))
        }
      >
        <Menubar.RadioItem value="light">
          <Menubar.ItemIndicator>•</Menubar.ItemIndicator>
          Light
        </Menubar.RadioItem>
        <Menubar.RadioItem value="dark">
          <Menubar.ItemIndicator>•</Menubar.ItemIndicator>
          Dark
        </Menubar.RadioItem>
      </Menubar.RadioGroup>
    </Menubar.Content>
  );
}

Type Definitions

// Element reference types
type MenubarCheckboxItemElement = HTMLDivElement;
type MenubarRadioGroupElement = HTMLDivElement;
type MenubarRadioItemElement = HTMLDivElement;
type MenubarItemIndicatorElement = HTMLSpanElement;

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

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

Install with Tessl CLI

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

docs

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