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

CommonSidebar

Similar to Header, the Triton Common Sidebar is one of the page layout options provided in the common package in Triton. A sidebar displays content on the left side of a page. Sidebars are often used in conjunction with headers, to provide users access to navigation and functionality throughout the website.

Basic Usage

<triton-common-sidebar>
<triton-menu>
<triton-menu-item icon="alarm">Notification</triton-menu-item>
<triton-menu-item icon="cog">Settings</triton-menu-item>
<triton-menu-item icon="application">Applications</triton-menu-item>
</triton-menu>
</triton-common-sidebar>
<TritonCommonSidebar>
<TritonMenu>
<TritonMenuItem icon="alarm">Notification</TritonMenuItem>
<TritonMenuItem icon="cog">Settings</TritonMenuItem>
<TritonMenuItem icon="application">Applications</TritonMenuItem>
</TritonMenu>
</TritonCommonSidebar>
<html> 
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-common/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-common-sidebar>
<triton-menu>
<triton-menu-item icon="alarm">Notification</triton-menu-item>
<triton-menu-item icon="cog">Settings</triton-menu-item>
<triton-menu-item icon="application">Applications</triton-menu-item>
</triton-menu>
</triton-common-sidebar>
</body>
</html>
NotificationSettingsApplications

Behavior

Minimized

By setting the minimized property to true, the sidebar will show in a minimized version.

NotificationSettingsApplications
<triton-common-sidebar minimized='true'>
<triton-menu>
<triton-menu-item icon="alarm">Notification</triton-menu-item>
<triton-menu-item icon="cog">Settings</triton-menu-item>
<triton-menu-item icon="application">Applications</triton-menu-item>
</triton-menu>
</triton-common-sidebar>

The sidebar wrapps the Triton Menu, so it can use sub-menus as well.

Menu Item 1Menu Item 2Sub Menu Item 1Sub Menu Item 2Menu Item 3Sub Menu Item 1Sub-Sub Menu Item 1Sub-Sub Menu Item 2Sub Menu Item 2
<triton-common-sidebar>
<triton-menu>
<triton-menu-item>Menu Item 1</triton-menu-item>
<triton-menu-item>Menu Item 2</triton-menu-item>
<triton-sub-menu title="Sub menu one">
<triton-menu-item>Sub Menu Item 1</triton-menu-item>
<triton-menu-item>Sub Menu Item 2</triton-menu-item>
</triton-sub-menu>
<triton-menu-item>Menu Item 3</triton-menu-item>
<triton-sub-menu title="Sub menu two">
<triton-menu-item>Sub Menu Item 1</triton-menu-item>
<triton-sub-menu title="Sub menu two-one">
<triton-menu-item>Sub-Sub Menu Item 1</triton-menu-item>
<triton-menu-item>Sub-Sub Menu Item 2</triton-menu-item>
</triton-sub-menu>
<triton-menu-item>Sub Menu Item 2</triton-menu-item>
</triton-sub-menu>
</triton-menu>
</triton-common-sidebar>

Playground

API

Properties

PropertyDescriptionTypeDefault
minimizednot implementet yet Show the sidebar in minimized version only the logo will show and the header content will be available through a dropdownbooleantrue

Events

NameTypeDescriptionExtra
afterMaximizedCustomEvent<void>Emitted after sidebar has maximized-
afterMinimizedCustomEvent<void>Emitted after sidebar has minimized-