Skip to main content
2.0.10Next5.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: 2.0.10

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>

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-
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-
atClickCustomEvent<void>The default click behavior of the button-

Slots

Main

trigger - Any element, will replace the TritonButton

<triton-dropdown>
<div></div>
</triton-dropdown>

Details

Depends on

Used in