ScriptWeaver View source

Sidebar

The application navigation rail: named items with icons, one selected, and a collapse button that shrinks it to an icon-only strip. Built the accessible way — the items live in one focusable widget (a single Tab stop; ↑/↓/Home/End move the selection), and the collapse control is a real button.

Live preview

Live preview. In the Player's built-in docs viewer (scriptweaver --help), this renders Sidebar as a live, theme-aware widget you can interact with.

Example

const nav = app.Sidebar({ width: 200 });
nav.pack.configure({ side: 'left', fill: 'y' });

nav
  .add('inbox', { text: 'Inbox', icon: 'inbox' })
  .add('sent', { text: 'Sent', icon: 'send' })
  .add('trash', { text: 'Trash', icon: 'trash' });

nav.selected = 'inbox';
nav.on('select', () => showPage(nav.selected));

Lay it out with fill: 'y' (or sticky: 'ns') — the rail owns its width.

Items

nav.add(name, { text, icon }) creates or updates an item (names use letters, digits, _, -); icon is any of the bundled Feather icons, drawn in the theme foreground and re-tinted on theme switches. nav.remove(name) deletes (unknown names are a no-op); nav.items lists { name, text, icon } in order; nav.selected reads or sets the selection by name and on('select') fires on every change — keyboard, click, or programmatic.

Collapsing

The chevron button (or nav.collapsed = true) shrinks the rail to icon-only width; texts return on expand. <<SidebarToggled>> fires on each change, and the state is announced to screen readers.

Options

Option Type Description
width number The expanded rail width in pixels (default ~200).
collapsed boolean Icon-only mode.
state string 'normal' or 'disabled' (items and toggle).

See also