Aller au contenu

Composants · Référence

Sidebar Layout

A sidebar-based layout with configurable navigation groups, a brand header, header action slot, and page header component.

Dernière mise à jour le 16 octobre 2026

Overview

sidebar-layout provides a sidebar-based layout for applications using TanStack Router. It includes a configurable sidebar with an optional header slot and navigation groups, a page header component with optional badge, description, and actions, and an optional top-bar action slot. Apps own product-specific controls such as organization switchers, locale switchers, and user buttons by passing them to headerActions.

Install

shell
bunx shadcn@latest add @krak-stack/sidebar-layout

Features

  • Configurable sidebar with sidebarHeader slot and grouped navigation
  • Active link detection via TanStack Router
  • Collapsible icon sidebar with SidebarProvider
  • SidebarPageHeader with optional badge, description, and actions
  • Optional headerActions slot for app-owned top-bar controls
  • Uses Outlet or children for content rendering

Usage

tsx
import { SidebarLayout, SidebarPageHeader, type NavGroup } from "@/components/ui/sidebar-layout";
import { AppBrand } from "@/components/ui/app-brand";
import { LocaleSwitcher } from "@/components/ui/locale-switcher";
import { LayoutDashboard, Users, Blocks } from "lucide-react";

const groups: NavGroup[] = [
  {
    label: () => "Navigation",
    items: [
      { label: () => "Dashboard", href: "/admin", exact: true, icon: LayoutDashboard },
      { label: () => "Users", href: "/admin/users", icon: Users },
    ],
  },
];

<SidebarLayout
  sidebarHeader={
    <AppBrand
      label="My App"
      subtitle="Admin Panel"
      icon={Blocks}
      variant="sidebar"
      href="/admin"
    />
  }
  headerActions={
    <>
      <YourSearch />
      <LocaleSwitcher />
    </>
  }
  groups={groups}
/>

Active Navigation

Section links highlight their nested routes by default. Set exact: true on overview or index links such as /admin so they do not remain highlighted throughout the application. Matching uses TanStack Router's Link with activeOptions; search parameters do not affect highlighting and external links never become active. Multiple ancestor links can be active unless their overview entries use exact matching.

Link to the section index, for example /admin/customizations/pages, and let its index route redirect to the default child. This keeps the link destination and matching path aligned without an activeHref override or local package patch.

Les liens de section restent actifs sur leurs routes imbriquées. Utilisez exact: true pour les pages de vue d'ensemble afin qu'elles ne restent pas actives sur toutes les sous-pages. Les paramètres de recherche ne modifient pas la sélection et les liens externes ne deviennent jamais actifs.

For pages with custom content:

tsx
<SidebarLayout
  sidebarHeader={<AppBrand label="My App" subtitle="Admin Panel" icon={Blocks} variant="sidebar" href="/admin" />}
  groups={groups}
>
  <SidebarPageHeader title="Users" description="Manage users" />
</SidebarLayout>
Dependencies
Packages and shadcn components required by this registry item.

Dependencies

Registry Dependencies