Navigation List Item

Navigation List Items provide access to destinations and app functionality, such as switching accounts, they are best used for a secondary-level navigation on the Workflow panel. When on two level, they expand as accordion-like components that allow to vertically list and expand a group of items.

This type of navigation should be used when, after the first navigation level (the right Navigation Rail), the second level has more than 4 items, and it is therefore impossible to use a tab navigation.

Component behavior

The component works as an especially styled button, emitting an event on click that the consumer must handle to maintain a proper state of the given list of these items. Which means setting the selected prop and opening an accordion of children in the case of a parent item, among possibly other things.

Usage rules are for convenience reproduced from figma in the section below, but if in doubt confer with the responsible designer. In case of drift with regard to information in figma, look to figma for authority.

Specific usage rules

Case 1

Selection: Complementing content panel (Settings / Mail)

• Level 1 Items with Subitems cannot be directly selected (other stats changes will still show).
• In the case 1, there is always one List Item selected (the one that corresponds to the content on the right side), that selection can be toggled between all the other lvl 1 ListItems.
• When a Level 1 item contains lvl 2 Items, that item cannot be selected directly, only its lvl 2 children. On click of that lvl1 item, the selection state stays with the previously selected item until a lvl2 item is clicked.

Case 2

Action: Workflow Panel Navigation

• Upon opening of the Navigation List of the WP, the selection is reset, and no Item is selected.
• When a Level 1 item contains lvl 2 Items, they can be selected and on click they will show its lvl 2 children. The lvl 2 children cannot be directly selected, and on click, they will direct the user to the next step of the architecture.
• Always used with trailing_icon -> arrow_forward

Examples

Component

Vanilla JS

    <tpg-navigation-list-item
      label='one'
      class='has-leading2-auto_mode-icon has-leading1-arrow_drop_down-icon has-trailing-arrow_forward-icon'
      value='one-value'
    ></tpg-navigation-list-item>

    <tpg-divider
      type="default"
      orientation="horizontal"
    ></tpg-divider>

    <tpg-navigation-list-item
      label='two'
      class='has-leading2-auto_mode-icon has-leading1-arrow_drop_down-icon has-trailing-arrow_forward-icon'
      selected
      value='two-value'
    ></tpg-navigation-list-item>

    <tpg-divider
      type="default"
      orientation="horizontal"
    ></tpg-divider>

    <tpg-navigation-list-item
      label='three'
      subtitle='three subtitle'
      class='has-leading2-auto_mode-icon has-leading1-arrow_drop_down-icon has-trailing-arrow_forward-icon'
      value='three-value'
    >
      <tpg-badge
        slot='badge'
        label='10'
        type='accent'
        emphasis='high'
        size='xxs'
      ></tpg-badge>
    </tpg-navigation-list-item>

    <tpg-divider
      type="default"
      orientation="horizontal"
    ></tpg-divider>

    <tpg-navigation-list-item
      label='one'
      class='has-leading2-auto_mode-icon has-leading1-arrow_drop_down-icon has-trailing-arrow_forward-icon'
      value='one-value'
      level="two"
    ></tpg-navigation-list-item>

    <tpg-divider
      type="default"
      orientation="horizontal"
    ></tpg-divider>

    <tpg-navigation-list-item
      label='two'
      class='has-leading2-auto_mode-icon has-leading1-arrow_drop_down-icon has-trailing-arrow_forward-icon'
      value='two-value'
      level="two"
    ></tpg-navigation-list-item>

    <tpg-divider
      type="default"
      orientation="horizontal"
    ></tpg-divider>

    <tpg-navigation-list-item
      label='three'
      subtitle='three subtitle'
      class='has-leading2-auto_mode-icon has-leading1-arrow_drop_down-icon has-trailing-arrow_forward-icon'
      value='three-value'
      level="two"
    >
      <tpg-badge
        slot='badge'
        label='10'
        type='accent'
        emphasis='high'
        size='xxs'
      ></tpg-badge>
    </tpg-navigation-list-item>

    <script>
      import {
        tpgIconAutoMode,
        tpgIconArrowDropDown,
        tpgIconArrowForward,
      } from '@tpg/grammar-web-icons';

      document.addEventListener('DOMContentLoaded', ()=>{
          // Adds placeholder icons onto icons with relevant class applied
          const elements = document.querySelectorAll(
            'tpg-navigation-list-item
          );
          for (const elem of elements)  {
            if (elem.classList.contains('has-leading1-arrow_drop_down-icon')) {
              const item = elem as NavigationListItem;
              item.iconTemplate = tpgIconAutoMode;
            }
            // and so on for other icons

            // Event handling:
            item.addEventListener('tpg-change', (e)=>{
              // NOTE: add your own logic here
              console.log('selected item: ', e.value);
              e.target.selected = !e.target.selected;
            });
          }

      });
    </script>

React

function YourReactComponent() {
  function handleChange(e: TpgChangeEvent<string>) {
      // NOTE: add your own logic here
      console.log("selected item: ", e.value);
      const item = e.target as NavigationListItem;
      item.selected = !item.selected;
  }

  return (
  <>
    <tpg-navigation-list-item
      label="one"
      leadingIconTemplate={tpgIconArrowDropDown}
      secondaryLeadingIconTemplate={tpgIconAutoMode}
      trailingIconTemplate={tpgIconArrowForward}
      value="one-value"
      ontpg-change={handleChange}
    ></tpg-navigation-list-item>

    <tpg-divider type="default" orientation="horizontal"></tpg-divider>

    <tpg-navigation-list-item
      label="two"
      leadingIconTemplate={tpgIconArrowDropDown}
      secondaryLeadingIconTemplate={tpgIconAutoMode}
      trailingIconTemplate={tpgIconArrowForward}
      selected
      value="two-value"
      ontpg-change={handleChange}
    ></tpg-navigation-list-item>

    <tpg-divider type="default" orientation="horizontal"></tpg-divider>

    <tpg-navigation-list-item
      label="three"
      subtitle="three subtitle"
      leadingIconTemplate={tpgIconArrowDropDown}
      secondaryLeadingIconTemplate={tpgIconAutoMode}
      trailingIconTemplate={tpgIconArrowForward}
      value="three-value"
      ontpg-change={handleChange}
    >
      <tpg-badge
        slot="badge"
        label="10"
        type="accent"
        emphasis="high"
        size="xxs"
      ></tpg-badge>
    </tpg-navigation-list-item>

    <tpg-divider type="default" orientation="horizontal"></tpg-divider>

    <tpg-navigation-list-item
      label="one"
      leadingIconTemplate={tpgIconArrowDropDown}
      secondaryLeadingIconTemplate={tpgIconAutoMode}
      trailingIconTemplate={tpgIconArrowForward}
      value="one-value"
      level="two"
      ontpg-change={handleChange}
    ></tpg-navigation-list-item>

    <tpg-divider type="default" orientation="horizontal"></tpg-divider>

    <tpg-navigation-list-item
      label="two"
      leadingIconTemplate={tpgIconArrowDropDown}
      secondaryLeadingIconTemplate={tpgIconAutoMode}
      trailingIconTemplate={tpgIconArrowForward}
      value="two-value"
      level="two"
      ontpg-change={handleChange}
    ></tpg-navigation-list-item>

    <tpg-divider type="default" orientation="horizontal"></tpg-divider>

    <tpg-navigation-list-item
      label="three"
      subtitle="three subtitle"
      leadingIconTemplate={tpgIconArrowDropDown}
      secondaryLeadingIconTemplate={tpgIconAutoMode}
      trailingIconTemplate={tpgIconArrowForward}
      value="three-value"
      level="two"
      ontpg-change={handleChange}
    >
      <tpg-badge
        slot="badge"
        label="10"
        type="accent"
        emphasis="high"
        size="xxs"
      ></tpg-badge>
    </tpg-navigation-list-item>
  </>
  );
}

Tables

Properties

Attribute	Property	Description	Type	Default Value
leading-icon-template	leadingIconTemplate	Name of the icon on the far left in the component. Normally only used for the left down/up arrow in case of parent components	IconConstant | ''	''
secondary-leading-icon-template	secondaryLeadingIconTemplate	Name of the icon second from the far left in the component.	IconConstant | ''	''
level	level	Defines the visual level of the component. Use 'two' for child variants.	'one' | 'two'	'one'
selected	selected	Flags that the component should be rendered as selected	boolean	false
subtitle	subtitle	Text that should be rendered as a subtitle in the component	string	''
label	label	Main text label (title) of the item	string	''
trailing-icon-template	trailingIconTemplate	Name of the icon that should be trailing in the component. Normally a right-facing arrow.	IconConstant | ''	''
value	value	A string value contained in the component. Will be returned by events on click	string	''

Events

Event name	Reactjs attribute	Description
tpg-change	ontpg-change	Eventemitted when an item is clicked. Contains the value property of the component

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
badge	Slot reserved for a tpg-badge component.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox