Here is what changed in your Acme workspace this week.
);
}
export default function Example() {
return ;
}
type SidebarHeaderSlot = React.ComponentType<
React.ComponentProps
>;
function SidebarChrome({
Header = SidebarHeader,
layout = "inset",
}: {
Header?: SidebarHeaderSlot;
layout?: SidebarPatternLayout;
} = {}): React.ReactElement {
const [activeItem, setActiveItem] = React.useState("Dashboard");
return (
<>
{/* The first row holds the logo, and the collapse button in the
inset layout; it keeps the top bar's height beside it. */}
{/* On the collapsed rail the logo's mark expands the sidebar, at the
height of the collapse button; the workspace below keeps its menu. */}
}>
Northlight
{layout === "inset" ? : null}
{/* The workspace switcher is a row of its own outside SidebarContent,
so it stays in place while the navigation scrolls. */}
Workspace
);
}
function InsetSidebarToggle(): React.ReactElement {
return (
);
}
/** A neutral placeholder logo: a four-point star in a rounded square. */
function NorthlightMark(): React.ReactElement {
return (
);
}
function SidebarNavigation({
activeItem,
items,
onActiveItemChange,
}: {
activeItem: string;
items: NavigationItem[];
onActiveItemChange: (label: string) => void;
}): React.ReactElement {
return (
{items.map((item) => {
return (
onActiveItemChange(item.label)}
render={item.href ? : undefined}
tooltip={item.label}
type={item.href ? undefined : "button"}
>
{item.label}
{item.shortcut ? (
{item.shortcut.map((key) => (
{key}
))}
) : null}
);
})}
);
}
function WorkspaceNavigation({
activeItem,
onActiveItemChange,
}: {
activeItem: string;
onActiveItemChange: (label: string) => void;
}): React.ReactElement {
return (
{workspaceNavigation.map((item, index) => (
onActiveItemChange(item.label)}
/>
))}
);
}
function LibraryNavigation({
activeItem,
onActiveItemChange,
}: {
activeItem: string;
onActiveItemChange: (label: string) => void;
}): React.ReactElement {
const { isMobile, state, setOpen } = useSidebar();
return (
{
if (open && !isMobile && state === "collapsed") setOpen(true);
}}
render={}
>
}>
Library
{[
{ label: "Documents", href: "#documents" },
{ label: "Templates", href: "#templates" },
{ label: "Media", href: "#media" },
].map((item) => (
onActiveItemChange(item.label)}
render={}
>
{item.label}
))}
);
}
function WorkspaceFolderRow({
active,
hasActions,
item,
onSelect,
}: {
active: boolean;
hasActions: boolean;
item: NavigationItem;
onSelect: () => void;
}): React.ReactElement {
return (
}
tooltip={item.label}
>
{item.label}
{hasActions ? (
}
>
Create space
Create folder
) : null}
);
}
// The switcher is a row of its own under the logo: the workspace's mark, its
// name over its plan and the up-down chevron. Two lines fill the 48 px row; on
// the collapsed rail it is the 36 px square with a 20 px mark, and the mark
// still opens the workspace menu there; the logo above expands the rail.
function WorkspaceSwitcher(): React.ReactElement {
const { isMobile, state } = useSidebar();
const collapsed = state === "collapsed" && !isMobile;
const [activeName, setActiveName] = React.useState(
workspaces[0].name,
);
const active =
workspaces.find((workspace) => workspace.name === activeName) ??
workspaces[0];
return (
}
>
{active.icon ? (
) : (
active.initial
)}
{active.name}
{active.plan}
Workspaces setActiveName(String(name))}
value={active.name}
>
{workspaces.map((workspace) => (
{workspace.icon ? (
) : (
workspace.initial
)}
{workspace.name}
))}
New workspace
);
}
function RecentSpaces({
activeItem,
onActiveItemChange,
}: {
activeItem: string;
onActiveItemChange: (label: string) => void;
}): React.ReactElement {
return (
Recently used onActiveItemChange(recentSpace)}
render={}
tooltip={recentSpace}
>
{recentSpace}
}
>
Unstar
Move to folder
Duplicate
Rename
Settings
Delete
);
}
function UpgradeCard(): React.ReactElement {
return (
Make room for more
Explore workspace plans
}
shape="pill"
size="icon-md"
variant="muted-accent"
>
);
}
function FooterNavigation(): React.ReactElement {
const [theme, setTheme] = React.useState("system");
// On the collapsed rail the Messages link stacks above the avatar in the
// rail's 36 px square: the avatar keeps its place at the bottom, and both
// stand on the rail's axis from the first frame of the collapse.
return (
}
/>
}
>
{account.avatar}Profile{account.avatar}
{account.name}
{account.email}
ProfileSettings⌘,Appearance
System
Light
DarkSupport
Help center
Contact support
Documentation
Guides
Changelog
CommunityHomepageSign out}
size="xl"
variant="text"
/>
}
>
Messages
);
}
```
## Structure the page
Keep navigation in DashboardShellSidebar, the page heading and trigger in DashboardShellHeader, and scrollable content in DashboardShellMain. DashboardShellPrimary can group header and content in a flexible region. Avoid nesting a second main landmark inside DashboardShellInset, which already renders main.
Use Breadcrumb for the current location, Tabs for related views, and ordinary application headings and sections for content. Keep the selected route in the router or application state and set each menu button’s active prop accordingly.
## Desktop and mobile
Desktop supports offcanvas or icon collapse; DashboardShell defaults to icon. Mobile uses a Sheet and has separate open state. Keep SidebarTrigger available at narrow widths. Icon-only navigation needs actual icons and accessible labels/tooltips.
The sidebar registers Ctrl/Cmd+B and writes desktop expansion to the `sidebar_state` cookie. Read the [Sidebar usage notes](/docs/components/sidebar/#usage-notes) before choosing persistence behavior. The provider does not automatically restore the cookie on first render.
## Bounded previews and production layout
The documentation example includes a bounded application wrapper so the sidebar stays inside the visible sample. That wrapper is part of the copied TSX, not an invisible docs style. Remove it, and the `h-full` and `min-h-0` classes it gives the shell and the sidebar, when the shell should fill the application viewport. The header then stays in view while DashboardShellMain scrolls, as the [sticky header example](/docs/components/dashboard-shell/#sticky-header) shows. Set `stickyHeader={false}` on DashboardShell for a page that scrolls as a whole.
## Complete application
[Application shell](/docs/examples/application-shell/) provides the complete file, installation command, and local navigation. Integrate your router through menu button render composition; connect data, session state, and authorization in the application.