Dropdown
The Dropdown component renders markup that drops down when the user interacts with an element. The most common usecase is to open a dropdown menu when a user clicks a button, or when the user hovers an element. Although displaying a TritonMenu will be the basic usecase, any markup may be rendered inside the Dropdown.
Basic Usage
<triton-dropdown trigger="click" btn-title="Dropdown">
<triton-menu>
<triton-menu-item>Menu item 1</triton-menu-item>
<triton-menu-item>Menu item 2</triton-menu-item>
<triton-menu-item>Menu item 3</triton-menu-item>
</triton-menu>
</triton-dropdown>
<TritonDropdown trigger="click" btnTitle="Dropdown">
<TritonMenu>
<TritonMenuItem>Menu item 1</TritonMenuItem>
<TritonMenuItem>Menu item 2</TritonMenuItem>
<TritonMenuItem>Menu item 3</TritonMenuItem>
</TritonMenu>
</TritonDropdown>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-dropdown trigger="click" btnTitle="Dropdown">
<triton-menu>
<triton-menu-item>Menu item 1</triton-menu-item>
<triton-menu-item>Menu item 2</triton-menu-item>
<triton-menu-item>Menu item 3</triton-menu-item>
</triton-menu>
</triton-dropdown>
</body>
</html>
Variants
Custom Context Menu
The TritonDropdown can also be used as a context menu.
You can see this dropdown by right clicking anywhere on screen
<triton-dropdown trigger="context">
<triton-menu>
<triton-menu-item>Menu item 1</triton-menu-item>
<triton-menu-item>Menu item 2</triton-menu-item>
<triton-menu-item>Menu item 3</triton-menu-item>
</triton-menu>
</triton-dropdown>
Appearance
Skin and Style
You can set the skin of the dropdown-button with the btn-skin property.
You can also set the style of the button with the btn-style property.
<triton-dropdown btn-style="outline" trigger="click" btn-skin="neutral" btn-title="Click for Dropdown">
<triton-menu>
<triton-menu-item>Menu item 1</triton-menu-item>
<triton-menu-item>Menu item 2</triton-menu-item>
<triton-menu-item>Menu item 3</triton-menu-item>
</triton-menu>
</triton-dropdown>
Icons
The dropdown button can have leading and trailing icons like any TritonButton.
<triton-dropdown trigger="click" btn-title="Button With Icons" btn-icon-leading="area-chart" btn-icon-trailing="cog">
<triton-menu>
<triton-menu-item>Menu item 1</triton-menu-item>
<triton-menu-item>Menu item 2</triton-menu-item>
<triton-menu-item>Menu item 3</triton-menu-item>
</triton-menu>
</triton-dropdown>
Plain Icon
The dropdown button can be styled to display only the icon, for instance by using the btn-style="flat", btn-skin="neutral" and one of the icon properties.
<triton-dropdown trigger="click" btnIcon-trailing="arrow_drop_down" btn-skin="neutral" btn-style="flat">
<triton-menu>
<triton-menu-item>Menu item 1</triton-menu-item>
<triton-menu-item>Menu item 2</triton-menu-item>
<triton-menu-item>Menu item 3</triton-menu-item>
</triton-menu>
</triton-dropdown>
Playground
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
btn-icon-leading | Set the icon at the left of the button which opens the dropdown | Icon | - |
btn-icon-trailing | Set the icon at the right of the button which opens the dropdown | Icon | - |
btn-skin | Set the skin of the component | alarm critical flat information neutral primary secondary success warning | - |
btn-style | button style null will render fill version of the button. Internal will be removed in the next major release | fill flat outline | 'fill' |
btn-title | Set the title with which we trigger the dropdown | string | - |
disabled | If true the dropdown will be disabled | boolean | - |
placement | Set the position the dropdown will open in, relative to the context element | bottom bottomLeft bottomRight left leftBottom leftTop right rightBottom rightTop top topLeft topRight | 'bottomLeft' |
size | Set the size of the component | base large small | 'base' |
trigger | Set the kind of user interaction will trigger the dropdownIf context is set, the Dropdown will not render a button | click context hover | 'click' |
visible | The visible state of the dropdown content | boolean | - |
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| atDropdownStateChange | CustomEvent<boolean> | Emit boolean when state of the dropdown change | - |
| atClick | CustomEvent<void> | The default click behavior of the button | - |
Slots
Main
trigger - Any element, will replace the TritonButton
<triton-dropdown>
<div></div>
</triton-dropdown>