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>
Variants
Menu
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-itemis the lowest entry in the Menu hierarchy. Triton Menu components should NOT be put in the slot of atriton-menu-item.
<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>
Sub-Menu
A sub-menu can be added by wrapping menu items in a <triton-sub-menu> element, inside the menu.
<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.
<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.
<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
| Property | Description | Type | Default |
|---|---|---|---|
force-sub-menu-render | Not implemented yet | any | - |
mode | Not implemented yet | any | - |
triton-menu-divider
| Property | Description | Type | Default |
|---|
triton-menu-item
| Property | Description | Type | Default |
|---|---|---|---|
active | The state of the menu item, true indicates active | boolean | - |
description | A short description of the menu item that will render below the label. This prop will override the slot if both is used. | string | - |
disabled | If true, the component will look disabled and not be interactable.This indicates that the option cannot be chosen | boolean | - |
icon | Icon to the left of label andor description | Icon | - |
icon-leading | Display icon on the left side of the component | Icon | - |
icon-trailing | Display icon on the right side of the component | Icon | - |
indicator | If a css color is passed in, the menu item will render with a indicator on the left side of the menu item. | string | - |
label | The label of the menu item. This prop will override the slot if both is used. | string | - |
size | Set the size of the component.This property overrides the parent-menus size attribute | base body large medium small tiny xlarge xxlarge xxxlarge | defaultOptions.baseSize |
triton-sub-menu
| Property | Description | Type | Default |
|---|---|---|---|
title | string | - |
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| atSelect | CustomEvent<string> | Emit when the key prop changes | - |
Slots
Main
can only be menu item
<triton-menu>
<div></div>
</triton-menu>