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.

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.

npx reactium toolkit sidebar

Prompts

[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)

Sidebar Navigation

The Sidebar has a stylized navigation link called the MenuLink which can be used in your project to render a Sidebar element. By default you can add either a Top-Level Link or Child Link via the MenuLink component.

Top-Level Link

Top-Level Links are also known as groups

/MyPlugin/reactium-hooks.js

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,
        });
    });
});

When using Reactium.Component.get() to retrieve a registered component, be sure to wrap your work in the plugin-ready hook:

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 Links but the registry object is slightly different:

/MyPlugin/reactium-hooks.js

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',
        });
    });
});

Specifying the group property will target the ID of a Top-Level Link. In the example above; form is the ID of the Top-Level Link while the Child Link specifies form as the group property value.

Registry Object

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

Top-Level Object

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

Child Object

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

Any additional properties added to the registry object will be passed to the component as props.