Breadcrumb item

<tpg-breadcrumb-item></tpg-breadcrumb-item>

Breadcrumb Items are low emphasis buttons that are specifically designed to the system’s breadcrumbs; a secondary navigation scheme that reveals the user’s location in the architecture.

The Breadcrumb item cannot be selected or deselected manually: the selected sate indicates what page of the architecture you are currently viewing, click the BCItem will not deselect it. However, clicking an unselected BCItem, will redirect the user to the page that BCItem points to, turning that BCItem from unselected to selected.

Examples

Basic

The Breadcrumb Item is a simple component that is meant to be slotted into the Breadcrumbs component. See the Breadcrumbs documentation for more info on how to use the Breadcrumb Item

Component

Code

      <tpg-breadcrumb-item
          label="Selected"
          value="item-1"
          selected>
      </tpg-breadcrumb-item>

      <tpg-breadcrumb-item
          label="Unselected"
          value="item-2">
      </tpg-breadcrumb-item>

Tables

Properties

Attribute	Property	Description	Type	Default Value
value	value	The value that will be dispatched upon clicking the breadcrumb-item.	string	''
label	label	The value that will be rendered within the breadcrumb item.	string	''
selected	selected	Whether or not the breadcrumb item is selected.	boolean	false

Events

Event name	Reactjs attribute	Description
tpg-select	ontpg-select	Emitted when the item is selected, containing the value identifier of this item.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox