# Reusable sidebar

## Overview

Reusable sidebar serves as a navigation bar in your application. The sidebar can be customized according to your requirements, and it saves its state across all the application pages so you don't have to add it to each page separately.

<figure><img src="/files/WTlEHtIGCayGMEMsE5BS" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="125.796875">Name</th><th width="121.09375">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>collapsed</code></td><td><code>boolean</code></td><td>Indicates if the component is collapsed</td></tr></tbody></table>

### Methods

<table><thead><tr><th width="106.12890625">Name</th><th width="126.49609375">Parameters</th><th width="102.13671875">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>expand</code></td><td>–</td><td><code>void</code></td><td>Expand the sidebar</td></tr><tr><td><code>collapse</code></td><td>–</td><td><code>void</code></td><td>Collapse the sidebar</td></tr><tr><td><code>toggle</code></td><td>–</td><td><code>void</code></td><td>Toggle the sidebar between expanded and collapsed</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="122.19921875">Name</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td><td></td></tr><tr><td><strong>On Expand</strong></td><td>Triggered when the component is expanded</td><td></td></tr><tr><td><strong>On Collapse</strong></td><td>Triggered when the component is collapsed</td><td></td></tr></tbody></table>

## Working with the component

To activate the sidebar in your application, access the *Settings* sidebar of the current page (click on the app area or select the page in the *Pages* tab), and select the **Show global app sidebar** checkbox.

You can configure sidebar content and appearance using the following *parameters*:

* **Expand content to fit** - select this option if you want your component (for example, *Menu*) to occupy all available space inside the sidebar (works with **single component only**).\
  Check out [this article](/concepts/components/work-with-components/expand-component-to-fill-screen-container.md) to learn more about the feature.
* **Sticky sidebar** - select this option to make sure the sidebar stays in the same place while users are scrolling down the page
* **Width -** in pixels
* **Background** color
* **Disable container styles** - select to disable all styles or specific ones if you want the sidebar to look more like part of the page and not a separate container

To configure sidebar navigation, you can simply drag and drop components inside it, for example, the *Menu* component. From there, you can configure additional[ in-app](/how-tos/layout-and-navigation/add-navigation-to-application.md#in-app-navigation) or [external](/how-tos/layout-and-navigation/add-navigation-to-application.md#external-navigation) navigation if needed.

{% @arcade/embed flowId="zD86AyBhpFd8DgB4cp6q" url="<https://app.arcade.software/share/zD86AyBhpFd8DgB4cp6q>" %}


---

# 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.uibakery.io/reference/working-with-components/reusable-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.