> ## Documentation Index
> Fetch the complete documentation index at: https://docs.saasio.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Sidebar Element

> Learn how to create a responsive, collapsible navigation sidebar with custom headers, footers, and a flexible content structure.

***

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.

#### Header and Footer

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.

<Tabs>
  <Tab title="The `item` Object">
    An `item` object creates a single navigation link.

    **Type Definition (JSON):**

    ```json theme={null}
    {
      "item": {
        "title": "string",
        "url": "string",
        "iconName": "string (optional, Lucide Icon)",
        "openInNewTab": "boolean (optional)",
        "iconStyle": { "key": "value" }
      }
    }
    ```

    **Schema Breakdown:**

    <ParamField path="item.title" type="string" required>
      The text label that will be displayed for the link.
    </ParamField>

    <ParamField path="item.url" type="string" required>
      The URL that the user will be navigated to on click.
    </ParamField>

    <ParamField path="item.iconName" type="string">
      The name of an icon from the **[Lucide React](https://lucide.dev/icons/)**
      library to display next to the title.
    </ParamField>

    <ParamField path="item.openInNewTab" type="boolean">
      If set to `true`, the link will open in a new browser tab.
    </ParamField>

    <ParamField path="item.iconStyle" type="object">
      A style object to apply custom CSS to the icon.
    </ParamField>
  </Tab>

  <Tab title="The `group` Object">
    A `group` object creates a collapsible section with a label and nested links.

    **Type Definition (JSON):**

    ```json theme={null}
    {
      "group": {
        "label": "string",
        "iconName": "string (optional, Lucide Icon)",
        "defaultOpen": "boolean (optional)",
        "iconStyle": { "key": "value" },
        "items": [{ "title": "string", "url": "string", "iconName": "string" }],
        "subItems": [{ "title": "string", "url": "string" }]
      }
    }
    ```

    **Schema Breakdown:**

    <ParamField path="group.label" type="string" required>
      The text label for the group header.
    </ParamField>

    <ParamField path="group.iconName" type="string">
      The name of a **Lucide React** icon to display next to the group label.
    </ParamField>

    <ParamField path="group.defaultOpen" type="boolean">
      If set to `true`, the group will be expanded by default when the sidebar
      loads.
    </ParamField>

    <ParamField path="group.items" type="array of `item` objects">
      An array of `item` objects that can each have their own icons. These are
      displayed directly under the group label.
    </ParamField>

    <ParamField path="group.subItems" type="array of `item` objects">
      An array of `item` objects that are displayed as a simpler, nested list under
      the main `items`. These typically do not have icons.
    </ParamField>

    <ParamField path="group.iconStyle" type="object">
      A style object to apply custom CSS to the group's icon.
    </ParamField>
  </Tab>

  <Tab title="The `separator` Object">
    A `separator` object creates a visual dividing line, useful for organizing sections.

    **Type Definition (JSON):**

    ```json theme={null}
    {
      "separator": {
        "enabled": true,
        "style": { "key": "value" }
      }
    }
    ```

    **Schema Breakdown:**

    <ParamField path="separator.enabled" type="boolean">
      Must be set to `true` to display the separator.
    </ParamField>

    <ParamField path="separator.style" type="object">
      A style object to apply custom CSS to the separator line.
    </ParamField>
  </Tab>
</Tabs>

### Complete Content Example

Here is an example of a valid JSON object for the **Content** property, demonstrating how these different object types work together.

```json theme={null}
[
  {
    "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"
        }
      ]
    }
  }
]
```