Navigation Tab Bar

Purpose

The Navigation Tab Bar provides horizontal/lateral navigation for applications with a small number of top-level pages.

Navigation Tab Bar with 3 items and a toolbar above

Guidelines

Is this the right control?

Use a Navigation Tab Bar in place of a Sidebar in an application with three to five top level pages that the user will frequently navigate between. A Sidebar is more appropriate for applications with many top-level pages.

Code

Kirigami

 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.2
import org.kde.kirigami 2.19 as Kirigami

Kirigami.ApplicationWindow {
    title: "Clock"

    pageStack.initialPage: worldPage
    Kirigami.Page {
        id: worldPage
        title: "World"
        visible: false
    }
    Kirigami.Page {
        id: timersPage
        title: "Timers"
        visible: false
    }
    Kirigami.Page {
        id: stopwatchPage
        title: "Stopwatch"
        visible: false
    }
    Kirigami.Page {
        id: alarmsPage
        title: "Alarms"
        visible: false
    }
    
    
    footer: Kirigami.NavigationTabBar {
        actions: [
            Kirigami.Action {
                iconName: "globe"
                text: "World"
                checked: worldPage.visible
                onTriggered: {
                    while (pageStack.depth > 0) {
                        pageStack.pop();
                    }
                    pageStack.push(worldPage);
                }
            },
            Kirigami.Action {
                iconName: "player-time"
                text: "Timers"
                checked: timersPage.visible
                onTriggered: {
                    while (pageStack.depth > 0) {
                        pageStack.pop();
                    }
                    pageStack.push(timersPage);
                }
            },
            Kirigami.Action {
                iconName: "chronometer"
                text: "Stopwatch"
                checked: stopwatchPage.visible
                onTriggered: {
                    while (pageStack.depth > 0) {
                        pageStack.pop();
                    }
                    pageStack.push(stopwatchPage);
                }
            },
            Kirigami.Action {
                iconName: "notifications"
                text: "Alarms"
                checked: alarmsPage.visible
                onTriggered: {
                    while (pageStack.depth > 0) {
                        pageStack.pop();
                    }
                    pageStack.push(alarmsPage);
                }
            }
        ]
    }
}

Global Drawer

Menu Bar