Drilldown Menu

<tpg-drilldown-menu></tpg-drilldown-menu>

DrilldownMenus are one of the dropdown Menu types used by Combo Boxes. In Grammar Web, this is implemented as a separate combo box component. They convert a series of nested lists into a vertical drilldown menu. They should always have a dedicated Section Header.

They forward navigate from right to left and can be navigated backwards by the “Back” button on their header. The button will always display the name of the parent category.

Examples

Basic

Component

You can use the placeholder attribute to set a placeholder text. You can also use type and message properties for setting badge and textfield variant.

Vanilla JS

<tpg-drilldown-menu placeholder="Placeholder text">
  <tpg-menu-item class="has-placeholder-icon" label="Dashboard" value="dashboard">
    <tpg-menu-item label="Home" value="home" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Theme" value="theme" class="has-placeholder-icon"></tpg-menu-item>
  </tpg-menu-item>

  <tpg-menu-item class="has-placeholder-icon" label="Tickets" value="tickets">
    <tpg-menu-item label="Ticket 1" value="ticket_1" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Ticket 2" value="ticket_2" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Ticket 3" value="ticket_3" class="has-placeholder-icon"></tpg-menu-item>
  </tpg-menu-item>

  <tpg-menu-item class="has-placeholder-icon" label="Settings" value="settings">
    <tpg-menu-item label="Audio" value="audio"></tpg-menu-item>
    <tpg-menu-item label="Graphics" value="graphics"></tpg-menu-item>
    <tpg-menu-item label="Language" value="language"></tpg-menu-item>
    <tpg-menu-item label="Quit game" value="quit"></tpg-menu-item>
  </tpg-menu-item>
</tpg-drilldown-menu>

<tpg-drilldown-menu type="danger"/>
<tpg-drilldown-menu type="error" message="Yee haw"/>

<script>
    document.addEventListener('DOMContentLoaded', ()=>{
        // Adds placeholder icons onto drilldown menu and menu items with relevant class applied
        const menuItems = document.querySelectorAll('tpg-menu-item.has-placeholder-icon');

        for (const menuItem of menuItems) {
            menuItem.leadingIconTemplate = tpgIconPlaceholderCustom; // api is same for all non-icon elements
        }
    });
</script>

React

  <tpg-drilldown-menu placeholder="Placeholder text" leadingIconTemplate={tpgIconPlaceholderCustom}>
    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Dashboard" value="dashboard">
      <tpg-menu-item label="Home" value="home" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Theme" value="theme" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
    </tpg-menu-item>

    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Tickets" value="tickets">
      <tpg-menu-item label="Ticket 1" value="ticket_1" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Ticket 2" value="ticket_2" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Ticket 3" value="ticket_3" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
    </tpg-menu-item>

    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Settings" value="settings">
      <tpg-menu-item label="Audio" value="audio"></tpg-menu-item>
      <tpg-menu-item label="Graphics" value="graphics"></tpg-menu-item>
      <tpg-menu-item label="Language" value="language"></tpg-menu-item>
      <tpg-menu-item label="Quit game" value="quit"></tpg-menu-item>
    </tpg-menu-item>
  </tpg-drilldown-menu>

  <tpg-drilldown-menu type="danger"/>
  <tpg-drilldown-menu type="error" message="Yee haw"/>

Default value

Component

Use the selectedValue property to set a default selected value.

Vanilla JS

<tpg-drilldown-menu selected-value="ticket_2" placeholder="Placeholder text">
  <tpg-menu-item class="has-placeholder-icon" label="Dashboard" value="dashboard">
    <tpg-menu-item label="Home" value="home" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Theme" value="theme" class="has-placeholder-icon"></tpg-menu-item>
  </tpg-menu-item>

  <tpg-menu-item class="has-placeholder-icon" label="Tickets" value="tickets">
    <tpg-menu-item label="Ticket 1" value="ticket_1" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Ticket 2" value="ticket_2" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Ticket 3" value="ticket_3" class="has-placeholder-icon"></tpg-menu-item>
  </tpg-menu-item>

  <tpg-menu-item class="has-placeholder-icon" label="Settings" value="settings">
    <tpg-menu-item label="Audio" value="audio"></tpg-menu-item>
    <tpg-menu-item label="Graphics" value="graphics"></tpg-menu-item>
    <tpg-menu-item label="Language" value="language"></tpg-menu-item>
    <tpg-menu-item label="Quit game" value="quit"></tpg-menu-item>
  </tpg-menu-item>
</tpg-drilldown-menu>

<script>
    document.addEventListener('DOMContentLoaded', ()=>{
        // Adds placeholder icons onto drilldown menu and menu items with relevant class applied
        const menuItems = document.querySelectorAll('tpg-menu-item.has-placeholder-icon');

        for (const menuItem of menuItems) {
            menuItem.leadingIconTemplate = tpgIconPlaceholderCustom; // api is same for all non-icon elements
        }
    });
</script>

React

  <tpg-drilldown-menu selectedValue="ticket_2" placeholder="Placeholder text" leadingIconTemplate={tpgIconPlaceholderCustom}>
    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Dashboard" value="dashboard">
      <tpg-menu-item label="Home" value="home" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Theme" value="theme" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
    </tpg-menu-item>

    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Tickets" value="tickets">
      <tpg-menu-item label="Ticket 1" value="ticket_1" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Ticket 2" value="ticket_2" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Ticket 3" value="ticket_3" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
    </tpg-menu-item>

    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Settings" value="settings">
      <tpg-menu-item label="Audio" value="audio"></tpg-menu-item>
      <tpg-menu-item label="Graphics" value="graphics"></tpg-menu-item>
      <tpg-menu-item label="Language" value="language"></tpg-menu-item>
      <tpg-menu-item label="Quit game" value="quit"></tpg-menu-item>
    </tpg-menu-item>
  </tpg-drilldown-menu>

Full width

Component

Use the fullWidth property to make the menu items scale to the width of the textfield (will exceed width if menu item is larger than the textfield).

Vanilla JS

<tpg-drilldown-menu full-width>
  <tpg-menu-item class="has-placeholder-icon" label="Dashboard" value="dashboard">
    <tpg-menu-item label="Home" value="home" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Theme" value="theme" class="has-placeholder-icon"></tpg-menu-item>
  </tpg-menu-item>

  <tpg-menu-item class="has-placeholder-icon" label="Tickets" value="tickets">
    <tpg-menu-item label="Ticket 1" value="ticket_1" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Ticket 2" value="ticket_2" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Ticket 3" value="ticket_3" class="has-placeholder-icon"></tpg-menu-item>
  </tpg-menu-item>

  <tpg-menu-item class="has-placeholder-icon" label="Settings" value="settings">
    <tpg-menu-item label="Audio" value="audio"></tpg-menu-item>
    <tpg-menu-item label="Graphics" value="graphics"></tpg-menu-item>
    <tpg-menu-item label="Language" value="language"></tpg-menu-item>
    <tpg-menu-item label="Quit game" value="quit"></tpg-menu-item>
  </tpg-menu-item>
</tpg-drilldown-menu>

<script>
    document.addEventListener('DOMContentLoaded', ()=>{
        // Adds placeholder icons onto drilldown menu and menu items with relevant class applied
        const menuItems = document.querySelectorAll('tpg-menu-item.has-placeholder-icon');

        for (const menuItem of menuItems) {
            menuItem.leadingIconTemplate = tpgIconPlaceholderCustom; // api is same for all non-icon elements
        }
    });
</script>

React

  <tpg-drilldown-menu fullWidth leadingIconTemplate={tpgIconPlaceholderCustom}>
    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Dashboard" value="dashboard">
      <tpg-menu-item label="Home" value="home" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Theme" value="theme" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
    </tpg-menu-item>

    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Tickets" value="tickets">
      <tpg-menu-item label="Ticket 1" value="ticket_1" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Ticket 2" value="ticket_2" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Ticket 3" value="ticket_3" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
    </tpg-menu-item>

    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Settings" value="settings">
      <tpg-menu-item label="Audio" value="audio"></tpg-menu-item>
      <tpg-menu-item label="Graphics" value="graphics"></tpg-menu-item>
      <tpg-menu-item label="Language" value="language"></tpg-menu-item>
      <tpg-menu-item label="Quit game" value="quit"></tpg-menu-item>
    </tpg-menu-item>
  </tpg-drilldown-menu>

Confirm button

Component

Use the enableFooter property to render a button in the dropdown footer that emits the value of the current level/group you are in.

Vanilla JS

<tpg-drilldown-menu full-width enable-footer>
  <tpg-menu-item class="has-placeholder-icon" label="Dashboard" value="dashboard">
    <tpg-menu-item label="Home" value="home" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Theme" value="theme" class="has-placeholder-icon"></tpg-menu-item>
  </tpg-menu-item>

  <tpg-menu-item class="has-placeholder-icon" label="Tickets" value="tickets">
    <tpg-menu-item label="Ticket 1" value="ticket_1" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Ticket 2" value="ticket_2" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Ticket 3" value="ticket_3" class="has-placeholder-icon"></tpg-menu-item>
  </tpg-menu-item>

  <tpg-menu-item class="has-placeholder-icon" label="Settings" value="settings">
    <tpg-menu-item label="Audio" value="audio"></tpg-menu-item>
    <tpg-menu-item label="Graphics" value="graphics"></tpg-menu-item>
    <tpg-menu-item label="Language" value="language"></tpg-menu-item>
    <tpg-menu-item label="Quit game" value="quit"></tpg-menu-item>
  </tpg-menu-item>
</tpg-drilldown-menu>

<script>
    document.addEventListener('DOMContentLoaded', ()=>{
        // Adds placeholder icons onto drilldown menu and menu items with relevant class applied
        const menuItems = document.querySelectorAll('tpg-menu-item.has-placeholder-icon');

        for (const menuItem of menuItems) {
            menuItem.leadingIconTemplate = tpgIconPlaceholderCustom; // api is same for all non-icon elements
        }

        // Get all menus and add event listeners to them
        const menus = document.querySelectorAll('tpg-drilldown-menu');
        for (const menu of menus) {
            menu.addEventListener("tpg-change", (e) => {
                e.target.selectedValue = e.value
                console.log("Selected:", e.value, "in ", e.target)
            });
        }
    });
</script>

React

  <tpg-drilldown-menu
    enableFooter
    fullWidth
    leadingIconTemplate={tpgIconPlaceholderCustom}
    ontpg-change={(e: TpgChangeEvent<string>) => {
      const drilldownMenu = e.target as DrilldownMenu;
      drilldownMenu.selectedValue = e.value ?? "";
    }}>
    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Dashboard" value="dashboard">
      <tpg-menu-item label="Home" value="home" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Theme" value="theme" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
    </tpg-menu-item>

    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Tickets" value="tickets">
      <tpg-menu-item label="Ticket 1" value="ticket_1" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Ticket 2" value="ticket_2" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Ticket 3" value="ticket_3" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
    </tpg-menu-item>

    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Settings" value="settings">
      <tpg-menu-item label="Audio" value="audio"></tpg-menu-item>
      <tpg-menu-item label="Graphics" value="graphics"></tpg-menu-item>
      <tpg-menu-item label="Language" value="language"></tpg-menu-item>
      <tpg-menu-item label="Quit game" value="quit"></tpg-menu-item>
    </tpg-menu-item>
  </tpg-drilldown-menu>

Event handling

The DrilldownMenu emits a TpgChangeEvent <string>when a menu item without children is clicked. If the enableFooter property is set to true, it will also emit the event when the Confirm button is pressed.

Component

Use the enableFooter property to render a button in the dropdown footer that emits the value of the current level/group you are in.

Vanilla JS

<tpg-drilldown-menu full-width enable-footer>
  <tpg-menu-item class="has-placeholder-icon" label="Dashboard" value="dashboard">
    <tpg-menu-item label="Home" value="home" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Theme" value="theme" class="has-placeholder-icon"></tpg-menu-item>
  </tpg-menu-item>

  <tpg-menu-item class="has-placeholder-icon" label="Tickets" value="tickets">
    <tpg-menu-item label="Ticket 1" value="ticket_1" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Ticket 2" value="ticket_2" class="has-placeholder-icon"></tpg-menu-item>
    <tpg-menu-item label="Ticket 3" value="ticket_3" class="has-placeholder-icon"></tpg-menu-item>
  </tpg-menu-item>

  <tpg-menu-item class="has-placeholder-icon" label="Settings" value="settings">
    <tpg-menu-item label="Audio" value="audio"></tpg-menu-item>
    <tpg-menu-item label="Graphics" value="graphics"></tpg-menu-item>
    <tpg-menu-item label="Language" value="language"></tpg-menu-item>
    <tpg-menu-item label="Quit game" value="quit"></tpg-menu-item>
  </tpg-menu-item>
</tpg-drilldown-menu>

<script>
    document.addEventListener('DOMContentLoaded', ()=>{
        // Adds placeholder icons onto drilldown menu and menu items with relevant class applied
        const menuItems = document.querySelectorAll('tpg-menu-item.has-placeholder-icon');

        for (const menuItem of menuItems) {
            menuItem.leadingIconTemplate = tpgIconPlaceholderCustom; // api is same for all non-icon elements
        }

        const menus = document.querySelectorAll('tpg-drilldown-menu');
        for (const menu of menus) {
            menu.addEventListener("tpg-change", (e) => {
                e.target.selectedValue = e.value
                console.log("Selected:", e.value, "in ", e.target)
            });
        }
    });
</script>

React

  <tpg-drilldown-menu enableFooter fullWidth leadingIconTemplate={tpgIconPlaceholderCustom}>
    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Dashboard" value="dashboard">
      <tpg-menu-item label="Home" value="home" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Theme" value="theme" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
    </tpg-menu-item>

    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Tickets" value="tickets">
      <tpg-menu-item label="Ticket 1" value="ticket_1" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Ticket 2" value="ticket_2" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
      <tpg-menu-item label="Ticket 3" value="ticket_3" leadingIconTemplate={tpgIconPlaceholderCustom}></tpg-menu-item>
    </tpg-menu-item>

    <tpg-menu-item leadingIconTemplate={tpgIconPlaceholderCustom} label="Settings" value="settings">
      <tpg-menu-item label="Audio" value="audio"></tpg-menu-item>
      <tpg-menu-item label="Graphics" value="graphics"></tpg-menu-item>
      <tpg-menu-item label="Language" value="language"></tpg-menu-item>
      <tpg-menu-item label="Quit game" value="quit"></tpg-menu-item>
    </tpg-menu-item>
  </tpg-drilldown-menu>

Tables

Properties

Attribute	Property	Description	Type	Default Value
placeholder	placeholder	Optional placeholder that is visible if value is empty	string	''
selected-value	selectedValue	Optional property to preselect a Drilldown Menu Item. Needs to correspond with a Menu Item's value.	string	''
leading-icon-template	leadingIconTemplate	URI-encoded SVG template for the button's icon. Supported constants are found in	IconConstant | ''	''
is-open	isOpen	Simple flag to keep track of whether or not the drilldown-menu is open/closed.	boolean	false
full-width	fullWidth	Flag that makes the drilldown menu scale to the width of the textfield if true.	boolean	false
enable-footer	enableFooter	Flag that enables the "Confirm" button at the bottom of the menu.	boolean	false
message	message	Message to appear on badge if set.	string	''
type	type	The type of textfield to render in terms of severity-level.	'default' | 'error' | 'warning' | 'danger'	'default'

Events

Event name	Reactjs attribute	Description
tpg-change	ontpg-change	Event emitted when item in drilldown menu is confirmed.

Functions

Name	Description	Arguments
openMenu	Opens the menu	No parameters
closeMenu	Closes the menu	No parameters

Slots

Name	Description
	default slot for drilldown menu

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox