Overlays & menusBrick 0.1.2

Menubar

Menubar provides persistent desktop-style command categories through Atom-owned semantics and behavior.

Live example

Built from the published package

Interactive

Choose with confidence

Know when Menubar is the right part

Use it when

Use it for a persistent application command strip such as File, Edit, and View, where adjacent menus share keyboard navigation.

Choose another path when

Do not use it for site navigation, a mobile overflow, one dropdown, or ordinary page tabs.

Installation and imports

tsx

import { Menubar } from "@flowstack-ui/brick/menubar";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/menubar.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Quick start

tsx

<Menubar.Root>
  <Menubar.Menu>
    <Menubar.Trigger>File</Menubar.Trigger>
    <Menubar.Portal>
      <Menubar.Content><Menubar.Item>New</Menubar.Item></Menubar.Content>
    </Menubar.Portal>
  </Menubar.Menu>
</Menubar.Root>

Visual recipes and states

The persistent root has a subtle bounded rail. Its triggers and popup rows use 32/44/48px sm/md/lg minimums. Open triggers use accent-soft state; popup rows retain visible focus, disabled, danger, and selected states.

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are Menubar, MenubarRoot, MenubarMenu, MenubarTrigger, MenubarPortal, MenubarContent, MenubarArrow, MenubarGroup, MenubarLabel, MenubarItem, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarItemIndicator, MenubarLeading, MenubarItemLabel, MenubarDescription, MenubarShortcut, MenubarSeparator, MenubarSub, MenubarSubTrigger, MenubarSubContent, MenubarRootProps, MenubarMenuProps, MenubarTriggerProps, MenubarPortalProps, MenubarContentProps, MenubarArrowProps, MenubarGroupProps, MenubarLabelProps, MenubarItemProps, MenubarCheckboxItemProps, MenubarRadioGroupProps, MenubarRadioItemProps, MenubarItemIndicatorProps, MenubarLeadingProps, MenubarItemLabelProps, MenubarDescriptionProps, MenubarShortcutProps, MenubarSeparatorProps, MenubarSubProps, MenubarSubTriggerProps, MenubarSubContentProps, MenubarSize, MenubarItemTone.

Prop	Values	Default
`size`	`sm`, `md`, `lg`	`md`

Action-like rows accept the neutral or danger tone when exposed; neutral is the default. Behavioral props come from the matching Atom parts.

Shared responsibility

Accessibility

Name icon-only triggers and label every command or destination clearly. Preserve Atom roles, keyboard behavior, focus return, disabled and selection states, dismissal, and forced-colors affordances.

Responsive behavior

Popup geometry stays collision-aware and constrained to available space. Narrow layouts preserve usable targets, logical alignment, zoom, and writing direction; applications decide whether the pattern belongs in their mobile information architecture.

Stable visual contract

Styling and tokens

Customization

Set documented variables on Root or Content as applicable. Use className and style for local layout without replacing semantic state, focus, or positioning attributes.

Tokens and CSS hooks

Persistent-root variables use --brick-menubar-* for its surface and trigger geometry. The same namespace exposes popup surface, row, supporting text, state, focus, and motion hooks.

Popup entry motion travels from the actual Atom data-side: bottom moves downward, top upward, right rightward, and left leftward. This includes a top or bottom side selected when a submenu cannot fit inline. Entry uses opacity and single-axis translation without scale motion.

Documented tokens are --brick-menubar-background, --brick-menubar-border, --brick-menubar-radius, --brick-menubar-padding, --brick-menubar-gap, --brick-menubar-trigger-min-block-size, --brick-menubar-trigger-padding-inline, --brick-menubar-trigger-radius, --brick-menubar-trigger-foreground, --brick-menubar-trigger-interaction-background, --brick-menubar-trigger-open-background, --brick-menubar-trigger-open-foreground, --brick-menubar-trigger-focus-ring.

Stable output includes data-size, component data-slot hooks, and Atom state attributes.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground