Sidebar Footer Menu

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

Element: <ins-sidebar-footer>

Defines a sidebar footer menu.

Complete Example

Code Snippet

<ins-sidebar>

  <ins-sidebar-footer>

    <ins-sidebar-footer-menu 
      label="Settings">
    </ins-sidebar-footer-menu>

  </ins-sidebar-footer>

</ins-sidebar>

Direct Data Source

Code Snippet

<ins-sidebar>

  <ins-sidebar-footer>

    <ins-sidebar-footer-menu 
      id="directDataSourceFooterMenu">

    </ins-sidebar-footer-menu>

  </ins-sidebar-footer>

</ins-sidebar>

<script>
  var directDataSourceFooterMenu = document.getElementById('directDataSourceFooterMenu')
  directDataSourceFooterMenu.addEventListener('didLoad', function(e){
    directDataSourceFooterMenu.icon = 'icon-logout-1';
    directDataSourceFooterMenu.label = 'Power';
  });
</script>

Static Data Source

Code Snippet

<ins-sidebar-footer>

  <ins-sidebar-footer-menu 
    icon="icon-dashboard" 
    label="Dashboard">
  </ins-sidebar-footer-menu>

</ins-sidebar-footer>

Sidebar Footer Item

Code Snippet

<ins-sidebar 
  with-sidebar-actions>

  <ins-sidebar-footer>

    <ins-sidebar-footer-menu 
      icon="icon-settings-1" 
      label="Settings">

      <ins-sidebar-item 
        link="/admin/settings/colour-themes" 
        label="Color Themes" 
        app>

      </ins-sidebar-item>

    </ins-sidebar-footer-menu>

  </ins-sidebar-footer>

</ins-sidebar>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
icon	string	"icon-settings-1"	icon-close-1, icon-utilities, icon-lock-1 ...	Defines icon of sidebar footer menu
label	string	"Settings"	any	Defines label of sidebar footer menu

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.