# Sidebar Elements

Sidebar Elements are components added to the Toolkit Sidebar component. You can create new Sidebar Elements by registering components with the [Toolkit SDK](/reactium-toolkit/sdk.md).

![](/files/-MTMPYEWdNeCQRhoKIIf)

{% tabs %}
{% tab title="TL;DR" %}
We understand that adding elements to the Sidebar leaves a lot to consider. To lighten the load you can use the Reactium CLI (also known as ARCLI) to generate Sidebar navigation elements.

```bash
npx reactium toolkit sidebar
```

{% endtab %}

{% tab title="Prompts" %}

```bash
[ARCLI] > Type: Child Link
[ARCLI] > Parent ID: button
[ARCLI] > Link ID: button-colors
[ARCLI] > Label: Button Colors
[ARCLI] > URL?: Yes
[ARCLI] > Order: 100
[ARCLI] > Directory: /My Reactium Project/src/app/components/Toolkit/Sidebar

[ARCLI] > A new toolkit sidebar item will be created using the following configuration:

{
  "type": "link",
  "group": "button",
  "id": "button-colors",
  "label": "Button Colors",
  "url": "/toolkit/button/button-colors",
  "order": 100,
  "directory": "/My Reactium Project/src/app/components/Toolkit/Sidebar/Button/ButtonColors"
}

[ARCLI] > Proceed?: (y/N)
```

{% endtab %}
{% endtabs %}

## Sidebar Navigation

The Sidebar has a stylized navigation link called the [MenuLink](/reactium-toolkit/components/menu-link.md) which can be used in your project to render a Sidebar element. By default you can add either a [**Top-Level**](/reactium-toolkit/creating-elements/sidebar.md#top-level-link) Link or [**Child Link**](/reactium-toolkit/creating-elements/sidebar.md#child-link) via the [MenuLink](/reactium-toolkit/components/menu-link.md) component.

![](/files/-MTMQpZFu9gynltDPe4V)

### Top-Level Link

Top-Level Links are also known as **groups**

{% code title="/MyPlugin/reactium-hooks.js" %}

```javascript
import Reactium from 'reactium-core/sdk';

Reactium.Plugin.register('MyPlugin').then(() => {
    
    // Ensure the toolkit plugin is available
    if (!Reactium.Toolkit) return;
    
    Reactium.Hook.register('plugin-ready', () => {
        const MenuLink = Reactium.Component.get('RTKMENULINK');

        Reactium.Toolkit.Sidebar.register('form', {
            url: '/toolkit/form',
            component: MenuLink,
            children: 'Form',
            'aria-label': 'Form',
            order: Reactium.Enums.priority.lowest,
        });
    });
});
```

{% endcode %}

{% hint style="warning" %}
When using **Reactium.Component.get()** to retrieve a registered component, be sure to wrap your work in the **plugin-ready** hook: 
{% endhint %}

```jsx
Reactium.Hook.register('plugin-ready', () => {
    
    // Ensure the toolkit plugin is available
    if (!Reactium.Toolkit) return;
    
    const MenuLink = Reactium.Component.get('RTKMENULINK');
    
    // Your registration...
});
```

### Child Link

Adding a Child Link works the same as [Top-Level](/reactium-toolkit/creating-elements/sidebar.md#top-level-link) Links but the registry object is slightly different:

{% code title="/MyPlugin/reactium-hooks.js" %}

```javascript
Reactium.Plugin.register('MyPlugin').then(() => {

    // Ensure the toolkit plugin is available
    if (!Reactium.Toolkit) return;
    
    Reactium.Hook.register('plugin-ready', () => {
        const MenuLink = Reactium.Component.get('RTKMENULINK');

        // Top-Level Link - Form Elements
        Reactium.Toolkit.Sidebar.register('form', {
            url: '/toolkit/form',
            children: 'Form Elements',
            component: MenuLink,
            order: Reactium.Enums.priority.lowest,
        });

        // Child Link of Form Elements
        Reactium.Toolkit.Sidebar.register('form-inputs', {
            url: '/toolkit/form/inputs',
            children: 'Inputs',
            component: MenuLink,
            order: Reactium.Enums.priority.neutral,
            group: 'form',
        });
    });
});
```

{% endcode %}

Specifying the **group** property will target the ID of a [Top-Level](/reactium-toolkit/creating-elements/sidebar.md#top-level-link) Link. \
In the example above; **form** is the ID of the [Top-Level](/reactium-toolkit/creating-elements/sidebar.md#top-level-link) Link while the [Child Link](/reactium-toolkit/creating-elements/sidebar.md#child-link) specifies **form** as the **group** property value.

### Registry Object

{% tabs %}
{% tab title="Properties" %}

| Property      | Type      | Description                                          |
| ------------- | --------- | ---------------------------------------------------- |
| **children**  | `Node`    | Content passed to the component                      |
| **component** | `Element` | Component used to render the Link                    |
| **group**     | `String`  | ID of a Top-Level Link. Used when adding Child Links |
| **order**     | `Number`  | Index used when rendering elements                   |
| **url**       | `String`  | Wraps the children in an anchor tag                  |
| {% endtab %}  |           |                                                      |

{% tab title="Top-Level Object" %}

```javascript
{
  url: '/toolkit/your-group',
  children: 'Label Text',
  component: MenuLink,
  order: 100,
}
```

{% endtab %}

{% tab title="Child Object" %}

```javascript
{
  url: '/toolkit/your-group/your-slug',
  children: 'Label Text',
  group: 'your-group',
  order: 100,
}
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
Any additional properties added to the registry object will be passed to the **component** as props.
{% endhint %}


---

# 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.reactium.io/reactium-toolkit/creating-elements/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.