Component library

Sidebar component

Last updated 2 November 2026

Renders container for sidebar items.

Live demo

<ins-sidebar
  full-logo="https://files.prod01-insites.io/instances/302/assets/modules/website/images/logo.svg"
  icon-logo="https://files.prod01-insites.io/instances/302/assets/modules/website/images/ds/mark.df9f5dfe.svg">
</ins-sidebar>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
full-logo	string	Insites_logo	any	Defines icon of sidebar in full screen
icon-logo	string	insites_logo_icon	any	Defines icon of sidebar when sidebar is minimized

Examples

Default State

<ins-sidebar></ins-sidebar>

Direct Set Data

<ins-sidebar id="sidebarID"
  icon-logo="/assets/images/Insites_logo_icon.svg"
  class="style-guide">
</ins-sidebar>

<script>
  var logo = "/assets/images/Insites_logo.svg";
  var insSidebar = document.getElementById('sidebarID')
  insSidebar.addEventListener('didLoad', function(e){
    insSidebar.fullLogo = logo;
  });
</script>

Static Data Source

<ins-sidebar
  full-logo="/assets/images/Insites_logo.svg"
  icon-logo="/assets/images/Insites_logo_icon.svg">
</ins-sidebar>