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

Top level Menu-Item

To add a custom menu item as the sub header pass in slot="sub-item" in the first triton-menu-item. This will replace the default menu item with your custom triton-menu-item.

If [routerLink] in Angular is used, then follow this approach for sub menu

<triton-menu>
<triton-menu-item>Menu Item 1</triton-menu-item>
<triton-sub-menu>
<triton-menu-item slot="sub-item">Sub label</triton-menu-item>
<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

TritonMenu

PropertyDescriptionTypeDefault
accordionif true all sub menus will render as a downwards accordion, if false it will render as overlay not implemented yetbooleantrue
collapsibleif true and a sub menu is present all items will be collapsiblebooleantrue
force-sub-menu-renderNot implemented yetany-
modeNot implemented yetany-
sizeSet the size of the entire menu.base body large medium small tiny xlarge xxlarge xxxlarge'body'

TritonMenuItem

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-
ellipsisIf true the menu item will add ellipsis if the text value is wider than the current block, false will add clipbooleantrue
iconIcon to the left of label andor descriptionIcon-
icon-leadinguse icon insted. Display icon on the left side of the component DeprecationIcon-
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 xxxlarge'body'

TritonSubMenu

PropertyDescriptionTypeDefault
accordionif true the sub menu will render as a downwards accordion, if false it will render as overlay not implemented yetbooleantrue
collapsibleif true the content of sub menu will always visiblebooleantrue
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-
labelTo level label of the sub menu.string-
openIf true the sub menu will be open as defaultbooleanfalse
titleUse label insted, this property will be removed in version 3.0.0 Deprecationstring-

Events

Main Component

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

TritonMenuItem

NameTypeDescriptionExtra
selectedItemContentCustomEvent<MouseEvent>Emitted when the content of the menu item is selected-

Slots

Main

can only be menu item

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

Details

Used in