Subnavigation List Item

Subnavigation lists are secondary-level navigational aid that can be used to represent entities that’s organized in groups or hierarchies.

Component behavior

Like Navigation List Items, this 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 opening an accordion of children in the case of a parent item, among possibly other things.

This component assumes that the consumer properly handles state between siblings, parents and children. As such, you should refer to the design system itself for how to use --- and not to use --- the component together with others in a navigation list.

Examples

Component

Vanilla JS

    <tpg-subnavigation-list-item
      label='one'
      class='has-trailing1-arrow_drop_down-icon has-leading-auto_mode-icon'
      count='4'
      value='one-value'
    ></tpg-subnavigation-list-item>

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

    <tpg-subnavigation-list-item
      label='two'
      secondary-label='secondary-label'
      class='has-leading-auto_mode-icon has-trailing2-sensor_ok_custom-icon'
      secondarylabel='secondary'
      value='two-value'
    ></tpg-subnavigation-list-item>

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

    <tpg-subnavigation-list-item
      label='three'
      subtitle='three subtitle'
      class='has-leading-auto_mode-icon has-trailing1-arrow_drop_up-icon has-trailing2-sensor_ok_custom-icon'
      count='3'
      value='three-value'
    ></tpg-subnavigation-list-item>

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

    <tpg-subnavigation-list-item
      label='one'
      class='has-leading-auto_mode-icon has-trailing2-sensor_ok_custom-icon'
      value='one-value'
      level="two"
    ></tpg-subnavigation-list-item>

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

    <tpg-subnavigation-list-item
      label='two'
      secondary-label='secondary-label'
      class='has-leading-auto_mode-icon has-trailing2-sensor_ok_custom-icon'
      value='two-value'
      level="two"
    ></tpg-subnavigation-list-item>

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

    <tpg-subnavigation-list-item
      label='three'
      subtitle='three subtitle'
      class='has-leading-auto_mode-icon has-trailing2-sensor_ok_custom-icon'
      value='three-value'
      level="two"
    ></tpg-subnavigation-list-item>

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

    <tpg-subnavigation-list-item
      label='disabled'
      secondary-label='disabled-label'
      class='has-leading-auto_mode-icon has-trailing2-sensor_ok_custom-icon'
      leading-icon-template={tpgIconAutoMode}
      secondary-trailing-icon-template={tpgIconPlaceholderCustom}
      secondarytext='secondary'
      disabled

      value='disabled-value'
    ></tpg-subnavigation-list-item>


    <script>
        // Adds icons onto components with relevant class applied
        for (const elem of document.querySelectorAll('tpg-subnavigation-list-item'))  {
          const e = elem as SubnavigationListItem;
          for (const cls of e.classList) {
            switch (cls) {
                case 'has-leading-auto_mode-icon':
                    e.leadingIconTemplate = tpgIconAutoMode;
                    break;
                case 'has-trailing1-arrow_drop_down-icon':
                    e.trailingIconTemplate = tpgIconArrowDropDown;
                    break;
                case 'has-trailing1-arrow_drop_up-icon':
                    e.trailingIconTemplate = tpgIconArrowDropUp;
                    break;
                case 'has-trailing2-sensor_ok_custom-icon':
                    e.secondaryTrailingIconTemplate = tpgIconPlaceholderCustom;
                    break;
                default:
            }
          }
        }
    </script>

React

function App() {
function handleChange(e: TpgChangeEvent<string>) {
  // NOTE: add your own logic here
  console.log("selected item: ", e.value);
}

return (
  <>
    <tpg-subnavigation-list-item
      label="one"
      leadingIconTemplate={tpgIconAutoMode}
      trailingIconTemplate={tpgIconArrowDropDown}
      count={4}
      value="one-value"
      ontpg-change={handleChange}
    ></tpg-subnavigation-list-item>

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

    <tpg-subnavigation-list-item
      label="two"
      secondary-label="secondary-label"
      leadingIconTemplate={tpgIconAutoMode}
      secondaryTrailingIconTemplate={tpgIconPlaceholderCustom}
      secondaryLabel="secondary"
      value="two-value"
      ontpg-change={handleChange}
    ></tpg-subnavigation-list-item>

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

    <tpg-subnavigation-list-item
      label="three"
      subtitle="three subtitle"
      leadingIconTemplate={tpgIconAutoMode}
      trailingIconTemplate={tpgIconArrowDropUp}
      secondaryTrailingIconTemplate={tpgIconPlaceholderCustom}
      count={3}
      value="three-value"
      ontpg-change={handleChange}
    >
      <tpg-badge
        slot="badge"
        label="Text"
        type="neutral"
        emphasis="default"
        size="xxs"
      ></tpg-badge>
    </tpg-subnavigation-list-item>

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

    <tpg-subnavigation-list-item
      label="one"
      leadingIconTemplate={tpgIconAutoMode}
      secondaryTrailingIconTemplate={tpgIconPlaceholderCustom}
      value="one-value"
      level="two"
      ontpg-change={handleChange}
    ></tpg-subnavigation-list-item>

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

    <tpg-subnavigation-list-item
      label="two"
      secondaryLabel="secondary-label"
      leadingIconTemplate={tpgIconAutoMode}
      secondaryTrailingIconTemplate={tpgIconPlaceholderCustom}
      value="two-value"
      level="two"
      ontpg-change={handleChange}
    ></tpg-subnavigation-list-item>

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

    <tpg-subnavigation-list-item
      label="three"
      subtitle="three subtitle"
      leadingIconTemplate={tpgIconAutoMode}
      secondaryTrailingIconTemplate={tpgIconPlaceholderCustom}
      value="three-value"
      level="two"
      ontpg-change={handleChange}
    >
      <tpg-badge
        slot="badge"
        label="Text"
        type="neutral"
        emphasis="default"
        size="xxs"
      ></tpg-badge>
    </tpg-subnavigation-list-item>

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

    <tpg-subnavigation-list-item
      label="disabled"
      secondaryLabel='disabled-label'
      class='has-leading-auto_mode-icon has-trailing2-sensor_ok_custom-icon'
      leadingIconTemplate={tpgIconAutoMode}
      secondaryTrailing-icon-template={tpgIconPlaceholderCustom}
      secondarytext='secondary'
      disabled
      value='disabled-value'
    ></tpg-subnavigation-list-item>
  </>
);
}

Tables

Properties

Attribute	Property	Description	Type	Default Value
count	count	Count to be displayed in the right part of the component	number	0
disabled	disabled	Flags that the component should be disabled	boolean	false
leading-icon-template	leadingIconTemplate	Name of the icon on the far left in the component. Takes a URI-encoded SVG.	IconConstant | ''	''
level	level	Defines the visual level of the component. Use 'two' for child variants.	'one' | 'two'	'one'
secondary-label	secondaryLabel	Secondary text label (title 2) of the item. Not a subtitle, but placed to the side	string	''
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 to the far right in the component. Usually a right-facing arrow. Takes a URI-encoded SVG.	IconConstant | ''	''
secondary-trailing-icon-template	secondaryTrailingIconTemplate	The icon second from the far right in the component. Takes a URI-encoded SVG.	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	Event emitted when an item is clicked. It's value prop is returned in the event.

Functions

Name	Description	Arguments
No functions found.

Slots

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

CSS Parts

Attribute	Description
badge	Part for styling the container around the slotted badge

Sandbox