Global Drawer

Purpose

The Global Drawer is a standard element in KDE mobile applications. It contains an application's main menu, and any functions which are not part of the application's main usecases but are not specific to the current context either.

Guidelines

Is this the right control?

Use a Global Drawer whenever your application has any functions which are not central enough to the application's main purpose to put them in the main user interface, and which are not dependent on the current context. For context-specific actions (e.g. those affecting a selected item), use the Context Drawer.

Behavior

Hamburger button on the toolbar on desktop.

The Global Drawer is either opened by clicking on the hamburger button on the toolbar or by swiping from the left edge of the screen. It can be closed by swiping in the other direction, clicking the close button or tapping outside of it.

A Global Drawer may contain the following controls:

Tabs A main menu
Push Buttons to execute non-contextual actions
Checkboxes or Radio Buttons to change settings which are commonly changed

The main menu

Must not have more than three levels
Should if possible not contain more elements than fit on the screen
Should contain an entry Settings in the last position if the application has settings which are not commonly changed
Selecting an entry in the menu either executes an action or goes down one level, replacing the menu with the items in the selected submenu
In lower menu levels, below the entries there is a button to go up one level.

Don't use the Menu Drawer for navigation purposes.

Collapsible

On the desktop, if the elements in the Global Drawer need to be accessed more often and enough space is available, the Global Drawer can default to showing a collapsed state, where the labels disappear but all actions continue to be available via icons-only ToolButtons. Pressing the hamburger menu button expands the Global Drawer to its full width and shows the actions' text labels. Pressing the close button or anywhere outside of it collapses it to its collapsed icons-only state.

Code

Kirigami

Kirigami: GlobalDrawer

 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
...
import org.kde.kirigami 2.9 as Kirigami
...

Kirigami.ApplicationWindow {
    ...
    globalDrawer: Kirigami.GlobalDrawer {
        title: "..."
        titleIcon: "..."
        
        topContent: [
            ...
        ]
        
        actions: [
            Kirigami.Action {
                iconName: "list-import-user"
                text: i18n("&Import")
            },
            Kirigami.Action {
                iconName: "list-export-user"
                text: i18n("&Export")
            },
            Kirigami.Action {
                iconName: "user-group-delete"
                text: i18n("&Merge contacts")
            },
            Kirigami.Action {
                iconName: "user-group-new"
                text: i18n("&Search duplicate contacts")
            },
            Kirigami.Action {
                iconName: "configure"
                text: i18n("&Settings")
            }
        ]
    }
    ...
}

Dialog

Navigation Tab Bar