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>
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.
<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
TritonMenu
| Property | Description | Type | Default |
|---|---|---|---|
accordion | if true all sub menus will render as a downwards accordion, if false it will render as overlay not implemented yet | boolean | true |
collapsible | if true and a sub menu is present all items will be collapsible | boolean | true |
force-sub-menu-render | Not implemented yet | any | - |
mode | Not implemented yet | any | - |
size | Set the size of the entire menu. | base body large medium small tiny xlarge xxlarge xxxlarge | 'body' |
TritonMenuItem
| 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 | - |
ellipsis | If true the menu item will add ellipsis if the text value is wider than the current block, false will add clip | boolean | true |
icon | Icon to the left of label andor description | Icon | - |
icon-leading | 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 | 'body' |
TritonSubMenu
| Property | Description | Type | Default |
|---|---|---|---|
accordion | if true the sub menu will render as a downwards accordion, if false it will render as overlay not implemented yet | boolean | true |
collapsible | if true the content of sub menu will always visible | boolean | true |
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 | - |
label | To level label of the sub menu. | string | - |
open | If true the sub menu will be open as default | boolean | false |
title | string | - |
Events
Main Component
| Name | Type | Description | Extra |
|---|---|---|---|
| atSelect | CustomEvent<string> | Emit when the key prop changes | - |
TritonMenuItem
| Name | Type | Description | Extra |
|---|---|---|---|
| selectedItemContent | CustomEvent<MouseEvent> | Emitted when the content of the menu item is selected | - |
Slots
Main
can only be menu item
<triton-menu>
<div></div>
</triton-menu>