Skip to main content
The Sidebar element provides a powerful, out-of-the-box solution for creating the main navigation menu for your application. It supports collapsible groups, icons, separators, and custom components for its header and footer sections.

​
How to Add a Sidebar

To add a Sidebar, find it in the “Elements” panel and drag it onto your page. It’s typically placed on the left side and set to fill the full height of the viewport.

​
Configuration

All configuration for the sidebar is handled in the Custom section of the right-side properties panel. You can add a custom header or footer to your sidebar, which is perfect for displaying a logo, a user profile, or action buttons.
  • Header Component: Select a component you have already created to render at the top of the sidebar.
  • Footer Component: Select a component you have already created to render at the bottom of the sidebar.

​
Sidebar Content

This is the core of your sidebar. The Content property accepts an array of objects that defines the links, groups, and separators that make up your navigation. There are three types of objects you can add to this array:
  1. Item: A single, clickable navigation link.
  2. Group: A collapsible section that contains other items.
  3. Separator: A visual dividing line.
An item object creates a single navigation link.Type Definition (JSON):
{
  "item": {
    "title": "string",
    "url": "string",
    "iconName": "string (optional, Lucide Icon)",
    "openInNewTab": "boolean (optional)",
    "iconStyle": { "key": "value" }
  }
}
Schema Breakdown:
​
item.title
string
required
The text label that will be displayed for the link.
​
item.url
string
required
The URL that the user will be navigated to on click.
​
item.iconName
string
The name of an icon from the Lucide React library to display next to the title.
​
item.openInNewTab
boolean
If set to true, the link will open in a new browser tab.
​
item.iconStyle
object
A style object to apply custom CSS to the icon.

​
Complete Content Example

Here is an example of a valid JSON object for the Content property, demonstrating how these different object types work together. 
[
  {
    "item": {
      "title": "Home",
      "url": "#",
      "iconName": "Home"
    }
  },
  {
    "item": {
      "title": "Users",
      "url": "#",
      "iconName": "User"
    }
  },
  {
    "separator": { "enabled": true }
  },
  {
    "group": {
      "label": "Dashboard",
      "defaultOpen": true,
      "iconName": "LayoutDashboard",
      "subItems": [
        { "title": "Analytics", "url": "#" },
        { "title": "Reports", "url": "#" }
      ]
    }
  },
  {
    "group": {
      "label": "Management",
      "iconName": "Settings",
      "items": [
        {
          "title": "Products",
          "url": "#",
          "iconName": "Box"
        },
        {
          "title": "Orders",
          "url": "#",
          "iconName": "ShoppingCart"
        }
      ]
    }
  }
]