Icon 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

The icon navigation pattern displays a vertical navigation pane where users can click on an icon to view its associated interface. This page explains how you can use this pattern in your interface, and walks through the design structure in detail.

Use the icon navigation pattern as a way to structure a group of pages with an icon-based left navigation. When an icon is selected, the corresponding page is displayed.

images/ux_pages/icon_navigation.gif

When adapting this pattern, be sure to employ best UX design practices, like adding a descriptive caption to the icon. If a caption is present, it will be read aloud to screen reader users so additional alternative text is unnecessary.

Design Structure

The main components in this pattern are an extra-narrow Column, a Card Layout, and a set of Styled Icons.

Pattern Expression

This pattern introduces a 114-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
{
  a!localVariables(
    local!pages:{
      {name: "All Cases", icon: "suitcase"},
      {name: "Starred Cases", icon: "star"},
      {name: "Customers", icon: "users"},
      {name: "Assets", icon: "diamond"},
      {name: "Settings", icon: "cog"}
    },
    local!selectedPage: 1,
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!forEach(
                      items:local!pages,
                      expression: {
                        a!richTextIcon(
                          icon: fv!item.icon,
                          caption: fv!item.name,
                          /* Update the value of local!selectedPage to the index of the clicked icon */
                          link: a!dynamicLink(
                            value: fv!index,
                            saveInto: local!selectedPage
                          ),
                          linkStyle: "STANDALONE",
                          size: "LARGE"
                        ),
                        char(10),
                        if(fv!isLast,
                        null,
                        char(10))
                      })
                  },
                  align: "CENTER"
                )
              },
              style: "STANDARD",
              height: "AUTO",
              marginBelow: "STANDARD"
            )
          },
          /* Create an icon-style navigation with an Extra Narrow column */
          width: "EXTRA_NARROW"
        ),
        a!columnLayout(
          contents: {
            {
              /* Display the page associated with the index of the selected icon */
              choose(
                local!selectedPage,
                {
                  /* Replace this rich text with the component or rule that should populate this page */
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "Contents of " & local!pages[local!selectedPage].name & " page",
                      style: {"EMPHASIS"}
                    ),
                    align: "CENTER"
                  )
                },
                {
                  /* Replace this rich text with the component or rule that should populate this page */
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "Contents of " & local!pages[local!selectedPage].name & " page",
                      style: {"EMPHASIS"}
                    ),
                    align: "CENTER"
                  )
                },
                {
                  /* Replace this rich text with the component or rule that should populate this page */
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "Contents of " & local!pages[local!selectedPage].name & " page",
                      style: {"EMPHASIS"}
                    ),
                    align: "CENTER"
                  )
                },
                {
                  /* Replace this rich text with the component or rule that should populate this page */
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "Contents of " & local!pages[local!selectedPage].name & " page",
                      style: {"EMPHASIS"}
                    ),
                    align: "CENTER"
                  )
                },
                {
                  /* Replace this rich text with the component or rule that should populate this page */
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "Contents of " & local!pages[local!selectedPage].name & " page",
                      style: {"EMPHASIS"}
                    ),
                    align: "CENTER"
                  )
                }
              )
            }
          }
        )
      }
    )
  )
}

[Line 1-10] Set Local Variables

At the beginning of the expression, two local variables are set up: local!pages, which stores the list of page names and their respective icons, and local!selectedPage, which stores the currently visible page. local!selectedPage is initialized to the first page by default.

1
2
3
4
5
6
7
8
9
10
{
  a!localVariables(
    local!pages:{
      {name: "All Cases", icon: "suitcase"},
      {name: "Starred Cases", icon: "star"},
      {name: "Customers", icon: "users"},
      {name: "Assets", icon: "diamond"},
      {name: "Settings", icon: "cog"}
    },
    local!selectedPage: 1,

[Line 11-50] Left Navigation

The icon-based left navigation is constructed using LARGE Styled Icons with Dynamic Links inside a Card Layout inside an EXTRA-NARROW Column.

Inside the Rich Text Display Field, we iterate over each page in local!pages with a!forEach() to create the linked icons. We use fv!index to save the index of the selected page to local!selectedPage in the dynamic link. Between each icon we add two char(10) elements to create space for a better user experience. We use fv!isLast to only add one space after the final icon.

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
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!cardLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: {
                    a!forEach(
                      items:local!pages,
                      expression: {
                        a!richTextIcon(
                          icon: fv!item.icon,
                          caption: fv!item.name,
                          /* Update the value of local!selectedPage to the index of the clicked icon */
                          link: a!dynamicLink(
                            value: fv!index,
                            saveInto: local!selectedPage
                          ),
                          linkStyle: "STANDALONE",
                          size: "LARGE"
                        ),
                        char(10),
                        if(fv!isLast,
                        null,
                        char(10))
                      })
                  },
                  align: "CENTER"
                )
              },
              style: "STANDARD",
              height: "AUTO",
              marginBelow: "STANDARD"
            )
          },
          /* Create an icon-style navigation with an Extra Narrow column */
          width: "EXTRA_NARROW"
        ),

[Line 51-114] Selected Page

Once the user clicks on an icon in the left navigation pane, the selected page will render in the right column. In this pattern, we have only configured basic Rich Text to display. We recommend you replace each Rich Text Display Field with an Interface Object for the associated page.

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
        a!columnLayout(
          contents: {
            {
              /* Display the page associated with the index of the selected icon */
              choose(
                local!selectedPage,
                {
                  /* Replace this rich text with the component or rule that should populate this page */
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "Contents of " & local!pages[local!selectedPage].name & " page",
                      style: {"EMPHASIS"}
                    ),
                    align: "CENTER"
                  )
                },
                {
                  /* Replace this rich text with the component or rule that should populate this page */
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "Contents of " & local!pages[local!selectedPage].name & " page",
                      style: {"EMPHASIS"}
                    ),
                    align: "CENTER"
                  )
                },
                {
                  /* Replace this rich text with the component or rule that should populate this page */
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "Contents of " & local!pages[local!selectedPage].name & " page",
                      style: {"EMPHASIS"}
                    ),
                    align: "CENTER"
                  )
                },
                {
                  /* Replace this rich text with the component or rule that should populate this page */
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "Contents of " & local!pages[local!selectedPage].name & " page",
                      style: {"EMPHASIS"}
                    ),
                    align: "CENTER"
                  )
                },
                {
                  /* Replace this rich text with the component or rule that should populate this page */
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "Contents of " & local!pages[local!selectedPage].name & " page",
                      style: {"EMPHASIS"}
                    ),
                    align: "CENTER"
                  )
                }
              )
            }
          }
        )
      }
    )
  )
}
FEEDBACK