Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.
Use the navigation pattern as a way to structure a group of pages with icon and text based left navigation. When an icon and text are selected, the corresponding page is displayed. This page explains how you can use this pattern in your interface, and walks through the design structure in detail.
There are three options for navigation patterns; the pattern shown here, a collapsible option, or one with subsections. All three have similar functionality and design. Test out all three to see which option matches your business needs. Variations of the same set of data are configured similarly in each navigation pattern.
The main components in this pattern are an extra-narrow column, a card layout, and a set of styled icons and styled text.
You can examine the entire expression or jump down to the subsections below with referenced line numbers to see a detailed breakdown of the main components.
This basic navigation pattern introduces a 138-line expression to the interface.
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
{
a!localVariables(
/* The selected navigation section */
local!activeNavSection: 1,
/* The navigation sections */
local!navSections: {
{name: "Workspace", icon: "briefcase"},
{name: "Tasks", icon: "tasks"},
{name: "Requests", icon: "paper-plane"},
{name: "Calendar", icon: "calendar"},
{name: "My Time", icon: "clock-o"},
{name: "Expenses", icon: "money"}
},
{
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!forEach(
items: local!navSections,
expression: a!cardLayout(
contents: a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: a!richTextIcon(
icon: fv!item.icon,
color: "SECONDARY",
size: "MEDIUM"
),
align: "LEFT"
),
width: "MINIMIZE"
),
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: a!richTextItem(
text: fv!item.name,
color: "ACCENT",
size: "MEDIUM",
style: if(
fv!index = local!activeNavSection,
"STRONG",
"PLAIN"
)
)
)
)
},
alignVertical: "MIDDLE"
),
link: a!dynamicLink(
value: fv!index,
saveInto: local!activeNavSection
),
style: if(
fv!index = local!activeNavSection,
"ACCENT",
"NONE"
),
showBorder: false,
accessibilityText: if(
fv!index = local!activeNavSection,
fv!item.name & " " & "selected",
""
)
)
)
},
width: "NARROW"
),
a!columnLayout(
contents: {
/* Conditionally display selected navigation section. *
* Sections are created individually here because they will *
* have varying contents, so if you change the list in *
* local!navSections, you will need to make sure *
* the list of sections here is the correct length. */
choose(
local!activeNavSection,
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
)
)
}
)
}
)
}
)
}
At the beginning of the expression, two local variables are set up: local!activeNavSection, which stores the current view and local!navSections, which stores the list of view names and their respective icons and texts. local!activeNavSection is initialized to the first view by default.
1
2
3
4
5
6
7
8
9
10
11
12
13
{
a!localVariables(
/* The selected navigation section */
local!activeNavSection: 1,
/* The navigation sections */
local!navSections: {
{name: "Workspace", icon: "briefcase"},
{name: "Tasks", icon: "tasks"},
{name: "Requests", icon: "paper-plane"},
{name: "Calendar", icon: "calendar"},
{name: "My Time", icon: "clock-o"},
{name: "Expenses", icon: "money"}
},
The icon and view name in the left navigation list is constructed using MEDIUM styled icons and styled text with dynamic links inside a card layout within an NARROW column. Inside the rich text display field, we iterate over each view in local!navSections with a!forEach() to create the linked icons and text.
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
{
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!forEach(
items: local!navSections,
expression: a!cardLayout(
contents: a!sideBySideLayout(
items: {
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: a!richTextIcon(
icon: fv!item.icon,
color: "SECONDARY",
size: "MEDIUM"
),
align: "LEFT"
),
width: "MINIMIZE"
),
a!sideBySideItem(
item: a!richTextDisplayField(
labelPosition: "COLLAPSED",
value: a!richTextItem(
text: fv!item.name,
color: "ACCENT",
size: "MEDIUM",
style: if(
fv!index = local!activeNavSection,
"STRONG",
"PLAIN"
)
)
)
)
},
alignVertical: "MIDDLE"
),
link: a!dynamicLink(
value: fv!index,
saveInto: local!activeNavSection
),
style: if(
fv!index = local!activeNavSection,
"ACCENT",
"NONE"
),
showBorder: false,
accessibilityText: if(
fv!index = local!activeNavSection,
fv!item.name & " " & "selected",
""
)
)
)
},
width: "NARROW"
),
Once the user clicks on an icon and text in the left navigation list, the selected view will render in the right column. In this pattern, we have only configured the view title to display. We recommend you configure interface objects for each associated view.
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
a!columnLayout(
contents: {
/* Conditionally display selected navigation section. *
* Sections are created individually here because they will *
* have varying contents, so if you change the list in *
* local!navSections, you will need to make sure *
* the list of sections here is the correct length. */
choose(
local!activeNavSection,
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
),
a!sectionLayout(
label: index(
local!navSections.name,
local!activeNavSection,
""
),
contents: {}
)
)
}
)
}
)
}
)
}
