Quaternary Menu Button
<tpg-quaternary-menu-button></tpg-quaternary-menu-button>The Quaternary Menu Button is essentially a menu with a quaternary toggle button as its anchor.
Quaternary Menu Buttons can elicit a list of drop-down choices from the user, the list can contain:
- Action Item - allows to execute a push action, after that the menu will close. Push actions can be structured in multiple submenu levels.
- Submenu Item - allows to open a new submenu level of Menu Items. Only one Submenu Item can be open at the same time in each level.
The Quaternary Menu Button works very much like Menu. Read more about Menu here.
The key difference is that the Quaternary Menu Button comes pre-anchored to a Quaternary Button Toggle, making it easier to implement out of the box — no additional setup is needed to attach the menu to its trigger.
Examples
Setting the label
Use the label attribute to set the label of the Quaternary Menu Button.
<tpg-quaternary-menu-button label="QMB">
<tpg-badge slot="counter-badge" type="accent" emphasis="high" label="10" size="xxs" ></tpg-badge>
<tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button> <tpg-quaternary-menu-button label="QMB">
<tpg-badge slot="counter-badge" type="accent" emphasis="high" label="10" size="xxs" ></tpg-badge>
<tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button>Disabling the button
You can disable the Quaternary Menu Button with the disabled attribute.
<tpg-quaternary-menu-button label="QMB" disabled> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button> <tpg-quaternary-menu-button label="QMB" disabled> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button>Size
You can control the Quaternary Menu Button’s size using the size attribute
<tpg-quaternary-menu-button label="QMB" size="regular"> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button>
<tpg-quaternary-menu-button label="QMB" size="small"> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button>
<tpg-quaternary-menu-button label="QMB" size="x-small"> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button> <tpg-quaternary-menu-button label="QMB" size="regular"> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button>
<tpg-quaternary-menu-button label="QMB" size="small"> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button>
<tpg-quaternary-menu-button label="QMB" size="x-small"> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button>Activated indicator
Use the activated attribute to show the activated indicator on the Quaternary Menu Button
<tpg-quaternary-menu-button label="QMB" activated> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button> <tpg-quaternary-menu-button label="QMB" activated> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button>Opening the menu
The Quaternary Menu Button is closed by default, opening upon being clicked (with the exception of when disabled).
You can control this behavior by using the is-open attribute.
<tpg-quaternary-menu-button label="QMB" is-open> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button> <tpg-quaternary-menu-button label="QMB" isOpen> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button>Icons
To set an icon, use the icon-template attribute in combination with your desired icon.
You can also control its position using the icon-position attribute, which allows for leading | trailing | top.
The icon will by default be in a leading position.
<tpg-quaternary-menu-button label="Leading Icon" icon-position="leading" class="has-placeholder-icon"> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item></tpg-quaternary-menu-button>
<tpg-quaternary-menu-button label="Trailing Icon" icon-position="trailing" class="has-placeholder-icon"> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item></tpg-quaternary-menu-button>
<tpg-quaternary-menu-button label="Top icon" icon-position="top" class="has-placeholder-icon"> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item></tpg-quaternary-menu-button>
<script> document.addEventListener('DOMContentLoaded', ()=>{ const menuButtons = document.querySelectorAll('tpg-quaternary-menu-button.has-placeholder-icon'); // Adds placeholder icons onto Quaternary Menu Buttons with relevant class applied for (const elem of menuButtons) { const quaternaryMenuButton = elem as QuaternaryMenuButton; // api is same for all non-icon elements quaternaryMenuButton.iconTemplate = tpgIconPlaceholderCustom; } });</script> <tpg-quaternary-menu-button label="Leading Icon" iconPosition="leading" iconTemplate={tpgIconPlaceholderCustom}> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button>
<tpg-quaternary-menu-button label="Trailing Icon" iconPosition="trailing" iconTemplate={tpgIconPlaceholderCustom}> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button>
<tpg-quaternary-menu-button label="Top icon" iconPosition="top" iconTemplate={tpgIconPlaceholderCustom}> <tpg-menu-item label="Item 1"> </tpg-menu-item>
<tpg-menu-item label="Item 2"> </tpg-menu-item>
<tpg-menu-item label="Item 3"> </tpg-menu-item> </tpg-quaternary-menu-button>Nesting menus
You can nest menus by inserting a tpg-menu and slotting tpg-menu-items into it.
There is no limit to how many menus you can nest, but it is generally recommended not to go deeper than one level.
<tpg-quaternary-menu-button label="QMB w/ Nested Menu"> <tpg-menu-item label="Item 1"></tpg-menu-item> <tpg-menu label="Nested menu"> <tpg-menu-item label="Nested Item 1"></tpg-menu-item> <tpg-menu-item label="Nested Item 2"></tpg-menu-item> <tpg-menu-item label="Nested Item 3"></tpg-menu-item> </tpg-menu> <tpg-menu-item label="Item 2"></tpg-menu-item> <tpg-menu label="Another nested menu"> <tpg-menu-item label="Nested Item 1"></tpg-menu-item> <tpg-menu-item label="Nested Item 2"></tpg-menu-item> <tpg-menu label="Nested menu inside nested menu"> <tpg-menu-item label="Nested Item 1"></tpg-menu-item> <tpg-menu-item label="Nested Item 2"></tpg-menu-item> <tpg-menu-item label="Nested Item 3"></tpg-menu-item> </tpg-menu> <tpg-menu-item label="Nested Item 3"></tpg-menu-item> </tpg-menu> <tpg-menu-item label="Item 3"></tpg-menu-item> </tpg-quaternary-menu-button> <tpg-quaternary-menu-button label="QMB w/ Nested Menu"> <tpg-menu-item label="Item 1"></tpg-menu-item> <tpg-menu label="Nested menu"> <tpg-menu-item label="Nested Item 1"></tpg-menu-item> <tpg-menu-item label="Nested Item 2"></tpg-menu-item> <tpg-menu-item label="Nested Item 3"></tpg-menu-item> </tpg-menu> <tpg-menu-item label="Item 2"></tpg-menu-item> <tpg-menu label="Another nested menu"> <tpg-menu-item label="Nested Item 1"></tpg-menu-item> <tpg-menu-item label="Nested Item 2"></tpg-menu-item> <tpg-menu label="Nested menu inside nested menu"> <tpg-menu-item label="Nested Item 1"></tpg-menu-item> <tpg-menu-item label="Nested Item 2"></tpg-menu-item> <tpg-menu-item label="Nested Item 3"></tpg-menu-item> </tpg-menu> <tpg-menu-item label="Nested Item 3"></tpg-menu-item> </tpg-menu> <tpg-menu-item label="Item 3"></tpg-menu-item> </tpg-quaternary-menu-button>Handling events
The Quaternary Menu Button dispatches a TpgSelectEvent when a Menu Item is clicked. See examples below
for how you can handle this event.
<tpg-quaternary-menu-button label="Select a value!" id="event-demo-1"> <tpg-menu-item label="Item 1"></tpg-menu-item> <tpg-menu-item label="Item 2"></tpg-menu-item> <tpg-menu-item label="Item 3"></tpg-menu-item> </tpg-quaternary-menu-button>
<script> const quaternaryMenuButton = document.getElementById("event-demo-1");
quaternaryMenuButton?.addEventListener("tpg-select", (e) => { alert("You've selected: " + e.value); }); </script> <tpg-quaternary-menu-button label="Select a value!" ontpg-select={(e: TpgSelectEvent) => { alert("You've selected: " + e.value); }}> <tpg-menu-item label="Item 1"></tpg-menu-item> <tpg-menu-item label="Item 2"></tpg-menu-item> <tpg-menu-item label="Item 3"></tpg-menu-item> </tpg-quaternary-menu-button>Tables
Properties
| Attribute | Property | Description | Type | Default Value |
|---|---|---|---|---|
| label | label | Textual label of the button. Overridden from Menu. | string | '' |
| disabled | disabled | Flag that disables the button, just like vanilla | boolean | false |
| icon-template | iconTemplate | URI-encoded SVG template for the button's icon. Supported constants are found in | IconConstant | '' | '' |
| icon-position | iconPosition | The positioning of the icon | 'leading' | 'trailing' | 'top' | 'leading' |
| size | size | The type property if defined will overide size. This is because quaternary button toggle differs from other buttons, and need special treatment | 'x-small' | 'small' | 'regular' | 'regular' |
| activated | activated | The activated state is used to display an activated_indicator at the bottom of the button. | boolean | false |
| 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 |
|---|---|
| Default slot allowing menus and menu items to be inserted. | |
| counter-badge | sets the counter-badge of the underlying quaternary button |
CSS Parts
| Attribute | Description |
|---|---|
| No CSS parts found. | |