Skip to main content
5.0.1Next5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 5.0.1

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>
Menu item 1Menu item 2Menu item 3

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

Menu item 1Menu item 2Menu item 3
<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.

Menu item 1Menu item 2Menu item 1Menu item 2Menu item 1Menu item 2
Menu item 1Menu item 2Menu item 1Menu item 2Menu item 1Menu item 2
Menu item 1Menu item 2Menu item 1Menu item 2Menu item 1Menu item 2
Menu item 1Menu item 2Menu item 1Menu item 2Menu item 1Menu item 2
<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.

Menu item 1Menu item 2Menu item 3
<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.

Menu item 1Menu item 2Menu item 3
<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.

Menu item 1Menu item 2Menu item 3
<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

PropertyDescriptionTypeDefault
btn-icon-leadingSet the icon at the left of the button which opens the dropdownIcon-
btn-icon-trailingSet the icon at the right of the button which opens the dropdownIcon-
btn-skinSet the skin of the componentalarm critical flat information neutral primary secondary success warning-
btn-stylebutton style null will render fill version of the button. Internal will be removed in the next major releasefill flat outline'fill'
btn-titleSet the title with which we trigger the dropdownstring-
disabledIf true the dropdown will be disabledboolean-
max-heightSet the max height of the dropdown itemnumber string-
placementSet the position the dropdown will open in, relative to the context elementbottom bottomLeft bottomRight left leftBottom leftTop right rightBottom rightTop top topLeft topRight'bottomLeft'
sizeSet the size of the componentbase large small'base'
triggerSet the kind of user interaction will trigger the dropdownIf context is set, the Dropdown will not render a buttonclick context hover'click'
visibleThe visible state of the dropdown contentboolean-

Events

NameTypeDescriptionExtra
atDropdownStateChangeCustomEvent<boolean>Emit boolean when state of the dropdown change-

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>

Details

Depends on

Used in