Breadcrumbs - smbc-digital/form-builder GitHub Wiki

Overview

Breadcrumbs are links for meaningful navigation. Typically a website has a hierarchical navigation structure. That show the use where they are in the website. However since the forms are not integrated into the CMS they have to be inserted manually. If you don't add a Url it will treat it as a simple string.

DSL properties

Property Type Required Default Value Description
BreadCrumbs array[object] ✔️ ❌ array of breadcrumbs to be displayed

BreadCrumbs object

Property Type Required Default Value Description
Text string ✔️ ❌ text to be used for breadcrumb link
Url string ❌ ❌ url being breadcrumb link

Putting breadcrumbs in a form

Syntax

The Breadcrumbs are placed in the root node of the json

{
  "FormName": "UI Breadcrumbs",
  "StartPageSlug": "page0",
  "BreadCrumbs": [
    {
      "Text": "Text of Link, typically Home Page",
      "Url": "Home Page Url"
    },
    {
      "Text": "Sub-Section Title",
      "Url": "Sub-Section Url"
    },
        {
      "Text": "Sub-Sub-Section Title",
      "Url": "Sub-Sub-Section-Url"
    },
  ],
  "Pages": [
  ]
}

Example

{
"FormName": "UI Breadcrumbs",
  "StartPageSlug": "page0",
  "BreadCrumbs": [
    {
      "Text": "Home",
      "Url": "https://www.stockport.gov.uk"
    },
    {
      "Text": "Bins and recycling",
      "Url": "https://www.stockport.gov.uk/topic/bins-and-recycling"
    }
  ],
}

Example

{
"FormName": "UI Breadcrumbs",
  "StartPageSlug": "page0",
  "BreadCrumbs": [
    {
      "Text": "Home",
      "Url": "https://www.stockport.gov.uk"
    },
    {
      "Text": "Bins and recycling form"
    }
  ],
}

Displaying Bread Crumbs

DisplayBreadcrumbs is a property of a page. if DisplayBreadbrumbs is set to 'true' (json boolean) the breadcrumbs are displayed. If set to 'false' or not set at all the breadcrumbs are hidden

Display Breadcrumbs

Here DisplayBreadbrumbs is set to true and displays breadcrumbs

 {
      "Title": "Page 0",
      "PageSlug": "page0",
      "HideTitle": true,
      "DisplayBreadcrumbs": true,
      "Elements": [
       /*Element Stuff*/
      ],
      "Behaviours": [
        {
          "conditions": [],
          "behaviourType": "GoToPage",
          "PageSlug": "page1"
        }
      ]
    },

page0

Hide Breadcrumbs

Here DisplayBreadcrumbs is not set and hides breadcrumbs.

 {
      "Title": "Textbox example",
      "PageSlug": "page1",     
      "Elements": [
         /*Element Stuff*/
      ],
      "Behaviours": [
        {
          "conditions": [],
          "behaviourType": "GoToPage",
          "PageSlug": "page2"
        }
      ]
    },

page1