Skip to content

Component library

Sidebar Footer Menu

Last updated 2 November 2026

Defines a sidebar footer menu.

Live demo

Open this demo full screen

<ins-sidebar>

  <ins-sidebar-footer>

    <ins-sidebar-footer-menu 
      label="Settings">
    </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

Examples

Direct Data Source

<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

<ins-sidebar-footer>

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

</ins-sidebar-footer>

Sidebar Footer Item

<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>