> For the complete documentation index, see [llms.txt](https://docs.reactium.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.reactium.io/reactium-toolkit/components/sidebar.md).

# Sidebar

The Sidebar component is accessible as a [**Reactium.Handle**](https://atomic-reactor.github.io/Reactium/#api-Reactium.Handle-Reactium.Handle) object. You can gain access to the Sidebar by doing the following:

```jsx
import React from 'react'; 
import Reactium, { useHandle } from 'reactium-core/sdk';

const SidebarToggleButton = () => {

    const Sidebar = useHandle('RTKSidebar');
    
    return (
        <button onClick={() => Sidebar.toggle()}>
            Toggle Sidebar
        </button>
    );
};
```

## Properties

| Property      | Type      | Description                        |
| ------------- | --------- | ---------------------------------- |
| **collapsed** | `Boolean` | The collapsed state of the Sidebar |
| **expanded**  | `Boolean` | The expanded state of the Sidebar  |

## Methods

### collapse()

Collapse the Sidebar if it is expanded. The `collapse` and `collapsed` events are triggered. \
Returns a Promise that resolves when the collapse animation is complete.

```jsx
import React, { useEffect } from 'react'; 
import Reactium, { useHandle } from 'reactium-core/sdk';

const SidebarCollapseButton = () => {

    const Sidebar = useHandle('RTKSidebar');
    
    useEffect(() => {
        Sidebar.addEventListener('collapse', console.log);
        Sidebar.addEventListener('collapsed', console.log);

        return () => {
            Sidebar.removeEventListener('collapse', console.log);
            Sidebar.removeEventListener('collapsed', console.log);
        };
    }, [Sidebar]);
    
    return (
        <button onClick={() => Sidebar.collapse()}>
            Collapse Sidebar
        </button>
    );
};
```

### expand()

Expand the Sidebar if it is collapsed. The `expand` and `expanded` events are triggered. \
Returns a Promise that resolves when the expand animation is complete.&#x20;

```jsx
import React, { useEffect } from 'react'; 
import Reactium, { useHandle } from 'reactium-core/sdk';

const SidebarExpandButton = () => {

    const Sidebar = useHandle('RTKSidebar');
    
    useEffect(() => {
        Sidebar.addEventListener('expand', console.log);
        Sidebar.addEventListener('expanded', console.log);

        return () => {
            Sidebar.removeEventListener('expand', console.log);
            Sidebar.removeEventListener('expanded', console.log);
        };
    }, [Sidebar]);
    
    return (
        <button onClick={() => Sidebar.expand()}>
            Expand Sidebar
        </button>
    );
};
```

## Events

### collapse

Triggered when the collapse animation starts as a side effect of `collapse()` or `toggle()`

### collapsed

Triggered when the collapse animation is completed as a side effect of `collapse()` or `toggle()`&#x20;

### expand

Triggered when the expand animation starts as a side effect `expand()` or `toggle()`

### expanded

Triggered when the expand animation is completed as a  side effect of `collapse()` or `toggle()`

### resize

Triggered during the expand/collapse animation. The current width of the sidebar is provided as  a property on the event.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.reactium.io/reactium-toolkit/components/sidebar.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.