LogoBaseStack
GuideComponents

Sidebar

A composable, themeable and customizable sidebar component.

Docs Code

Demo

You can view this demo in fullscreen mode here.

Usage

This is the sidebar component from shadcn, with some adjustments to make it easier to use:

  • Added the SidebarNavigationMenu component
  • Modified so that icons are clickable when the sidebar is collapsed
  • The DashboardLayout is pre-configured in each app, so you can use it out of the box.
Note

When you set up the project, a sidebar layout is already configured for each app in shared/layouts/DashboardLayout.tsx. This file handles active link highlighting separately for each routing library. See the following examples for how to use it with both routing libraries.

Next.js

In Next.js, you can use cookies to persist the sidebar's collapsed state.

tsx
// layout.tsx
import { DashboardLayout } from '@/shared/layouts/DashboardLayout'
import { cookies } from 'next/headers'

interface LayoutProps {
    children: React.ReactNode
}

export default async function Layout({ children }: LayoutProps) {
    const cookieStore = await cookies()
    const defaultOpen = cookieStore.get('sidebar_state')?.value !== 'false'

    return <DashboardLayout defaultOpen={defaultOpen}>{children}</DashboardLayout>
}

Tanstack Router

tsx
// route.tsx
import { DashboardLayout } from '@/shared/layouts/DashboardLayout'
import { createFileRoute, Outlet } from '@tanstack/react-router'

export const Route = createFileRoute('/dashboard')({
    component: RouteComponent,
})

function RouteComponent() {
    return (
        <DashboardLayout>
            <Outlet />
        </DashboardLayout>
    )
}