Sidebar

The sidebar node draws one sidebar region and renders its children inside it, in order.

It works in any host. A host that already mounts a sidebar provider, such as the app shell, keeps its own: the node uses that provider rather than mounting a second one. In a host without one, the node mounts its own.

Basic Usage

With Groups

A group is a heading text node followed by its items. A separator node divides two groups.

The collapsible key

collapsible is a boolean.

• false draws the sidebar in the page flow, at a fixed width. It does not follow the host's open state, so it is visible in every host. Every example on this page authors it.
• true, or leaving the key out, selects the collapsible form instead. That form is not drawn in the page flow: it is positioned against the edge of the viewport, at full viewport height, so it does not appear where the schema places it. Author false for a sidebar that does.

The side key

side picks the edge of the viewport the collapsible form is drawn against: left, the default, or right. On the right edge the sidebar's border moves to its left side, and on a narrow viewport the sheet slides in from the right.

{
  "type": "sidebar",
  "side": "right",
  "children": [
    { "type": "text", "content": "Details", "className": "px-2 text-xs text-muted-foreground" }
  ]
}

side shows on the collapsible form only, as variant does. With collapsible: false the sidebar is drawn in the page flow, where the page's layout places it, so every value draws the same column.

Schema

import type { SidebarSchema } from '@object-ui/types';

const sidebar: SidebarSchema = {
  type: 'sidebar',
  collapsible: false,
  className: 'gap-1 border-r p-2',
  children: [
    { type: 'text', content: 'Menu', className: 'px-2 text-xs text-muted-foreground' },
    { type: 'button', label: 'Dashboard', variant: 'ghost', className: 'w-full justify-start' },
    { type: 'button', label: 'Settings', variant: 'ghost', className: 'w-full justify-start' },
  ],
};

The renderer reads collapsible and children, and passes side, variant and className to the sidebar element.

Examples

With Badges

Each item is a flex row holding a text node and a badge node.