Menu

<tpg-menu></tpg-menu>

Basic usage

Menu by itself does not do anything fancy. It’s a floating container with absolute positioning and some simple keydown & mouseover navigation. The isOpen property needs to be manually toggled in order to show/hide the menu based on click events.

The menu can be traversed by mouse-hovering over submenus / menu items, or by using keyboard arrows.

Examples

Menu in its simplest form

Component

Vanilla JS

  <div style="position:relative; height: 200px;">
    <tpg-menu is-open>
      <tpg-menu-item label="Menu Item 1"></tpg-menu-item>
      <tpg-menu-item label="Menu Item 2"></tpg-menu-item>
      <tpg-menu-item label="Menu Item 3"></tpg-menu-item>
    </tpg-menu>
  </div>

React

  <div style={{position: "relative", height: "200px"}}>
    <tpg-menu isOpen>
      <tpg-menu-item label="Menu Item 1"></tpg-menu-item>
      <tpg-menu-item label="Menu Item 2"></tpg-menu-item>
      <tpg-menu-item label="Menu Item 3"></tpg-menu-item>
    </tpg-menu>
  </div>

Menu with nested submenus

Apply label to the nested menu with label attribute.

Component

Vanilla JS

  <div style="height: 240px;">
    <tpg-menu is-open>
      <tpg-menu-item label="Menu Item 1"> </tpg-menu-item>
      <tpg-menu-item label="Menu Item 2"></tpg-menu-item>
      <tpg-menu-item label="Menu Item 3"></tpg-menu-item>
      <tpg-menu label="Nested Menu">
          <tpg-menu-item label="Menu Item 1"></tpg-menu-item>
          <tpg-menu-item label="Menu Item 2"></tpg-menu-item>
          <tpg-menu-item label="Menu Item 3"></tpg-menu-item>
      </tpg-menu>
    </tpg-menu>
  </div>

React

  <div style={{height: "240px"}}>
    <tpg-menu isOpen>
      <tpg-menu-item label="Menu Item 1"> </tpg-menu-item>
      <tpg-menu-item label="Menu Item 2"></tpg-menu-item>
      <tpg-menu-item label="Menu Item 3"></tpg-menu-item>
      <tpg-menu label="Nested Menu">
          <tpg-menu-item label="Menu Item 1"></tpg-menu-item>
          <tpg-menu-item label="Menu Item 2"></tpg-menu-item>
          <tpg-menu-item label="Menu Item 3"></tpg-menu-item>
      </tpg-menu>
    </tpg-menu>
  </div>

Anchoring the menu

Assigning a HTMLElement to the Menu’s anchor variable will automatically anchor the menu to that element. It positions itself automatically depending on available space, either below or above the anchor element.

You will still have to manually handle opening/closing of the menu.

Keyboard navigation works as normal here, but you will manually need to give the menu focus. The quickest way of doing this is this: menuChildren[0]?.focus()

Component

Vanilla JS

      <tpg-primary-button label="Menu anchor 1"></tpg-primary-button>
      <tpg-primary-button label="Menu anchor 2"></tpg-primary-button>
      <tpg-primary-button label="Menu anchor 3"></tpg-primary-button>
      <tpg-primary-button label="Menu anchor 4"></tpg-primary-button>

      <tpg-menu id="anchored-menu">
          <tpg-menu-item label="Menu Item 1"></tpg-menu-item>
          <tpg-menu-item label="Menu Item 2"></tpg-menu-item>
          <tpg-menu-item label="Menu Item 3"></tpg-menu-item>
          <tpg-menu label="Nested Menu">
              <tpg-menu-item label="Menu Item 1"></tpg-menu-item>
              <tpg-menu-item label="Menu Item 2"></tpg-menu-item>
              <tpg-menu-item label="Menu Item 3"></tpg-menu-item>
          </tpg-menu>
      </tpg-menu>

      <script>
          const buttons = document.querySelectorAll('tpg-primary-button');
          const anchoredMenu = document.getElementById('anchored-menu')
          for (const btn of buttons) {
              btn.addEventListener("tpg-click", (e) => {
                  anchoredMenu.anchor = e.target;
                  anchoredMenu.isOpen = !anchoredMenu.isOpen;
              });
          }
      </script>

React

  import {
    Menu,
    PrimaryButton,
    TpgClickEvent,
  } from "@tpg/grammar-web";

  const menuRef = useRef<Menu>(null);

  const clickHandler = (e: TpgClickEvent) => {
    const btn = e.target as PrimaryButton;
    const anchoredMenu = menuRef.current!;
    anchoredMenu.anchor = btn;
    anchoredMenu.isOpen = !anchoredMenu.isOpen;
  };

  ...

  <tpg-menu ref={menuRef}>
    <tpg-menu-item label="Menu Item 1"></tpg-menu-item>
    <tpg-menu-item label="Menu Item 2"></tpg-menu-item>
    <tpg-menu-item label="Menu Item 3"></tpg-menu-item>
    <tpg-menu label="Nested Menu">
      <tpg-menu-item label="Menu Item 1"></tpg-menu-item>
      <tpg-menu-item label="Menu Item 2"></tpg-menu-item>
      <tpg-menu-item label="Menu Item 3"></tpg-menu-item>
    </tpg-menu>
  </tpg-menu>

  <tpg-primary-button
    label="Menu anchor 1"
    ontpg-click={clickHandler}
  ></tpg-primary-button>
  <tpg-primary-button
    label="Menu anchor 2"
    ontpg-click={clickHandler}
  ></tpg-primary-button>
  <tpg-primary-button
    label="Menu anchor 3"
    ontpg-click={clickHandler}
  ></tpg-primary-button>
  <tpg-primary-button
    label="Menu anchor 4"
    ontpg-click={clickHandler}
  ></tpg-primary-button>

Tables

Properties

Attribute	Property	Description	Type	Default Value
label	label	The label for the menu. Only applicable on nested menus.	string	''
is-open	isOpen	Determines if the menu is open.	boolean	false

Events

Event name	Reactjs attribute	Description
tpg-select	ontpg-select	Propagated event that fires from `tpg-menu-item`, containing the value identifier of the selected item.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
	The items that are to be slotted into the menu. See examples for 'supported' items.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox