SidebarShell

Reusable dashboard sidebar shell that accepts app-owned IA, breadcrumbs, and topbar actions.

All components · Theme builder · Implementation source

Live preview

Install

Shell

netscript ui:add sidebar-shell

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

TypeScript

import { useState } from 'preact/hooks';
import { SidebarShell } from '@app/components/ui/sidebar-shell.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><SidebarShell brand="Northwind" pathname="/orders" navigation={[{items:[{label:"Orders",href:"/orders"}]}]}>Order workspace</SidebarShell></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

Owner	Prop	Type	Optional
`SidebarShellProps`	`children`	`Renderable`	No
`SidebarShellProps`	`class`	`string`	Yes
`SidebarShellProps`	`pathname`	`string`	No
`SidebarShellProps`	`navigation`	`[object Object]`	No
`SidebarShellProps`	`brand`	`Renderable`	No
`SidebarShellProps`	`brandBadge`	`Renderable`	Yes
`SidebarShellProps`	`footer`	`Renderable`	Yes
`SidebarShellProps`	`topbarStart`	`Renderable`	Yes
`SidebarShellProps`	`topbarEnd`	`Renderable`	Yes
`SidebarShellProps`	`contentId`	`string`	Yes
`SidebarShellProps`	`navLabel`	`string`	Yes

TypeScript

SidebarShellProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "children">

Keyboard

No S3 keyboard contract is registered for this item. Native controls retain browser keyboard behavior.

Tokens

No S3 token contract is registered for this item.

CSS custom properties referenced directly: Composed primitives supply their own tokens.

Contract and compatibility

This registry item ships without an S3 entry. Implementation prop documentation is authoritative.