Menu item

<tpg-menu-item></tpg-menu-item>

Menus are a continuous group of text or icons with text. They appear when users interact with a icon buttons, buttons, and text fields (Combo box).

Menus display a list of choices on a temporary surface, and allow users to make a selection from multiple options. They appear in front of all other permanent UI elements.

Examples

  <div style="width: 200px;">
      <tpg-menu-item id="item-1" label="Hello"> </tpg-menu-item>
  </div>

With icons

Combine leading, secondaryLeading, trailing and secondaryTrailing as you wish.

  <div style="width: 200px; display: flex; flex-direction: column; gap: 8px;">
      <tpg-menu-item
          label="Leading icon"
          class="has-placeholder-leading-icon"
      ></tpg-menu-item>
      <tpg-menu-item
          label="Trailing icon"
          class="has-placeholder-trailing-icon"
      ></tpg-menu-item>
      <tpg-menu-item
          label="Double leading icon"
          class="has-placeholder-leading-icon has-placeholder-secondary-leading-icon"
      ></tpg-menu-item>
      <tpg-menu-item
          label="Double trailing icon"
          class="has-placeholder-trailing-icon has-placeholder-secondary-trailing-icon"
      </tpg-menu-item>
  </div>

  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          // Adds placeholder icons onto menu items with relevant class applied
          for (const elem of document.querySelectorAll('tpg-menu-item.has-placeholder-icon'))  {
            const item = elem as MenuItem;
            item.iconTemplate = tpgIconPlaceholderCustom;
          }
          for (const elem of document.querySelectorAll('tpg-menu-item.has-placeholder-leading-icon'))  {
            const item = elem as MenuItem;
            item.iconTemplate = tpgIconPlaceholderCustom;
          }
          for (const elem of document.querySelectorAll('tpg-menu-item.has-placeholder-secondary-leading-icon'))  {
            const item = elem as MenuItem;
            item.iconTemplate = tpgIconPlaceholderCustom;
          }
          for (const elem of document.querySelectorAll('tpg-menu-item.has-placeholder-trailing-icon'))  {
            const item = elem as MenuItem;
            item.iconTemplate = tpgIconPlaceholderCustom;
          }
          for (const elem of document.querySelectorAll('tpg-menu-item.has-placeholder-secondary-trailing-icon'))  {
            const item = elem as MenuItem;
            item.iconTemplate = tpgIconPlaceholderCustom;
          }
      });
  </script>

    import {tpgIconPlaceholderCustom} from '@tpg/grammar-web-icons';

    ...

    <div
      style={{
        width: "200px",
        display: "flex",
        flexDirection: "column",
        gap: "3px",
      }}
    >
      <tpg-menu-item
        label="Leading icon"
        leadingIconTemplate={tpgIconPlaceholderCustom}
      ></tpg-menu-item>
      <tpg-menu-item
        label="Trailing icon"
        trailingIconTemplate={tpgIconPlaceholderCustom}
      ></tpg-menu-item>
      <tpg-menu-item
        label="Double leading icon"
        leadingIconTemplate={tpgIconPlaceholderCustom}
        secondaryLeadingIconTemplate={tpgIconPlaceholderCustom}
      ></tpg-menu-item>
      <tpg-menu-item
        label="Double trailing icon"
        trailingIconTemplate={tpgIconPlaceholderCustom}
        secondaryTrailingIconTemplate={tpgIconPlaceholderCustom}
      ></tpg-menu-item>
    </div>

Secondary label

Use the secondaryLabel to add a secondary label.

      <tpg-menu-item
          label="Text"
          secondary-label="Secondary text"
      ></tpg-menu-item>

      <tpg-menu-item
          label="Text"
          secondaryLabel="Secondary text"
      ></tpg-menu-item>

Disabled

Use the disabled prop to make the item disabled.

Component
Code

  <div style="width: 200px;">
      <tpg-menu-item
          label="Disabled"
          disabled
      ></tpg-menu-item>
  </div>

Icon only

Use the iconOnly combined with a leadingIcon to create a icon only menu-item.

  <div style="width: 200px;">
      <tpg-menu-item
          icon-only
          class="has-placeholder-icon"
      ></tpg-menu-item>
  </div>

  <script>
      document.addEventListener('DOMContentLoaded', ()=>{
          // Adds placeholder icons onto menu items with relevant class applied
          for (const elem of document.querySelectorAll('tpg-menu-item.has-placeholder-icon'))  {
            const item = elem as MenuItem;
            item.iconTemplate = tpgIconPlaceholderCustom;
          }
      });
  </script>

  import {tpgIconPlaceholderCustom} from '@tpg/grammar-web-icons';

  ...

  <div style={{width: "200px"}}>
      <tpg-menu-item
          iconOnly
          leadingIconTemplate={tpgIconPlaceholderCustom}
      ></tpg-menu-item>
  </div>

With badge

There are two ways to render a badge within the Menu Item. Slotting one in using slot="badge", and setting the badge-value attribute.

Only one badge can be rendered at once, and the slotted badge takes precedence over the one set using the badge-value attribute, meaning badge-value will be ignored should both be provided.

The badge-value renders a predesigned badge, whereas the slot allows you to customize the badge yourself.

      <tpg-menu-item
          id="menuItem"
          label="Text"
          badge-value="Badge value"
      ></tpg-menu-item>

      <tpg-menu-item
          id="menuItem"
          label="Text"
          badge-value="Badge value"
      >
          <tpg-badge slot="badge" label="Slotted" secondary-label="Badge!"/>
      </tpg-menu-item>

      <tpg-menu-item
          id="menuItem"
          label="Text"
          badgeValue="Badge value"
      ></tpg-menu-item>

      <tpg-menu-item
          id="menuItem"
          label="Text"
          badgeValue="Badge value"
      >
          <tpg-badge
              slot="badge"
              label="Slotted"
              secondaryLabel="Badge!"
          ></tpg-badge
      </tpg-menu-item>

Tables

Properties

Attribute	Property	Description	Type	Default Value
label	label	The label for the component.	string	''
value	value	The value of the component.	string	''
badge-value	badgeValue	A simple string value used to render a predesigned badge. Ignored if a custom badge is provided via the `badge` slot.	string	''
secondary-label	secondaryLabel	The secondary label for the component.	string	''
type	type	The type of the component, either 'default' or 'error'.	'default' \| 'error'	'default'
leading-icon-template	leadingIconTemplate	The template for the leading icon.	IconConstant \| ''	''
override-leading-icon-template-color	overrideLeadingIconTemplateColor	The color to override the leadingIconTemplate	string	''
secondary-leading-icon-template	secondaryLeadingIconTemplate	The template for the secondary leading icon.	IconConstant \| ''	''
trailing-icon-template	trailingIconTemplate	The template for the trailing icon.	IconConstant \| ''	''
secondary-trailing-icon-template	secondaryTrailingIconTemplate	The template for the secondary trailing icon.	IconConstant \| ''	''
disabled	disabled	Whether the component is disabled.	boolean	false
selected	selected	Whether the component 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
badge	The badge to be shown in the menu item. Note: If a badge is provided via the badge slot, it will take precedence over the badgeValue property. This means that if both are provided, only the slotted badge will be rendered, and the badgeValue will be ignored.
content	Alternative rendering for menu item.

CSS Parts

Attribute	Description
No CSS parts found.