# Sidebar

<div align="center"><figure><img src="https://3046942752-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHfd391cB6wDC8S3yHcie%2Fuploads%2FE3LvpivW32wZZdOsPOtZ%2Fimage.png?alt=media&#x26;token=aec92d29-c988-4a0c-ac06-ea34a8949489" alt="" width="196"><figcaption></figcaption></figure></div>

The `sidebar` is a **vertical action menu** placed to the left or right of your UI layout. \
It supports nested submenus, icons, images, and dataset-driven interactivity.

***

## Structure

```lua
sidebar = {
    layout = { side = "right" }, -- or "left"
    sections = {
        {
            id = "test_1",
            label = "Sidebar Category",
            items = {
                {
                    id = "some_option",
                    label = "Some Option",
                    image = "assets/logos/bd_100.png",
                    action = "some_action"
                },
                {
                    id = "some_other_option",
                    label = "Some Other Option",
                    icon = "fas fa-box",
                    action = "some_other_action",
                    submenu = {
                        { id = "some_submenu_option_1", label = "Some Submenu Option", on_action = function(data) ... end },
                        { id = "some_submenu_option_2", label = "Some Other Submenu Option", on_action = function(data) ... end }
                    }
                }
            }
        }
    }
}
```

You can define multiple `sections` and group your interactions logically by category.

***

## Item Options

Each `section` contains a list of `items`. These support:

| Field     | Description                                         |
| --------- | --------------------------------------------------- |
| `id`      | Unique identifier used for click callbacks.         |
| `label`   | Text label shown in the sidebar.                    |
| `action`  | Action string sent to the client (Lua) for routing. |
| `icon`    | Font Awesome icon class.                            |
| `image`   | Local or web image path.                            |
| `submenu` | Optional array of sub-options, shown on click.      |

Submenu items are structured identically but don’t support icons or images.

***

## Layout

You can place the sidebar on either side:

```lua
layout = { side = "left" } -- or "right"
```

Internally, this maps to a `.sidebar.left` or `.sidebar.right` class with automatic CSS control.