AppBar and overflow

Compose visible actions, destination links and an inline disclosure of less common commands.

Interactive example React 19 · local alpha

Ready

Usage

The example assumes the stylesheet and a Theme are already present.


import {
  AppBar,
  AppBarAction,
  AppBarLink,
  AppBarOverflow,
  Button,
} from "@pane-ui/react";
 
const plus = (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
    <path d="M12 4v16M4 12h16" stroke="currentColor" strokeWidth="2" />
  </svg>
);
 
<AppBar>
  <AppBarAction label="add" icon={plus} onClick={() => console.log("Add")} />
  <AppBarLink label="examples" icon={plus} href="/examples" />
  <AppBarOverflow>
    <Button>Archive</Button>
  </AppBarOverflow>
</AppBar>;

API

Prop / export	Type / default	Purpose
`AppBar`	Native `div` props / `HTMLDivElement` ref	Action-strip container.
`AppBarAction`	Required `label: string`, `icon: ReactNode`	Native button props/ref; type defaults to button.
`AppBarLink`	Required `label`, `icon`, `href: string`	Native anchor props/ref, except children.
`AppBarOverflow.open`	`boolean`; optional	Controlled disclosure state.
`defaultOpen`	`boolean`; default `false`	Uncontrolled initial state.
`onOpenChange`	`(open: boolean) => void`	Requests expanded/collapsed state.
`label`	`string`; default `"More commands"`	Disclosure trigger label.
Overflow native props / ref	`div` / `HTMLDivElement`	Ref targets the wrapper, not its trigger.

Behavior and composition

AppBar has no toolbar keyboard model; controls use ordinary native Tab order. Action icons are decorative and labels remain visible. AppBarLink preserves anchor navigation and modifier clicks.

Overflow is an inline disclosure, not a Menu. Escape closes it unless the consumer prevents the key event. It neither traps focus nor dismisses on outside clicks. Closing returns focus to the trigger only when focus belonged to the expanded content, avoiding stealing it from another control.

For commands that should collapse the disclosure, control open and set it false in the command handler. Use Menu when a popup menu with arrow navigation is appropriate.