Sidebar
Sixteen sidebar blocks on one page, grouped
Documentation panels
Sidebar 01 — Sectioned docs navigation
A version switcher and search over four sections — shadcn's sidebar-01.
Build your application
Data Fetching
Read data where it is rendered. A server component can await the store directly, and the shell streams to the window while the slow part of the page is still resolving.
app/page.tsxexport async function Page() {
const data = await getData();
return <View data={data} />;
}Caching
A route is cached until it is revalidated. Tag the read, publish the change, and only the routes that asked for it are rebuilt.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-01.tsx
Sidebar 02 — Collapsible sections
The same tree with every section folding in place — shadcn's sidebar-02.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-02.tsx
Sidebar 03 — Submenus
Always-open sections, each parent row over its submenu — shadcn's sidebar-03.
Build your application
Data Fetching
Read data where it is rendered. A server component can await the store directly, and the shell streams to the window while the slow part of the page is still resolving.
app/page.tsxexport async function Page() {
const data = await getData();
return <View data={data} />;
}Caching
A route is cached until it is revalidated. Tag the read, publish the change, and only the routes that asked for it are rebuilt.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-03.tsx
Sidebar 04 — Floating submenus
The always-open tree on a floating, rounded panel — shadcn's sidebar-04.
Build your application
Data Fetching
Read data where it is rendered. A server component can await the store directly, and the shell streams to the window while the slow part of the page is still resolving.
app/page.tsxexport async function Page() {
const data = await getData();
return <View data={data} />;
}Caching
A route is cached until it is revalidated. Tag the read, publish the change, and only the routes that asked for it are rebuilt.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-04.tsx
Sidebar 05 — Collapsible submenus
Parent rows that open a submenu from a plus — shadcn's sidebar-05.
Build your application
Data Fetching
Read data where it is rendered. A server component can await the store directly, and the shell streams to the window while the slow part of the page is still resolving.
app/page.tsxexport async function Page() {
const data = await getData();
return <View data={data} />;
}Caching
A route is cached until it is revalidated. Tag the read, publish the change, and only the routes that asked for it are rebuilt.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-05.tsx
Sidebar 06 — Dropdown sections
Each docs section behind its own dropdown, over a newsletter card — shadcn's sidebar-06.
Build your application
Data Fetching
Read data where it is rendered. A server component can await the store directly, and the shell streams to the window while the slow part of the page is still resolving.
app/page.tsxexport async function Page() {
const data = await getData();
return <View data={data} />;
}Caching
A route is cached until it is revalidated. Tag the read, publish the change, and only the routes that asked for it are rebuilt.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-06.tsx
Workspace panels
Sidebar 07 — Icon rail
A workspace nav that collapses to an icon rail — shadcn's sidebar-07.
Build your application
Data Fetching
Read data where it is rendered. A server component can await the store directly, and the shell streams to the window while the slow part of the page is still resolving.
app/page.tsxexport async function Page() {
const data = await getData();
return <View data={data} />;
}Caching
A route is cached until it is revalidated. Tag the read, publish the change, and only the routes that asked for it are rebuilt.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-07.tsx
Sidebar 08 — Inset panel
The panel on a card surface, the page in a rounded sheet beside it — shadcn's sidebar-08.
Build your application
Data Fetching
Read data where it is rendered. A server component can await the store directly, and the shell streams to the window while the slow part of the page is still resolving.
app/page.tsxexport async function Page() {
const data = await getData();
return <View data={data} />;
}Caching
A route is cached until it is revalidated. Tag the read, publish the change, and only the routes that asked for it are rebuilt.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-08.tsx
Sidebar 10 — Actions popover
The workspace panel beside a page header with an actions popover — shadcn's sidebar-10.
Workspace · 12 open
Project Management & Task Tracking
One board for the brief, the design references and the release. Every row below is a task with an owner, and the count is the same array.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-10.tsx
Sidebar 11 — File tree
The changed files over the repository, UI folder open — shadcn's sidebar-11.
Build your application
Data Fetching
Read data where it is rendered. A server component can await the store directly, and the shell streams to the window while the slow part of the page is still resolving.
app/page.tsxexport async function Page() {
const data = await getData();
return <View data={data} />;
}Caching
A route is cached until it is revalidated. Tag the read, publish the change, and only the routes that asked for it are rebuilt.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-11.tsx
Sidebar 12 — Calendar
A month grid with calendar lists and New Calendar in the footer — shadcn's sidebar-12.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-12.tsx
More than one panel
Sidebar 09 — Nested inbox
An icon rail of folders, a message list and the open thread — shadcn's sidebar-09.
Inbox · 09:34 AM
Meeting Tomorrow
Hi team, just a reminder about our meeting tomorrow at 10 AM. Please come prepared with your project updates.
We will start with the release checklist, then walk the open design questions. If you cannot make it, send your notes before the call and we will read them in.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-09.tsx
Sidebar 14 — Right panel
The table of contents on the right edge, toggled from the header — shadcn's sidebar-14.
Build your application
Data Fetching
Read data where it is rendered. A server component can await the store directly, and the shell streams to the window while the slow part of the page is still resolving.
app/page.tsxexport async function Page() {
const data = await getData();
return <View data={data} />;
}Caching
A route is cached until it is revalidated. Tag the read, publish the change, and only the routes that asked for it are rebuilt.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-14.tsx
Sidebar 15 — Two panels
Workspace and favorites left, the open project middle, the calendar right — shadcn's sidebar-15.
Workspace · 12 open
Project Management & Task Tracking
One board for the brief, the design references and the release. Every row below is a task with an owner, and the count is the same array.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-15.tsx
Panels in a frame
Sidebar 13 — Settings dialog
A settings panel inside a modal, section nav on the left — shadcn's sidebar-13.
The dialog's section sidebar is collapsible="none": it has no collapse trigger.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-13.tsx
Sidebar 16 — Site header
A sticky site header with toggle, trail and search above the workspace — shadcn's sidebar-16.
Build your application
Data Fetching
Read data where it is rendered. A server component can await the store directly, and the shell streams to the window while the slow part of the page is still resolving.
app/page.tsxexport async function Page() {
const data = await getData();
return <View data={data} />;
}Caching
A route is cached until it is revalidated. Tag the read, publish the change, and only the routes that asked for it are rebuilt.
Block source on GitHubapps/docs/src/components/docs/blocks/sidebar-16.tsx
Edit this page on GitHubapps/docs/content/docs/blocks/sidebar.mdx