Toolbar Preview
A toolbar gives access to frequently used actions related to someone’s current view or task, like text formatting in an editor.
Resources
Behavior
Overflow
A toolbar will grow to fit its parent container but will never wrap onto a second line. In cases where there are more options than can fit, use the overflow utility. This changes the last option to an overflow menu button that surfaces the rest of the toolbar options. Use a text label along with the toolbar item icon in the overflow menu.
Layout
Create logical groupings
Actions in a toolbar should be logically grouped to help people find related subtasks. Use dividers and white space to communicate groupings. For example, group text decoration options like bold, italic, and strikethrough. Then, use a divider to separate them from paragraph formatting options like indentations and lists.
If there are destructive actions or actions that can affect the status of someone’s work, group them away from other options.
Toolbars support the main task
Place toolbars so that they’re useful when people need them, with the commands that people are most likely to want. For example, in a text editing app where someone’s focus is always on creating content, it makes sense to have the toolbar with formatting options pinned to the top of the app.
When a toolbar isn’t supporting the main task, add an option for it to be hidden so that people can focus without distractions.
Accessibility
Identify multiple toolbars
If an app contains more than one toolbar, each one should be labeled using aria-label or aria-labelledby if there’s an available text label.
Icons as button labels
Toolbars can use icons as button labels as a space-saving measure when there are many options to present. It’s important to use icons that are familiar and not force people to guess what each icon does. Make sure to provide text labels with a tooltip for visual users and with aria-labels for people who use screen readers.
Content
Keep text labels on toolbar buttons or in tooltips brief. They should clearly communicate what will happen if that option is selected. Use sentence case and no end punctuation.
