Overview
A toolbar is a floating element consisting of a row or a column of icon butttons used to activate controls in an application. It can consist of a series of icon buttons separated or combined together. Toolbars are fixed in one position on the screen.
A toolbar allows for a maximum workspace and maintains an unobstructed view of the UI content.
Usage
Use when
- Full-screen usage and unobstructed view of the content is critical, e.g., in graphic applications.
- Providing a contextual menu benefits the user’s productivity.
- Offering tools near to the objects being worked on is essential.
Don’t use when
- You need to navigate between content within the application. Instead, use Side Navigation or Content Tree.
- A more robust set of tools needs to be displayed. Instead, use Utility Panel.
- Actions are directly coupled with specific elements on the page.
Types
Toolbars can be classified by their layout as follows:
With Separate Buttons
Icon buttons are aligned next to each other (horizontally or vertically), but not connected.
With Combined Buttons
Icon buttons are connected vertically or horizontally.