Skip to main content
Docs
Components
Foundation
3.0.1Next5.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: 3.0.1

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