Toolbar

Purpose

A toolbar is a graphical presentation of commands optimized for fast access. A toolbar can be either be defined for a whole application or as part of another component.

As an application toolbar it contains buttons that correspond to items in the application's menu, providing direct access to application's most frequently used functions. A good menu bar is a comprehensive catalog of all the available top-level commands, whereas a good toolbar gives quick, convenient access to frequently used commands.

As part of another component, like a card or an inline message, it is used to allow quick access to the most important commands for a single, focused content item.

Guidelines for Applications

Is this the right control?

• For standard applications, show a toolbar by default.
• Provide a toolbar in addition to the menu bar, but don't replace the menu bar.

Behavior

• A toolbar should contain only a few frequently used operations. If the number of operations is above 5 they have to be grouped with separators. Not more than 3 of those sections should be implemented.
• Don't abuse the toolbar to expose hidden or esoteric features. Only the most frequently-used functions should be accessible from the toolbar.
• Execute operations immediately; don't require additional input.
• Try to avoid using split buttons or toggle buttons in order to keep the interaction with all buttons in the toolbar consistent.
• Don't hide toolbars by default. If a toolbar can be hidden, users should easily be able to make the toolbar viewable again.
• Disable buttons that don't apply to the current context.
• Consider making toolbar content and position customizable.
• Provide both a label and an icon for actions.

Guidelines for Components

Is this the right control?

• Use a toolbar only if an item has few actions or few frequently used actions.
• Embed a toolbar only in another control that is clearly visually separated like a card or an inline message.

Behavior

• A toolbar should contain only a few, frequently used operations. The number of operations should not exceed 3.
• Don't group with separators.
• Execute operations immediately; don't require additional input.
• Don't hide toolbars or make them configurable.
• Toolbars can be responsive. If there is not enough space to display all the buttons, an overflow menu is shown instead.

Appearance

• Don't change the button style from the default, which is text beside icons.
• Use and design toolbar icons with special care. Users remember location of an object but rely as well on icon properties.
• A distinct association between the underlying function and its visual depiction is crucial. Follow the advices for icon design.
• Don't simulate Microsoft's ribbon controls.

Code

Kirigami

• Kirigami: Action
• Kirigami: ScrollablePage
• Kirigami: ActionToolBar

Application Toolbar

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

...
import org.kde.kirigami 2.9 as Kirigami
...

Kirigami.ApplicationWindow {
    ...
    pageStack.initialPage: Kirigami.ScrollablePage {
        ...
        actions {
            left: Kirigami.Action {
                iconName: "mail-message"
                text: i18n("&Write mail")
            }
            main: Kirigami.Action {
                iconName: "call-start"
                text: i18n("&Make call")
            }
            right: Kirigami.Action {
                iconName: "kmouth-phrase-new"
                text: i18n("&Write SMS")
            }
        }
    }
    ...
}

Component Toolbar

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

...
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.4 as Kirigami
...
    Kirigami.ActionToolBar {
        ...
        actions: [
            Kirigami.Action {
                iconName: "favorite"
                text: i18n("&Select as favorite")
            },
            Kirigami.Action {
                iconName: "document-share"
                text: i18n("&Share")
            }
        ]
        ...
    }
...

Plasma Components

• Plasma ToolBar