Breadcrumbs

Breadcrumbs are useful for showing users their location within an organizational hierarchy. This page explains the design structure of the breadcrumbs pattern.

Breadcrumbs are useful for showing users their location within an organizational hierarchy. They may also contain links to allow users to navigate to other levels of the hierarchy. Breadcrumbs should not be used for showing navigation history. If a user reaches a view by following links from multiple other views, the breadcrumb should always show the same hierarchy. Use the "Strong" style to indicate the current page and the "Standalone" link style for the preceding pages.

Since implementations of breadcrumbs vary widely based on the scenario, this pattern only demonstrates the recommended styling approach.

breadcrumbs_pattern.png

Design Structure

The purpose of this section is to break down this expression so you can better understand how to adapt this pattern to your own data.

The main components in this pattern are rich text display items and a rich text display field. The image below displays how the pattern looks on a blank interface with callouts of the main components. 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

When you drag and drop the breadcrumbs pattern onto your interface, 42 lines of expressions will be added to the section where you dragged it.

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
{
  load(
    /* This variable would normally be retrieved with a rule like rule!getBreadcrumbsForIdentifier(identifier: 5). */
    local!nodes: {
      {name: "Home", identifier: 1},
      {name: "My Documents", identifier: 12},
      {name: "Strategy", identifier: 33},
      {name: "2018 Road Map", identifier: 47}
    },
    local!newNode,
    {
      a!richTextDisplayField(
        labelPosition: "COLLAPSED",
        value: {
          a!forEach(
            items: local!nodes,
            expression: if(
              fv!isLast,
              a!richTextItem(
                text: fv!item.name,
                style: "STRONG"
              ),
              {
                a!richTextItem(
                  text: fv!item.name,
                  /* The saveInto in this link would run the query or rule necessary to navigate the user to *
                   * the node in the breadcrumbs that they just clicked on.                                  */
                  link: a!dynamicLink(),
                  linkStyle: "STANDALONE"
                ),
                a!richTextItem(
                  text: "  /  ",
                  color: "SECONDARY"
                )
              }
            )
          )
        }
      )
    }
  )
}

[Line 1-10] Define Breadcrumb Nodes

At the top of the pattern, local variables are set up to deine the breadcrumb nodes. The sample data in local!nodes should be replaced with a rule.

1
2
3
4
5
6
7
8
9
10
{
  load(
    /* This variable would normally be retrieved with a rule like rule!getBreadcrumbsForIdentifier(identifier: 5). */
    local!nodes: {
      {name: "Home", identifier: 1},
      {name: "My Documents", identifier: 12},
      {name: "Strategy", identifier: 33},
      {name: "2018 Road Map", identifier: 47}
    },
    local!newNode,

[Line 11-42] Define Breadcrumb Nodes

There is only one component for this pattern, which is the rich text display field. Breadcrumb functionality can vary substantially, but we recommend users to use a saveInto in a!dynamicLink() to run a query or rule to navigate to other nodes in the breadcrumb.

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
 {
      a!richTextDisplayField(
        labelPosition: "COLLAPSED",
        value: {
          a!forEach(
            items: local!nodes,
            expression: if(
              fv!isLast,
              a!richTextItem(
                text: fv!item.name,
                style: "STRONG"
              ),
              {
                a!richTextItem(
                  text: fv!item.name,
                  /* The saveInto in this link would run the query or rule necessary to navigate the user to *
                   * the node in the breadcrumbs that they just clicked on.                                  */
                  link: a!dynamicLink(),
                  linkStyle: "STANDALONE"
                ),
                a!richTextItem(
                  text: "  /  ",
                  color: "SECONDARY"
                )
              }
            )
          )
        }
      )
    }
  )
}
FEEDBACK