Navigation Rail

The Navigation Rail 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

Navigation Rails behave much like Radio Button Groups. They only allow a single item to be selected at a time, and emit a tpg-change event on toggle, which contains the key property of the newly selected item. However, you can specify if a given item should appear at the top or bottom of the rail by slotting in top-items and/or bottom-items.

Examples

Component

Vanilla JS

      <div style="height: 600px">
          <tpg-navigation-rail>
              <tpg-navigation-rail-item
                  slot="top-items"
                  label="First"
                  value="first"
                  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
                  loading
                  slot="top-items"
                  label="Second"
                  value="second"
                  class="has-placeholder-icon"
              ></tpg-navigation-rail-item>
              <tpg-navigation-rail-item
                  slot="bottom-items"
                  label="Third"
                  value="third"
                  class="has-placeholder-icon"
              ></tpg-navigation-rail-item>
          </tpg-navigation-rail>
      </div>

      <script>
          document.addEventListener('DOMContentLoaded', () => {
              const rail = document.querySelector('tpg-navigation-rail');
              rail.addEventListener("tpg-change", (e) => {
                  e.target.selectedValue = e.value
              });

              const items = document.querySelectorAll(
                  'tpg-navigation-rail-item.has-placeholder-icon'
              );
              for (const elem of items) {
                  const item = elem as NavigationRailItem;
                  item.iconTemplate = tpgIconPlaceholderCustom;
              }

          });
      </script>

React

  <div style={{height: "600px"}}>
      <tpg-navigation-rail
          ontpg-change={(e)=>e.target.selectedValue = e.value}
      >
          <tpg-navigation-rail-item
              slot="top-items"
              label="First"
              value="first"
              iconTemplate={tpgIconPlaceholderCustom}
          >
              <tpg-badge
                  size="xxs"
                  type="accent"
                  emphasis="high"
                  slot="badge"
                  label="10"
              ></tpg-badge>
          </tpg-navigation-rail-item>
          <tpg-navigation-rail-item
              loading
              slot="top-items"
              label="Second"
              value="second"
              iconTemplate={tpgIconPlaceholderCustom}
          ></tpg-navigation-rail-item>
          <tpg-navigation-rail-item
              slot="bottom-items"
              label="Third"
              value="third"
              iconTemplate={tpgIconPlaceholderCustom}
          ></tpg-navigation-rail-item>
      </tpg-navigation-rail>
  </div>

Tables

Properties

Attribute	Property	Description	Type	Default Value
selected-value	selectedValue	The identifying value of the selected navigation rail item.	string	''

Events

Event name	Reactjs attribute	Description
tpg-change	ontpg-change	Emitted when the state of the nested navigation rail items change, contains the value of the newly selected button.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
top-items	slot reserved for tpg-navigation-rail-items in the top section
bottom-items	slot reserved for tpg-navigation-rail-items in the bottom section

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox