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.

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

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

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

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

Last updated