Menubar

A menu bar providing commands and options for your application.

Base UI React 1.8.0

FineSoft Stencil

react-menubar.tsx stencil-menubar.tsx stencil-menubar-view.tsx index.module.css

'use client';
import * as React from 'react';
import { Menubar } from '@base-ui/react/menubar';
import { Menu } from '@base-ui/react/menu';
import styles from './index.module.css';

export default function ExampleMenubar() {
  return (
    <Menubar className={styles.Menubar}>
      <Menu.Root>
        <Menu.Trigger className={styles.MenuTrigger}>File</Menu.Trigger>
        <Menu.Portal>
          <Menu.Positioner className={styles.MenuPositioner} sideOffset={4}>
            <Menu.Popup className={styles.MenuPopup}>
              <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                New
              </Menu.Item>
              <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                Open
              </Menu.Item>
              <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                Save
              </Menu.Item>

              <Menu.SubmenuRoot>
                <Menu.SubmenuTrigger className={styles.SubmenuTrigger}>
                  Export
                  <CaretRightIcon />
                </Menu.SubmenuTrigger>
                <Menu.Portal>
                  <Menu.Positioner
                    className={styles.MenuPositioner}
                    sideOffset={-4}
                    alignOffset={-4}
                  >
                    <Menu.Popup className={styles.MenuPopup}>
                      <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                        PDF
                      </Menu.Item>
                      <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                        PNG
                      </Menu.Item>
                      <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                        SVG
                      </Menu.Item>
                    </Menu.Popup>
                  </Menu.Positioner>
                </Menu.Portal>
              </Menu.SubmenuRoot>

              <Menu.Separator className={styles.MenuSeparator} />
              <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                Print
              </Menu.Item>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>

      <Menu.Root>
        <Menu.Trigger className={styles.MenuTrigger}>Edit</Menu.Trigger>
        <Menu.Portal>
          <Menu.Positioner className={styles.MenuPositioner} sideOffset={4}>
            <Menu.Popup className={styles.MenuPopup}>
              <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                Cut
              </Menu.Item>
              <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                Copy
              </Menu.Item>
              <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                Paste
              </Menu.Item>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>

      <Menu.Root>
        <Menu.Trigger className={styles.MenuTrigger}>View</Menu.Trigger>
        <Menu.Portal>
          <Menu.Positioner className={styles.MenuPositioner} sideOffset={4}>
            <Menu.Popup className={styles.MenuPopup}>
              <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                Zoom In
              </Menu.Item>
              <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                Zoom Out
              </Menu.Item>

              <Menu.SubmenuRoot>
                <Menu.SubmenuTrigger className={styles.SubmenuTrigger}>
                  Layout
                  <CaretRightIcon />
                </Menu.SubmenuTrigger>
                <Menu.Portal>
                  <Menu.Positioner
                    className={styles.MenuPositioner}
                    sideOffset={-4}
                    alignOffset={-4}
                  >
                    <Menu.Popup className={styles.MenuPopup}>
                      <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                        Single Page
                      </Menu.Item>
                      <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                        Two Pages
                      </Menu.Item>
                      <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                        Continuous
                      </Menu.Item>
                    </Menu.Popup>
                  </Menu.Positioner>
                </Menu.Portal>
              </Menu.SubmenuRoot>

              <Menu.Separator className={styles.MenuSeparator} />
              <Menu.Item className={styles.MenuItem} onClick={handleClick}>
                Full Screen
              </Menu.Item>
            </Menu.Popup>
          </Menu.Positioner>
        </Menu.Portal>
      </Menu.Root>

      <Menu.Root disabled>
        <Menu.Trigger className={styles.MenuTrigger}>Help</Menu.Trigger>
      </Menu.Root>
    </Menubar>
  );
}

function handleClick(event: React.MouseEvent<HTMLElement>) {
  console.log(`${event.currentTarget.textContent} clicked`);
}

function CaretRightIcon(props: React.ComponentProps<'svg'>) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="currentColor"
      {...props}
      style={{ display: 'block', ...props.style }}
    >
      <path d="M6 12V4l4.5 4z" />
    </svg>
  );
}

Anatomy

Import the component and assemble its parts:

Anatomy

import { Menubar } from '@base-ui/react/menubar';
import { Menu } from '@base-ui/react/menu';

<Menubar>
  <Menu.Root>
    <Menu.Trigger />
    <Menu.Portal>
      <Menu.Backdrop />
      <Menu.Positioner>
        <Menu.Popup>
          <Menu.Arrow />
          <Menu.Item />
          <Menu.LinkItem />
          <Menu.Separator />

          <Menu.SubmenuRoot>
            <Menu.SubmenuTrigger />
          </Menu.SubmenuRoot>

          <Menu.Group>
            <Menu.GroupLabel />
          </Menu.Group>

          <Menu.RadioGroup>
            <Menu.RadioItem>
              <Menu.RadioItemIndicator />
            </Menu.RadioItem>
          </Menu.RadioGroup>

          <Menu.CheckboxItem>
            <Menu.CheckboxItemIndicator />
          </Menu.CheckboxItem>

          <Menu.Viewport />
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>
</Menubar>

The examples above include the frozen React implementation and the corresponding Stencil implementation. Import finesoft-components/menubar to register fs-menubar-root, and use the Menu parts for its menus.

Stencil anatomy

import 'finesoft-components/menubar';

<fs-menubar-root orientation="horizontal" loopFocus={true} modal={true}>
  <fs-menu-root>
    <fs-menu-trigger>File</fs-menu-trigger>
    <fs-menu-portal>
      <fs-menu-positioner>
        <fs-menu-popup>
          <fs-menu-item>New</fs-menu-item>
        </fs-menu-popup>
      </fs-menu-positioner>
    </fs-menu-portal>
  </fs-menu-root>
</fs-menubar-root>

disabled, modal, orientation, and loopFocus retain the Menubar defaults. The native menubar exposes data-orientation, data-modal, and data-has-submenu-open. Menu state and events remain on each fs-menu-root; Menubar coordinates focus and menu switching.

API reference

loopFocusbooleantrue

Name: loopFocus
Description: Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
Type: boolean | undefined
Default: true

Name: modal
Description: Whether the menubar is modal.
Type: boolean | undefined
Default: true

disabledbooleanfalse

Name: disabled
Description: Whether the whole menubar is disabled.
Type: boolean | undefined
Default: false

orientationMenuRoot.Orientation'horizontal'

Name: orientation
Description: The orientation of the menubar.
Type: MenuRoot.Orientation | undefined
Default: 'horizontal'

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Menubar.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Menubar.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.
Type: | ReactElement | (( props: HTMLProps, state: Menubar.State, ) => ReactElement) | undefined

data-orientation

Determines the orientation of the menubar.

data-has-submenu-open

Present when any submenu within the menubar is open.

data-modal

Present when the corresponding menubar is modal.

Attribute	Description	-
`data-orientation`	Determines the orientation of the menubar.
`data-has-submenu-open`	Present when any submenu within the menubar is open.
`data-modal`	Present when the corresponding menubar is modal.

Menubar.PropsHide

Re-Export of Menubar props as MenubarProps

Menubar.StateHide

type MenubarState = {
  /** The orientation of the menubar. */
  orientation: MenuRoot.Orientation;
  /** Whether the menubar is modal. */
  modal: boolean;
  /** Whether any submenu within the menubar is open. */
  hasSubmenuOpen: boolean;
}

Menubar

Anatomy

Stencil usage

API reference

Menubar.PropsHide

Menubar.StateHide