Sidebar Item

Last updated on August 02, 2024.

Element: <ins-sidebar-item>

Defines a sidebar item.

Complete Example

Main Menu

Sub Menu

Parent Menu

Code Snippet

<ins-sidebar>
  <ins-sidebar-item
    link="/assets/pages/styleguide/buttons.html"
    icon="icon-buttons"
    label="Buttons" app>
  </ins-sidebar-item>
</ins-sidebar>

Default State

Code Snippet

<ins-sidebar>

  <ins-sidebar-item></ins-sidebar-item>

</ins-sidebar>

Static Data Source

Code Snippet

<ins-sidebar>

  <ins-sidebar-item 
    icon="icon-settings-1" 
    label="Settings" app>
  </ins-sidebar-item>

</ins-sidebar>

Direct Data Source

Code Snippet

<ins-sidebar>

   <ins-sidebar-item 
      id="sidebarItemID">
   </ins-sidebar-item>

</ins-sidebar>

<script>
  var sidebarItemID = document.getElementById('sidebarItemID');
  sidebarItemID.addEventListener('didLoad', function(e){
    sidebarItemID.icon = "icon-dashboard";
    sidebarItemID.label = "Dashboard";
  });
</script>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
link	any	""	any	Defines link of sidebar item
footer-link	string	""	any	N/A
icon	any	"no-icon"	icon-close-1, icon-utilities, icon-lock-1 ...	Defines icon of sidebar item
app	boolean	false	true, false	Renders iframe
with-submenu	boolean	false	true, false	Renders submenu for sidebar item
label	string	Label	any	Defines label for sidebar item
landing-page	boolean	false	true, false	N/A

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.