Sidebar

Published on February 15, 2021, updated on June 01, 2021

Element: <ins-sidebar>

Renders container for sidebar items.

Complete Example

Code Snippet

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

Default State

Code Snippet

<ins-sidebar></ins-sidebar>

Direct Set Data

Code Snippet

<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

Code Snippet

<ins-sidebar
  full-logo="/assets/images/Insites_logo.svg"
  icon-logo="/assets/images/Insites_logo_icon.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

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.