Navigation

Interface patterns give you an opportunity to explore different interface designs. Be sure to check out How to Adapt a Pattern for Your Application.

Goal

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. These patterns are located under the PATTERNS tab on the left navigation menu of the palette. 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.

screenshot of the navigation pattern with 6 menu options

Design structure

The main components in this pattern are a 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.

Pattern expression

This basic navigation pattern introduces a 148-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
139
140
141
142
143
144
145
146
147
148
{
  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",
                    ""
                  )
                )
              ),
              /* This card is used to set a minimum height on the column so that the *
               * divider takes up more screen space when there is minimal content.   *
               * Once content is added to the main column, this can be removed.      */
              a!cardLayout(
                showWhen: not(a!isNativePhone()),
                height: "TALL",
                showBorder: false
              )
            },
            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: {}
                )
              )
            }
          )
        },
        spacing: "SPARSE",
        showDividers: true
      )
    }
  )
}

[Line 1-13 ] Set local variables

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"}
    }, 

[Line 14-81] Left navigation

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
71
72
73
74
75
76
77
78
{
      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",
                    ""
                  )
                )
              ),
              /* This card is used to set a minimum height on the column so that the *
               * divider takes up more screen space when there is minimal content.   *
               * Once content is added to the main column, this can be removed.      */
              a!cardLayout(
                showWhen: not(a!isNativePhone()),
                height: "TALL",
                showBorder: false
              )
            },
            width: "NARROW"
          ),

[Line 81-148] Selected page

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
76
77
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: {}
                )
              )
            }
          )
        },
        spacing: "SPARSE",
        showDividers: true
      )
    }
  )
}
Open in Github

On This Page

FEEDBACK