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>
Behavior
Placement
There are several options for where to place the dropdown relative to its associated element.
Note that the dropdown will only render in a given direction if there is enough space to render it. If not it will display in the opposite orientation.
Use the placement property to first determine the direction the dropdown will be placed, and then use the postfix to determine the starting point from which it renders.
E.g. topLeft will pop up on the top of the element (if there is room), and render from left to right.
<triton-dropdown trigger="click" btnTitle="top" placement="top">
<triton-menu>
<triton-menu-item>Menu item 1</triton-menu-item>
<triton-menu-item>Menu item 2</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 | - |
max-height | Set the max height of the dropdown item | number string | - |
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
the content of the dropdown, takes any kind of markup
<triton-dropdown>
<div></div>
</triton-dropdown>
trigger
Any element, will replace the TritonButton from which the dropdown opens
<triton-dropdown>
<div slot="trigger"></div>
</triton-dropdown>