Sidebar

Collapsible app sidebar — icons + labels, active highlight.

ui navigation

Preview

Installation

npx slintcn@latest add sidebar

Usage

import { Sidebar, SidebarItem } from "slintcn/components/sidebar.slint";
import { LucidePaths } from "slintcn/components/lucide-paths.slint";

Sidebar {
    items: [
        { label: "Overview",  id: "home",     icon: LucidePaths.dot },
        { label: "Customers", id: "people",   icon: LucidePaths.dot },
        { label: "Settings",  id: "settings", icon: LucidePaths.dot },
    ];
    active <=> route;
    collapsed <=> nav-collapsed;
    navigate(id) => { /* route to id */ }
}

Properties

items in [SidebarItem]

Items shown top-to-bottom.

active in-out string

Two-way; id of the active row. Compare against `items[i].id`.

collapsed in-out bool

Two-way; when true, the sidebar shrinks to `collapsed-width` and only icons render.

collapsed-width in length

Width while `collapsed` is true.

expanded-width in length

Width while expanded.

navigate callback (string)

Fired with the chosen item's id; `active` updates first.

toggle callback ()

Fired after the user clicks the collapse / expand toggle.

API

Accessibility

focusableno

Dependencies

icon lucide-paths

Installed automatically as transitive dependencies of slintcn add sidebar.

← Date Picker Empty →