GitHub

Sidebar

A sidebar component for navigation in documentation or applications.

Installation#

Add The Following Colors To Your CSS File#

src/app.css
:root {
...
--sidebar: oklch(0.88 0.06 254);
--sidebar-foreground: oklch(0.28 0.09 268);
--sidebar-primary: oklch(0.72 0.19 260);
--sidebar-primary-foreground: oklch(0.28 0.09 268);
--sidebar-accent: oklch(0.93 0.03 256);
--sidebar-accent-foreground: oklch(0.28 0.09 268);
--sidebar-border: oklch(0.28 0.09 268);
--sidebar-ring: oklch(0.28 0.09 268);
}
.dark {
...
--sidebar: oklch(0.38 0.14 266);
--sidebar-foreground: oklch(0.97 0.01 255);
--sidebar-primary: oklch(0.62 0.19 260);
--sidebar-primary-foreground: oklch(0.28 0.09 268);
--sidebar-accent: oklch(0.28 0.09 268);
--sidebar-accent-foreground: oklch(0.97 0.01 255);
--sidebar-border: oklch(0.97 0.01 255);
--sidebar-ring: oklch(0.97 0.01 255);
}
@theme inline {
...
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}

If you are using a different theme, change the color variables to match your theme’s design.

Light Theme

  • sidebar - {color}-200
  • sidebar-foreground - {color}-950
  • sidebar-primary - {color}-400
  • sidebar-primary-foreground - {color}-950
  • sidebar-accent - {color}-100
  • sidebar-accent-foreground - {color}-950
  • sidebar-border - {color}-950
  • sidebar-ring - {color}-950

Dark Theme

  • sidebar - {color}-900
  • sidebar-foreground - {color}-50
  • sidebar-primary - {color}-500
  • sidebar-primary-foreground - {color}-950
  • sidebar-accent - {color}-950
  • sidebar-accent-foreground - {color}-50
  • sidebar-border - {color}-50
  • sidebar-ring - {color}-50

Structure#

A Sidebar component is composed of the following parts:

  • SidebarProvider - Handles collapsible state
  • Sidebar - The main container for the sidebar
  • SidebarHeader and SidebarFooter - Sticky at the top and bottom of the sidebar
  • SidebarContent - The main scrollable area
  • SidebarGroup - Sections within the SidebarContent
  • SidebarTrigger - Trigger for the Sidebar
Sidebar Structure

Usage#

src/app.tsx
import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import Nav from "~/components/Nav";
import { AppSidebar } from "~/components/app-sidebar"
import { SidebarProvider } from "~/components/ui/sidebar";
import "./app.css";
export default function App() {
return (
<Router
root={(props) => (
<>
<SidebarProvider>
<AppSidebar />
<Nav />
<Suspense>{props.children}</Suspense>
</SidebarProvider>
</>
)}
>
<FileRoutes />
</Router>
);
}
src/components/app-sidebar.tsx
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarHeader,
} from "~/components/ui/sidebar"
export function AppSidebar() {
return (
<Sidebar>
<SidebarHeader />
<SidebarContent>
<SidebarGroup />
<SidebarGroup />
</SidebarContent>
<SidebarFooter />
</Sidebar>
)
}

Your First Sidebar#

Let’s start with the most basic sidebar. A collapsible sidebar with a menu.

Add A SidebarProvider and SidebarTrigger At The Root Of Your Application.

src/app.tsx
import { Suspense } from "solid-js";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import Nav from "~/components/Nav";
import { AppSidebar } from "~/components/app-sidebar"
import { SidebarProvider } from "~/components/ui/sidebar";
import "./app.css";
export default function App() {
return (
<Router
root={(props) => (
<>
<SidebarProvider>
<AppSidebar />
<Nav />
<Suspense>{props.children}</Suspense>
</SidebarProvider>
</>
)}
>
<FileRoutes />
</Router>
);
}

Create A New Sidebar Component At src/components/app-sidebar.tsx.

src/components/app-sidebar.tsx
import { Sidebar, SidebarContent } from "~/components/ui/sidebar"
export function AppSidebar() {
return (
<Sidebar>
<SidebarContent />
</Sidebar>
)
}

Now Let’s Add A SidebarMenu To The Sidebar.

We’ll use the SidebarMenu component in a SidebarGroup.

src/components/app-sidebar.tsx
import { For } from "solid-js";
import CalendarIcon from "lucide-solid/icons/calendar";
import HomeIcon from "lucide-solid/icons/home";
import InboxIcon from "lucide-solid/icons/inbox";
import SearchIcon from "lucide-solid/icons/search";
import SettingsIcon from "lucide-solid/icons/settings";
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
} from "~/components/ui/sidebar";
// Menu items.
const items = [
{
title: "Home",
url: "#",
icon: HomeIcon,
},
{
title: "Inbox",
url: "#",
icon: InboxIcon,
},
{
title: "Calendar",
url: "#",
icon: CalendarIcon,
},
{
title: "Search",
url: "#",
icon: SearchIcon,
},
{
title: "Settings",
url: "#",
icon: SettingsIcon,
},
];
export function AppSidebar() {
return (
<Sidebar>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Application</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<For each={items}>
{(item) => (
<SidebarMenuItem>
<SidebarMenuButton as="a" href={item.url}>
<item.icon />
<span>{item.title}</span>
</SidebarMenuButton>
</SidebarMenuItem>
)}
</For>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
);
}