Toolbar
A compact strip of related controls, such as the Bold, Italic, alignment, and link buttons above an editor.
See it
What it is
A toolbar is a compact row or column of controls for one work surface. The Bold, Italic, alignment, and link buttons above a text editor are the textbook version; Photoshop and Microsoft Office turned toolbars into the furniture of desktop software, until Office 2007 folded them into the Ribbon. Buttons run commands, while pressed controls can show an active mode such as bold text.
Reach for one when related actions are used often enough to deserve direct access and their icons or short labels fit together. Put the most common actions first, group related controls with separators, and move the long tail into an overflow menu. If there is only one action, it does not need a toolbar around it.
Gotcha: a wall of mystery icons is slower than a menu with words. Give every control an accessible name and expose toggle state with aria-pressed. In an ARIA toolbar, Tab enters the group once and arrow keys move between controls; this roving focus keeps a large editor toolbar from adding twenty stops to the page.
Ask AI for it
Build a rich-text formatting toolbar with Bold, Italic, Underline, alignment, link, and undo controls. Use role='toolbar' with an aria-label, a roving tabindex, Left and Right arrow navigation, Home and End, and visible :focus-visible rings. Make each control a real button with an accessible label; expose active formatting with aria-pressed and a filled background. Separate formatting, alignment, and history groups with role='separator'. Keep labels available in tooltips, move low-priority actions into an overflow menu below 560px, and wire each button to a Lexical editor with editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold') and its siblings.