Skip to main content
2.0.0Next2.0.92.0.82.0.72.0.62.0.52.0.42.0.32.0.22.0.12.0.01.0.0
Version: 2.0.0

Menu

The Menu component displays a list of menu items in a strucutured way. The menu items are interactable. This component can be used when users have to select between several similar options. The most common example of this is for navigation.

Basic Usage

<triton-menu>
<triton-menu-item>Item One</triton-menu-item>
<triton-menu-item>Item Two</triton-menu-item>
</triton-menu>
<TritonMenu>
<TritonMenuItem>Item One</TritonMenuItem>
<TritonMenuItem>Item Two</TritonMenuItem>
</TritonMenu>
<html> 
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-menu>
<triton-menu-item>Item One</triton-menu-item>
<triton-menu-item>Item Two</triton-menu-item>
</triton-menu>
</body>
</html>
Item OneItem Two

Variants

To render a menu, wrap menu elements with <triton-menu>. This wrapper will apply style and prevent unwanted events from child conmponents to propagate outside the menu.

  <triton-menu>
...
</triton-menu>

Items

A TritonMenu usually consists of TritonMenuItem elements. These are the items which will be rendered in the menu. TritonMenuItems can be rendered in two different ways, either by simply passing in markup, or by using predefined props. If title or description properties are set, the content in the slot will be ignored.

Note triton-menu-item is the lowest entry in the Menu hierarchy. Triton Menu components should NOT be put in the slot of a triton-menu-item.
Menu Item 1Menu Item 2Menu Item 3
<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>

A sub-menu can be added by wrapping menu items in a <triton-sub-menu> element, inside the menu.

Menu Item 1Menu Item 2
<triton-menu>
<triton-menu-item>Menu Item 1</triton-menu-item>
<triton-sub-menu title="Sub menu One">
<triton-menu-item>Menu Item 2</triton-menu-item>
</triton-sub-menu>
</triton-menu>

Divider

A divider can be added to the menu to divide menu elements. To do this, use <triton-menu-divider> elements inside the menu.

Menu Item 1Menu Item 2
<triton-menu>
<triton-menu-item>Menu Item 1</triton-menu-item>
<triton-menu-divider></triton-menu-divider>
<triton-menu-item>Menu Item 2</triton-menu-item>
</triton-menu>

Appearance

Indicator

Emphasize a menu item by passing a CSS-color to the indicator property of a TritonMenuItem.

Menu Item With IndicatorNormal Menu ItemMenu Item With Indicator
<triton-menu>
<triton-menu-item indicator="#FFFF00">Menu Item With Indicator</triton-menu-item>
<triton-menu-item>Normal Menu Item</triton-menu-item>
<triton-menu-item indicator="#FF00FF">Menu Item With Indicator</triton-menu-item>
</triton-menu>

API

Properties

triton-menu

PropertyDescriptionTypeDefault
force-sub-menu-renderNot implemented yetany-
modeNot implemented yetany-

triton-menu-divider

PropertyDescriptionTypeDefault

triton-menu-item

PropertyDescriptionTypeDefault
activeThe state of the menu item, true indicates activeboolean-
descriptionA short description of the menu item that will render below the label. This prop will override the slot if both is used.string-
disabledIf true, the component will look disabled and not be interactable.This indicates that the option cannot be chosenboolean-
iconIcon to the left of label andor descriptionIcon-
icon-leadingDisplay icon on the left side of the componentIcon-
icon-trailingDisplay icon on the right side of the componentIcon-
indicatorIf a css color is passed in, the menu item will render with a indicator on the left side of the menu item.string-
labelThe label of the menu item. This prop will override the slot if both is used.string-
sizeSet the size of the component.This property overrides the parent-menus size attributebase body large medium small tiny xlarge xxlarge xxxlargedefaultOptions.baseSize

triton-sub-menu

PropertyDescriptionTypeDefault
titlestring-

Events

NameTypeDescriptionExtra
atSelectCustomEvent<string>Emit when the key prop changes-

Slots

Main

can only be menu item

<triton-menu>
<div></div>
</triton-menu>

Details

Used in