Navigation component

Sidebar

Theme-aware, responsive sidebar component.

8 props2 slots4 outputsTheme readyResponsive

Interactive playground

Configure Sidebar

Change any prop and inspect the server-rendered component immediately.

Live preview

Component code

<Sidebar
  items='[
    {
      "id": "sidebar-0-1",
      "key": "sidebar-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#sidebar-demo",
      "actionHref": "#sidebar-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "sidebar-0-2",
      "key": "sidebar-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#sidebar-demo",
      "actionHref": "#sidebar-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  mobileLabel="Sidebar"
  drawerTitle="Sidebar example">
  <div data-slot="drawer">
    <div class="showcase-slot">drawer slot</div>
  </div>
</Sidebar>

Event outputInteract with the preview to inspect the typed payload.

Component props8 controls

colorstringsizestringlabelstringitemsunknown[]

[
  {
    "id": "sidebar-0-1",
    "key": "sidebar-0-1",
    "value": "primary",
    "label": "Primary workflow",
    "title": "Primary workflow",
    "description": "A clean default configuration for everyday product interfaces.",
    "text": "A configurable sample message.",
    "href": "#sidebar-demo",
    "actionHref": "#sidebar-demo",
    "actionLabel": "View details",
    "icon": "icon-[lucide--sparkles]",
    "iconClass": "icon-[lucide--sparkles]",
    "variant": "primary",
    "status": "Active",
    "time": "09:30",
    "current": true,
    "selected": true,
    "checked": true,
    "disabled": false,
    "outgoing": false,
    "open": true,
    "number": 1,
    "count": 16,
    "percentage": 72,
    "color": "#7c3aed",
    "target": "_self",
    "ariaLabel": "Open primary workflow 1",
    "items": [
      {
        "label": "Nested option A",
        "value": "nested-a"
      },
      {
        "label": "Nested option B",
        "value": "nested-b"
      }
    ],
    "links": [
      {
        "label": "Documentation",
        "href": "#documentation"
      },
      {
        "label": "API reference",
        "href": "#api-reference"
      }
    ],
    "values": [
      "Included",
      "Standard"
    ]
  },
  {
    "id": "sidebar-0-2",
    "key": "sidebar-0-2",
    "value": "secondary",
    "label": "Additional option",
    "title": "Supporting example",
    "description": "A clean default configuration for everyday product interfaces.",
    "text": "Another configurable message.",
    "href": "#sidebar-demo",
    "actionHref": "#sidebar-demo",
    "actionLabel": "View details",
    "icon": "icon-[lucide--sparkles]",
    "iconClass": "icon-[lucide--sparkles]",
    "variant": "primary",
    "status": "Active",
    "time": "09:30",
    "current": false,
    "selected": false,
    "checked": false,
    "disabled": false,
    "outgoing": true,
    "open": true,
    "number": 2,
    "count": 32,
    "percentage": 72,
    "color": "#7c3aed",
    "target": "_self",
    "ariaLabel": "Open primary workflow 2",
    "items": [
      {
        "label": "Nested option A",
        "value": "nested-a"
      },
      {
        "label": "Nested option B",
        "value": "nested-b"
      }
    ],
    "links": [
      {
        "label": "Documentation",
        "href": "#documentation"
      },
      {
        "label": "API reference",
        "href": "#api-reference"
      }
    ],
    "values": [
      "Included",
      "Standard"
    ]
  }
]

activestringmobile Labelstringdrawer Titlestringclassstring

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Groups and nested levels

An entry is a single link, a labelled group, or a branch nested up to three levels. Arrow keys move down the rail.

Live preview

Dashboard
Projects
- Active 4
- Archive
  - 2025
  - 2024
Account
- Settings

Component usage.wrn

<Sidebar
  label="Workspace"
  items='[
    {
      "label": "Dashboard",
      "href": "/",
      "value": "dash",
      "icon": "icon-[lucide--gauge]"
    },
    {
      "heading": "Projects",
      "items": [
        {
          "label": "Active",
          "href": "/active",
          "value": "active",
          "badge": "4"
        },
        {
          "label": "Archive",
          "value": "archive",
          "items": [
            {
              "label": "2025",
              "href": "/a/2025",
              "value": "a2025"
            },
            {
              "label": "2024",
              "href": "/a/2024",
              "value": "a2024"
            }
          ]
        }
      ]
    },
    {
      "heading": "Account",
      "items": [
        {
          "label": "Settings",
          "href": "/settings",
          "value": "settings",
          "icon": "icon-[lucide--settings]"
        }
      ]
    }
  ]'
  active="active"
  mobileLabel="Sidebar"
  drawerTitle="Sidebar example">
  <div data-slot="drawer">
    <div class="showcase-slot">drawer slot</div>
  </div>
</Sidebar>

Advanced

Drawer on small screens

Below the tablet breakpoint the rail is replaced by a launcher that opens a Drawer. Composing Drawer rather than reimplementing it means the focus trap and the body scroll lock come from one place.

Live preview

Component usage.wrn

<Sidebar
  size="sm"
  label="Operations"
  items='[
    {
      "label": "Queue",
      "href": "/queue",
      "value": "queue",
      "icon": "icon-[lucide--inbox]"
    },
    {
      "label": "Reports",
      "href": "/reports",
      "value": "reports",
      "icon": "icon-[lucide--chart-no-axes-column]"
    }
  ]'
  active="queue"
  drawerTitle="Operations">
  <div data-slot="drawer">
    <div class="showcase-slot">drawer slot</div>
  </div>
</Sidebar>

Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@toggleFires when the component changes between open and closed or on and off states.

@openFires after the component opens.

@closeFires after the component closes.

@selectFires when an item, option, card, or result is selected.

Declarative handlers.wrn

<Sidebar
  @toggle='console.log(payload)'
  @open='console.log(payload)'
  @close='console.log(payload)'
  @select='console.log(payload)'
/>

Direct output handlers.js

import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Sidebar\"], [data-component=\"Sidebar\"]")

if (component) registerOutputHandler(component, "toggle", (payload) => {
  console.log("toggle", payload)
})

if (component) registerOutputHandler(component, "open", (payload) => {
  console.log("open", payload)
})

if (component) registerOutputHandler(component, "close", (payload) => {
  console.log("close", payload)
})

if (component) registerOutputHandler(component, "select", (payload) => {
  console.log("select", payload)
})

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`color`	string	`"primary"`	No
`size`	string	`"default"`	No
`label`	string	`"Sidebar"`	No
`items`	unknown[]	`[]`	No
`active`	string	`""`	No
`mobileLabel`	string	`"Open navigation"`	No
`drawerTitle`	string	`"Navigation"`	No
`class`	string	`""`	No