# Sidebar

<div align="center"><figure><img src="/files/SUGg9RCdrvNURbbfT8v3" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.boii.dev/fivem-free-resources/bduk/core-ui/sidebar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.