Toolbar
工具条
Aliases:工具条工具栏操作栏快捷操作那一排toolbartool bar
What is it
A strip of controls that act on the current view or selection, grouped by function and split by separators. A toolbar runs actions; a menu lists options; site navigation says where to go. Think of an editor's bold/italic bar, an image viewer's rotate/download bar, or a list page's bulk-action bar.
Name disambiguation
A toolbar is a row of action buttons that fire immediately; a menubar is a row of menu triggers that open lists requiring a second choice; a navbar is a set of destinations that change the route or page. Decide by what happens after the click: run an action → toolbar; open options → menu; go somewhere else → navbar.
Interactive playground
Try it. Make an informed choice.Arrow through the toolbar buttons, fire a few actions and watch the toggle states.
Loading lab…
What to look for
- 01Group buttons semantically so the strip is a single tab stop
- 02Toggle buttons expose pressed / unpressed state
✓ When to use
- A cluster of frequent actions on the current view or selection (format, bulk ops)
- Actions must stay visible and one click away
- Icons carry the meaning and labels can be dropped
✕ When not to use
- Rare or debatable actions — hide them in an overflow menu
- Picking one option from a set — that is a menu or select
- Global site destinations — that is a navbar or sidebar
Variants
Icon toolbar
图标工具条
Icon-only buttons with tooltips for meaning
Formatting toolbar
排版工具条
Bold / italic / align text actions with toggle states
Contextual toolbar
上下文工具条
Appears only on selection and hides when the selection clears
Implementation
flexgapborder-radiusbackgroundtransitionThe container is role="toolbar" with an aria-label; cluster related controls in role="group" regions each labeled, and make separators 1px rules marked aria-hidden. Keyboard uses roving tabindex — one tab stop for the strip, Left/Right (or Up/Down for a vertical bar) moves inside, Home / End jump to the ends. Toggle buttons use aria-pressed. On narrow screens wrap or collapse into an overflow menu.
Platform API
role="toolbar"aria-labelroving tabindexIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
Related concepts
A horizontal navigation bar pinned to the top of the page: brand on the left, primary links in the middle, search, actions and avatar on the right. It is the front door of a site — the 3–7 most important destinations compressed into one strip, folding into a hamburger menu on mobile. Usually kept visible with position: sticky.
ComponentsAlternativeA temporary overlay listing actions, opened by click or right-click: flat or grouped command items that execute and close on selection. It houses infrequent actions (more, settings, delete), usually behind a "⋯" button or a context click.
ComponentsUsed withA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsUsed withNot to be confused with
A navbar navigates to destinations; a toolbar runs actions in the current context.
A menu opens a list to choose from; a toolbar button acts on click.