Toolbar

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.