Breadcrumbs

<tpg-breadcrumbs></tpg-breadcrumbs>

Breadcrumbs are location-based navigational elements commonly used to aid users in showing where they are in the system’s hierarchy tracing their steps back to a previous page. They can be particularly helpful when navigating through large or complex architectures.

Breadcrumbs are typically located near the top of the Workflow panel; it’s important to ensure that they are clearly visible and distinguishable from other elements on the page.

In order to aid the user’s orientation in the system and ensure legibility and usability, Breadcrumbs should not display more than three levels of hierarchically arranged pages. In case the need arise for having more than three levels, it is recommended to rethink the system architecture and the logical categories that group the content.

It’s important to use descriptive and concise labels for each level of the hierarchy, as this makes it easier for users to understand where they are and where they’ve been.

Examples

Basic usage

Breadcrumb items require no slot, while action items (to the right) require the action slot.

Breadcrumbs supports a maximum of three breadcrumb-items. If any more are placed inside, they will automatically be placed inside a Quaternary Menu Button, which also automatically displays how many there are.

Action Menu must be enabled with the trailing-menu attribute, while its children are slotted in using slot="action" The action menu has a default icon which can be overriden with the trailing-menu-icon-template attribute.

        <tpg-breadcrumbs>
          <tpg-breadcrumb-item value="Test 1" label="One"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 2" label="Two"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 3" label="Three"></tpg-breadcrumb-item>
        </tpg-breadcrumbs>

        <tpg-breadcrumbs trailing-menu>
          <tpg-breadcrumb-item value="Test 1" label="With"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 2" label="Action"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 3" label="Menu"></tpg-breadcrumb-item>
          <tpg-menu-item slot="action" label="Action Item 1"/>
          <tpg-menu-item slot="action" label="Action Item 2"/>
        </tpg-breadcrumbs>

        <tpg-breadcrumbs manual-scroll>
          <tpg-breadcrumb-item value="Test 1" label="With"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 2" label="Manual"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 3" label="Scroll"></tpg-breadcrumb-item>
        </tpg-breadcrumbs>

        <tpg-breadcrumbs trailing-menu manual-scroll>
          <tpg-breadcrumb-item value="Test 1" label="Fully"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 2" label="Stacked"></tpg-breadcrumb-item>
          <tpg-menu-item slot="action" label="Action Item 1"/>
          <tpg-menu-item slot="action" label="Action Item 2"/>
        </tpg-breadcrumbs>

        <tpg-breadcrumbs>
          <tpg-breadcrumb-item value="Test 1" label="One"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 2" label="Two"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 3" label="Three"></tpg-breadcrumb-item>
        </tpg-breadcrumbs>

        <tpg-breadcrumbs trailingMenu>
          <tpg-breadcrumb-item value="Test 1" label="With"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 2" label="Action"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 3" label="Menu"></tpg-breadcrumb-item>
          <tpg-menu-item slot="action" label="Action Item 1"/>
          <tpg-menu-item slot="action" label="Action Item 2"/>
        </tpg-breadcrumbs>

        <tpg-breadcrumbs manualScroll>
          <tpg-breadcrumb-item value="Test 1" label="With"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 2" label="Manual"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 3" label="Scroll"></tpg-breadcrumb-item>
        </tpg-breadcrumbs>

        <tpg-breadcrumbs trailingMenu manualScroll>
          <tpg-breadcrumb-item value="Test 1" label="Fully"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 2" label="Stacked"></tpg-breadcrumb-item>
          <tpg-menu-item slot="action" label="Action Item 1"/>
          <tpg-menu-item slot="action" label="Action Item 2"/>
        </tpg-breadcrumbs>

Manual Scroll

The manual-scroll attribute enables the up/down arrows which dispatches scrollup/scrolldown event when pressed.

        <tpg-breadcrumbs manual-scroll>
          <tpg-breadcrumb-item value="Test 1" label="One"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 2" label="Two"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 3" label="Three"></tpg-breadcrumb-item>
          <tpg-menu-item slot="action" label="Action Item 1"/>
        </tpg-breadcrumbs>

        <tpg-breadcrumbs manual-scroll>
          <tpg-breadcrumb-item value="Test 1" label="One"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 2" label="Two"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 3" label="Three"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 4" label="Four"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 5" label="Five"></tpg-breadcrumb-item>
          <tpg-menu-item slot="action" label="Action Item 1"/>
          <tpg-menu-item slot="action" label="Action Item 2"/>
        </tpg-breadcrumbs>

        <tpg-breadcrumbs manualScroll>
          <tpg-breadcrumb-item value="Test 1" label="One"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 2" label="Two"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 3" label="Three"></tpg-breadcrumb-item>
          <tpg-menu-item slot="action" label="Action Item 1"/>
        </tpg-breadcrumbs>

        <tpg-breadcrumbs manualScroll>
          <tpg-breadcrumb-item value="Test 1" label="One"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 2" label="Two"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 3" label="Three"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 4" label="Four"></tpg-breadcrumb-item>
          <tpg-breadcrumb-item value="Test 5" label="Five"></tpg-breadcrumb-item>
          <tpg-menu-item slot="action" label="Action Item 1"/>
          <tpg-menu-item slot="action" label="Action Item 2"/>
        </tpg-breadcrumbs>

Adding the trailing-menu attribute enabkes the trailing menu, home to the action items.

Action items require slot="action", see code for examples.

The trailing menu icon can be overriden with the trailing-menu-icon attribute:

<tpg-breadcrumbs trailing-menu>
  <tpg-breadcrumb-item value="Test 1" label="One"></tpg-breadcrumb-item>
  <tpg-breadcrumb-item value="Test 2" label="Two"></tpg-breadcrumb-item>
  <tpg-breadcrumb-item value="Test 3" label="Three"></tpg-breadcrumb-item>
  <tpg-menu-item slot="action" label="Action Item 1"/>
  <tpg-menu-item slot="action" label="Action Item 2"/>
</tpg-breadcrumbs>


<tpg-breadcrumbs trailing-menu class="trailing-menu-icon">
  <tpg-breadcrumb-item value="Test 1" label="One"></tpg-breadcrumb-item>
  <tpg-breadcrumb-item value="Test 2" label="Two"></tpg-breadcrumb-item>
  <tpg-breadcrumb-item value="Test 3" label="Three"></tpg-breadcrumb-item>
  <tpg-breadcrumb-item value="Test 4" label="Four"></tpg-breadcrumb-item>
  <tpg-breadcrumb-item value="Test 5" label="Five"></tpg-breadcrumb-item>
  <tpg-menu-item slot="action" label="Action Item 1"/>
  <tpg-menu-item slot="action" label="Action Item 2"/>
</tpg-breadcrumbs>

<script>
    document.addEventListener('DOMContentLoaded', ()=>{
        // Adds placeholder icons onto breadcrumbs with relevant class applied
        const breadcrumbs = document.querySelectorAll('tpg-breadcrumbs.trailing-menu-icon');

        for (const elem of breadcrumbs) {
            const breadcrumbElement = elem as Breadcrumbs; // api is same for all non-icon elements
            breadcrumbElement.trailingMenuIconTemplate = tpgIconPlaceholderCustom;
        }
    });
</script>

<tpg-breadcrumbs trailingMenu>
  <tpg-breadcrumb-item value="Test 1" label="One"></tpg-breadcrumb-item>
  <tpg-breadcrumb-item value="Test 2" label="Two"></tpg-breadcrumb-item>
  <tpg-breadcrumb-item value="Test 3" label="Three"></tpg-breadcrumb-item>
  <tpg-menu-item slot="action" label="Action Item 1"/>
  <tpg-menu-item slot="action" label="Action Item 2"/>
</tpg-breadcrumbs>


<tpg-breadcrumbs trailingMenu trailingMenuIconTemplate={tpgIconPlaceholderCustom}>
  <tpg-breadcrumb-item value="Test 1" label="One"></tpg-breadcrumb-item>
  <tpg-breadcrumb-item value="Test 2" label="Two"></tpg-breadcrumb-item>
  <tpg-breadcrumb-item value="Test 3" label="Three"></tpg-breadcrumb-item>
  <tpg-breadcrumb-item value="Test 4" label="Four"></tpg-breadcrumb-item>
  <tpg-breadcrumb-item value="Test 5" label="Five"></tpg-breadcrumb-item>
  <tpg-menu-item slot="action" label="Action Item 1"/>
  <tpg-menu-item slot="action" label="Action Item 2"/>
</tpg-breadcrumbs>

Tables

Properties

Attribute	Property	Description	Type	Default Value
trailing-menu	trailingMenu	Whether to enable the trailing menu.	boolean	false
trailing-menu-icon-template	trailingMenuIconTemplate	Overrides icon for the trailing menu button	IconConstant \| ''	''
manual-scroll	manualScroll	Whether to enable manual scrolling buttons.	boolean	false

Events

Event name	Reactjs attribute	Description
tpg-select	ontpg-select	Event fired when either a breadcrumb-item or menu-item (action item) is selected. Contains the value of either menu-item or breadcrumb-item
tpg-scroll-up	ontpg-scroll-up	Event fired when the scroll up button is clicked.
tpg-scroll-down	ontpg-scroll-down	Event fired when the scroll down button is clicked.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
	Empty slot reserved for breadcrumb-items.
action	Slot reserved for action items inserted into rightmost Quaternary Menu Button.

CSS Parts

Attribute	Description
No CSS parts found.