Breadcrumb¶
The Breadcrumb shows visitors where they are in the portal as a trail of links, such as Home / Customers / Acme Ltd. Each step is a segment with a label and, usually, a link back to that level. Use it on pages that sit a few levels deep, so visitors can jump back up without using the main navigation.
See also Nav Link and Nav List.
Using it¶
Drop a Breadcrumb onto the page and double-click it to open the Breadcrumb Segments window. Each row is one segment. Give it a Label, such as Customers, and a URL or Route, such as /customers. Labels can be templates, so the last segment can show the current record's name with {$record.name}. Drag rows to reorder them. The last segment is the page the visitor is on, so it is shown as plain text.
Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Configure Segments | Opens the Breadcrumb Segments window | Home, Category, Current Page | The ordered list of segments. See Segment settings |
| Separator | Any text or symbol | / |
What is drawn between segments |
| Variant | Theme variants | Default | Picks the widget's look from the theme. See Variants |
| Custom Style | CSS | Empty | Extra styling for this trail only |
| Box Style | Sizing and spacing | None | The box around the trail |
Segment settings¶
Each row in the Breadcrumb Segments window has these fields.
| Field | Description |
|---|---|
| Label | The text of the segment. Can be a template, e.g. {$record.name} |
| URL or Route | Where the segment links to: a portal route such as /customers, a web address, or a template such as {$params.id}. Leave it empty for plain text |
| Icon | An optional icon shown before the label |
| Readonly | Draws the segment like a link but clicking it does nothing |
Tips¶
A few details about how segments are drawn.
- The last segment is always plain text, even if it has a URL. It is the current page, and screen readers announce it as such. A segment with an empty URL is plain text too.
- The separator is decorative. Screen readers skip it and it cannot be focused.
- For a single link use a Nav Link. For a menu built from the portal's pages use a Nav List.