ToolbarMenu

A small panel from a toolbar button for choices such as the model, plugins or slash commands. Pick it when a choice needs more than one control; use a menu for a plain list of actions.

ToolbarMenu

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, ToolbarMenu

Dark theme, ToolbarMenu

High contrast theme, ToolbarMenu

UsageLink to the section Usage

tsx

import { ToolbarMenu } from '@skribly/ui/agents'

tsx

<ToolbarMenu label={t('changeModel')} icon={<Cpu />} value={model.label} title={t('model')}>
  {(close) => <RadioGroup label={t('model')} value={model.id} onChange={(id) => (pick(id), close())}>…</RadioGroup>}
</ToolbarMenu>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A non-modal dialog from React Aria: the trigger reports it is expanded, focus moves into the panel, Escape or a click outside closes it and focus returns to the trigger.
The panel is named by its title or by label.
On screens under 640px it becomes a sheet along the bottom edge that scrolls inside.

This demo runs through axe in all three themes on every test run. See what the tests check.