Design system
Sidebar
Last updated 15 January 2026
The Insites Sidebar is exactly as said. It's a Menu flexible for your use, but placed on the side of your dasboard, as compared to a regular menu at the top of the page.
Requirements
To use these components in Figma, install the latest Insites font icons.
- Download the Insites icon font.
- Install the font file on your computer.
- Restart Figma so the font shows in your font list.
To change an icon, copy it from the font icons list and paste it into the icon layer of the component.
Figma Component Variant Properties
Sidebar
| Properties | Options | Notes |
|---|---|---|
| Collapsed | True, False | Toggle to use the collapsed and full state of the sidebar component. |
Sidebar Items
| Properties | Options | Notes |
|---|---|---|
| Collapsed | True, False | Toggle to use collapsed or full state of the sidebar item component. |
| Active | True, False | Toggle to use the default or active state of the sidebar item component. |
| Hover | True, False | Toggle to use the default or hover state of the sidebar item component. |
| Label Icon | True, False | Toggle to display or hide the icon for the sidebar item component. |
| Submenu | True, False | Toggle to display the icon that indicates there is a submenu for the sidebar item component. |
Footer Buttons
| Properties | Options | Notes |
|---|---|---|
| Hover | True, False | Toggle to use the default or hover state of the footer buttons component. |