Sidebar

Published on February 04, 2021, updated on August 18, 2023

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 the buttons component in Figma please install the latest version of the Insites Font Icons.

Download the latest font file here.
Install the font file on your machine.
Restart Figma to load the file in your font list.

How to change icons in Figma

Open the icons list here.
Select and copy the icon you want to use from the list
Paste the icon into the icon layer in 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.

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.