Menubar

Install: npm install @mantine/core@9.7.1 @mantine/hooks@9.7.1

Version and compatibility

Pinned Mantine Core 9.7.1 requires React and React DOM ^19.2.0 and matching @mantine/hooks@9.7.1, from the installed npm package's peerDependencies. Do not force it into React 18 or another incompatible version. Explain upgrade impact and agree on a plan with the project owner; do not hide conflicts with --force/--legacy-peer-deps. The native Provider enables theme.respectReducedMotion and uses forceColorScheme for light/dark.

Use case

Compose a keyboard-navigable top-level menu bar.

Native props used by this example

These props are extracted from the local typechecked JSX and grouped by their owning native component. This is not an exhaustive prop list; see pinned source signatures and inheritance below.

This minimal example passes children only; no additional props are invented. Optional props are in the source reference.

Interaction and state checks

Current scenarios: Default. Check actual behavior after selecting supported disabled/error/read-only scenarios; components without those native states do not receive invented universal props. Verify keyboard focus and exits, then connect changed values through the native callback signature.

Business integration boundary

Demo content/state is local, without server persistence, authorization or fetching. A static display component is not a completed business workflow.

Host setup

Install pinned @mantine/core and @mantine/hooks, import @mantine/core/styles.css at the entry and use MantineProvider. The example's theme/variant are JGuang-authored host props, not universal native component APIs; forceColorScheme synchronizes the app theme. Native implementation source is a reading reference: use npm exports rather than copying internal engines. This batch covers Core, not dates/charts/forms extension packages. Detailed upstream prose remains English.

Runnable usage

import { useState } from 'react';
import * as M from '@mantine/core';
import '@mantine/core/styles.css';


function ComponentPreview({ variant = 'Default' }: { variant?: string }) {

return <M.Menubar>{["File", "Edit"].map((label) => <M.Menubar.Menu key={label}><M.Menubar.Target>{label}</M.Menubar.Target><M.Menubar.Dropdown><M.Menu.Item>New</M.Menu.Item><M.Menu.Item>Save</M.Menu.Item></M.Menubar.Dropdown></M.Menubar.Menu>)}</M.Menubar>;
}
export default function Example({ variant = 'Default', theme = 'light' }: { variant?: string; theme?: 'light' | 'dark' }) {
return <M.MantineProvider forceColorScheme={theme} theme={{ respectReducedMotion: true }}><ComponentPreview variant={variant} /></M.MantineProvider>;
}

Preview states

Default

The example uses the native Mantine API. For supported input demos, change the local variant to Disabled, Invalid or Read only; these are example labels, not new component props. Keep the documented data, controlled values, stores and compound children when adapting the example.

Usage

Menubar is a desktop-application style menu bar: a horizontal row of triggers (File, Edit, View, …), each of them opens a dropdown. Menubar is built on top of Menu, dropdown content is composed from Menu.Item, Menu.Divider and other Menu components.

Menu is one target that toggles one dropdown. Menubar coordinates multiple menus:

Only one menu is open at a time. Moving to another target while a menu is open switches the open menu.
The whole bar is a single tab stop, arrow keys move focus between targets.

If you need a single dropdown attached to one button, use Menu instead.

Composition

Menubar – root element
Menubar.Menu – wraps a single menu, accepts the same props as Menu
Menubar.Target – top-level trigger button
Menubar.Dropdown – dropdown container, accepts the same children as Menu.Dropdown

import { Menu, Menubar } from '@mantine/core';

function Demo() {
  return (
    <Menubar>
      <Menubar.Menu>
        <Menubar.Target>File</Menubar.Target>
        <Menubar.Dropdown>
          <Menu.Item>New file</Menu.Item>
          <Menu.Item>Open…</Menu.Item>
        </Menubar.Dropdown>
      </Menubar.Menu>

      <Menubar.Menu>
        <Menubar.Target>Edit</Menubar.Target>
        <Menubar.Dropdown>
          <Menu.Item>Undo</Menu.Item>
          <Menu.Item>Redo</Menu.Item>
        </Menubar.Dropdown>
      </Menubar.Menu>
    </Menubar>
  );
}

Trigger and loop

By default, a menu opens when its target is clicked. Once a menu is open, hovering another target switches to it. Set trigger="hover" to open menus on hover, the menu closes when the pointer leaves the bar.

Set loop={false} to stop arrow key navigation from wrapping around from the last menu to the first and vice versa.

Submenus

Use Menu.Sub inside Menubar.Dropdown to create nested submenus, see the Menu submenus documentation. The usage demo includes a submenu in the File menu.

Checkbox and radio items

Use Menu.CheckboxItem for toggles and Menu.RadioGroup with Menu.RadioItem for single-choice options. By default, clicking these items does not close the menu.

Controlled

Use openIndex and onOpenChange props to control which menu is open. openIndex is the index of the opened Menubar.Menu or null when all menus are closed.

Use defaultOpenIndex to open a menu initially without controlling the state.

Position

By default, dropdowns are positioned at bottom-start. Set the position prop to use a different Floating UI position for all menus in the bar:

import { Menubar } from '@mantine/core';

function Demo() {
  return (
    <Menubar position="bottom-end">
      {/* ...menus */}
    </Menubar>
  );
}

To override settings of a single menu, pass Menu props to Menubar.Menu, for example position or closeOnItemClick.

Keyboard interactions

When RTL direction is set, ArrowLeft and ArrowRight are swapped.

Accessibility

Menubar follows the WAI-ARIA menubar pattern:

The root element has role="menubar"
Each Menubar.Target has role="menuitem", aria-haspopup="menu" and aria-expanded
Menubar.Target children are used as accessible names of the triggers

Source-backed parameter reference

Implementation signatures and types are generated from the pinned local source. Optional props, native inherited types, union branches and never exclusions are preserved. A forwardRef implementation's ref is a React reference, not an additional business prop.

Menubar(_props)

export type MenubarStylesNames = 'root' | 'target';

export type MenubarFactory = Factory<{
  props: MenubarProps;
  ref: HTMLDivElement;
  stylesNames: MenubarStylesNames;
  staticComponents: {
    Menu: typeof MenubarMenu;
    Target: typeof MenubarTarget;
    Dropdown: typeof MenubarDropdown;
  };
}>;

export interface MenubarProps
  extends BoxProps, StylesApiProps<MenubarFactory>, ElementProps<'div'> {
  /** `Menubar.Menu` components */
  children?: React.ReactNode;

  /** Index of the controlled opened menu, `null` closes all menus */
  openIndex?: number | null;

  /** Index of the opened menu for uncontrolled component @default `null` */
  defaultOpenIndex?: number | null;

  /** Called when the opened menu changes with its index or `null` when all menus are closed */
  onOpenChange?: (index: number | null) => void;

  /** Event that opens a menu when none of the menus is opened. `'click'` opens a menu on target click and then switches menus on hover (desktop application pattern), `'hover'` opens a menu when the target is hovered @default `'click'` */
  trigger?: 'click' | 'hover';

  /** If set, arrow key navigation wraps from last to first menu and vice versa @default `true` */
  loop?: boolean;

  /** Dropdown position relative to the target element @default `'bottom-start'` */
  position?: FloatingPosition;
}

export type Mod = Record<string, any> | string;

export type BoxMod = Mod | Mod[] | BoxMod[];

export interface BoxProps extends MantineStyleProps {
  /** Class added to the root element, if applicable */
  className?: string | undefined;

  /** Inline style added to root component element, can subscribe to theme defined on MantineProvider */
  style?: MantineStyleProp;

  /** CSS variables defined on root component element */
  __vars?: CssVarsProp;

  /** `size` property passed down the HTML element */
  __size?: string;

  /** Breakpoint above which the component is hidden with `display: none` */
  hiddenFrom?: MantineBreakpoint;

  /** Breakpoint below which the component is hidden with `display: none` */
  visibleFrom?: MantineBreakpoint;

  /** Determines whether component should be hidden in light color scheme with `display: none` */
  lightHidden?: boolean;

  /** Determines whether component should be hidden in dark color scheme with `display: none` */
  darkHidden?: boolean;

  /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */
  mod?: BoxMod;
}

export type ElementProps<
  ElementType extends React.ElementType,
  PropsToOmit extends string = never,
> = Omit<React.ComponentProps<ElementType>, 'style' | PropsToOmit>;

export interface CSSProperties extends React.CSSProperties {
  [key: string]: any;
}

type MantineStyle = CSSProperties | ((theme: MantineTheme) => CSSProperties);

export type MantineStyleProp = MantineStyle | MantineStyle[] | MantineStyleProp[] | undefined;

export type CssVariable = `--${string}`;

export type CssVariables<Variable extends string = CssVariable> = Partial<Record<Variable, string>>;

export type CssVars<Variable extends string = CssVariable> =
  | CssVariables<Variable>
  | ((theme: MantineTheme) => CssVariables<Variable>)
  | CssVars<Variable>[];

export type CssVarsProp<Variable extends string = CssVariable> =
  | CssVars<Variable>
  | CssVars<Variable>[];

Native and external types

External types remain defined by React or native dependencies, not manually expanded into guessed props. The installed version's TypeScript definitions are authoritative.

Factory<{
  props: MenubarProps;
  ref: HTMLDivElement;
  stylesNames: MenubarStylesNames;
  staticComponents: {
    Menu: typeof MenubarMenu;
    Target: typeof MenubarTarget;
    Dropdown: typeof MenubarDropdown;
  };
}>
MantineStyleProps
React.CSSProperties
MantineTheme
Partial<Record<Variable, string>>
Record<Variable, string>
Variable
MantineBreakpoint
Record<string, any>
StylesApiProps<MenubarFactory>
React.ElementType
Omit<React.ComponentProps<ElementType>, 'style' | PropsToOmit>
React.ComponentProps<ElementType>
ElementType
PropsToOmit
React.ReactNode
FloatingPosition
HTMLDivElement

Menubar

Menubar

Version and compatibility

Use case

Native props used by this example

Interaction and state checks

Business integration boundary

Host setup

Runnable usage

Preview states

Usage

How it differs from Menu

Composition

Trigger and loop

Submenus

Checkbox and radio items

Controlled

Position

Keyboard interactions

Accessibility

Source-backed parameter reference

Native and external types