MenuBar

MenuBar renders a horizontal application menu — File, Edit, View — with arrow-key navigation, escape-to-close, and accessible focus management. It wraps @radix-ui/react-menubar so consumers get the full keyboard contract for free.

#Default usage

<MenuBar>
  <MenuBarMenu>
    <MenuBarTrigger>File</MenuBarTrigger>
    <MenuBarContent>
      <MenuBarItem>New file <MenuBarShortcut>⌘ N</MenuBarShortcut></MenuBarItem>
      <MenuBarItem>Open... <MenuBarShortcut>⌘ O</MenuBarShortcut></MenuBarItem>
      <MenuBarSeparator />
      <MenuBarItem destructive>Delete</MenuBarItem>
    </MenuBarContent>
  </MenuBarMenu>
  <MenuBarMenu>
    <MenuBarTrigger>Edit</MenuBarTrigger>
    <MenuBarContent>
      <MenuBarItem>Undo</MenuBarItem>
      <MenuBarItem>Redo</MenuBarItem>
    </MenuBarContent>
  </MenuBarMenu>
</MenuBar>

#Import

import {
  MenuBar,
  MenuBarContent,
  MenuBarItem,
  MenuBarMenu,
  MenuBarSeparator,
  MenuBarShortcut,
  MenuBarTrigger,
} from "@froggdesign/enter-ui-react";

#Accessibility

MenuBar inherits Radix Menubar semantics: focus trap inside open menus, arrow-key navigation between items, escape-to-close, and proper role="menu"/role="menuitem" semantics.

#API

• All MenuBar* components forward props to the underlying Radix primitives.
• MenuBarItem accepts destructive to apply error tone styling.
• MenuBarShortcut renders the trailing keystroke.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.