# 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](https://docs.reactium.io/reactium-toolkit/sdk).

![](https://2573846121-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4poMvugQiWii-2eM1T%2F-MTMLZHxN5Rxa1xJG4_B%2F-MTMPYEWdNeCQRhoKIIf%2Fsidebar-nav.png?alt=media\&token=46a4b5a2-3bbc-4a25-942d-4eeee8461027)

{% 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](https://docs.reactium.io/reactium-toolkit/components/menu-link) which can be used in your project to render a Sidebar element. By default you can add either a [**Top-Level**](#top-level-link) Link or [**Child Link**](#child-link) via the [MenuLink](https://docs.reactium.io/reactium-toolkit/components/menu-link) component.

![](https://2573846121-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4poMvugQiWii-2eM1T%2F-MTMLZHxN5Rxa1xJG4_B%2F-MTMQpZFu9gynltDPe4V%2Fsidebar-links.png?alt=media\&token=46ef0513-515a-43d0-a097-ed4763e750c7)

### 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](#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](#top-level-link) Link. \
In the example above; **form** is the ID of the [Top-Level](#top-level-link) Link while the [Child Link](#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 %}