Navigation Rail Item

The Navigation Rail Items provides a forward navigation movement between primary destinations in the system; each destination is described by an item.

Navigation Rail Items are always represented by two elements:

• An icon that can symbolize the content or the nature of a destination
• Text labels that provide short, meaningful descriptions of navigation destinations and provide an alternative way for users to understand an icon’s meaning

Component behavior

The rail item works as a togglable button that emits an event when it is selected. No event is emitted when the button is clicked while already selected, and it then also does not switch state. Meant to be used inside a Navigation Rail.

Examples

Component

Vanilla JS

    <tpg-navigation-rail-item
      label='Text'
      loading
      class='has-placeholder-icon'
    >
      <tpg-badge
          size="xxs"
          type="accent"
          emphasis="high"
          slot="badge"
          label="10"
      ></tpg-badge>
    </tpg-navigation-rail-item>
    <tpg-navigation-rail-item
      label='Text'
      loading
      selected
      class='has-placeholder-icon'
    >
      <tpg-badge
          size="xxs"
          type="accent"
          emphasis="high"
          slot="badge"
          label="10"
      ></tpg-badge>
    </tpg-navigation-rail-item>

    <script>

      document.addEventListener('DOMContentLoaded', ()=>{
          const items = document.querySelectorAll(
              'tpg-navigation-rail-item.has-placeholder-icon'
          );
          for (const elem of items) {
              const item = elem as NavigationRailItem;
              item.iconTemplate = tpgIconPlaceholderCustom;
              item.addEventListener('tpg-click', (e)=>{
                  e.target.selected = !e.target.value;
              });
          }
      });

    </script>

React

    <tpg-navigation-rail-item
      label='Text'
      loading
      iconTemplate={tpgIconPlaceholderCustom}
      ontpg-click={(e)=>e.target.selected = !e.target.value}
    >
      <tpg-badge
          size="xxs"
          type="accent"
          emphasis="high"
          slot="badge"
          label="10"
      ></tpg-badge>
    </tpg-navigation-rail-item>
    <tpg-navigation-rail-item
      label='Text'
      loading
      selected
      iconTemplate={tpgIconPlaceholderCustom}
      ontpg-click={(e)=>e.target.selected = !e.target.value}
    >
      <tpg-badge
          size="xxs"
          type="accent"
          emphasis="high"
          slot="badge"
          label="10"
      ></tpg-badge>
    </tpg-navigation-rail-item>

Tables

Properties

Attribute	Property	Description	Type	Default Value
icon-template	iconTemplate	Sets the icon of the button, takes a URI-encoded svg. Defaults to a placeholder icon.	IconConstant | ''	''
label	label	The textual label on the button.	string	''
loading	loading	If true, an animated loading bar will show underneath the label.	boolean	false
value	value	The internal value identifier of the button. This is the value that will be emitted when the button is clicked.	string	''
selected	selected	Sets the button's selected state without emitting events. Used for setting state from the parent component.	boolean	false

Events

Event name	Reactjs attribute	Description
tpg-click	ontpg-click	Event fired when an item is clicked. The event is a TpgClickEvent.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
badge	slot reserved for a badge element

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox