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
Prompts
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
[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)
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.
Properties
Top-Level Object
Child Object
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 |
{
url: '/toolkit/your-group',
children: 'Label Text',
component: MenuLink,
order: 100,
}
{
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.
Last modified 16d ago