About this block

Nested Nav Sidebar Shell renders the two-level nav pattern without any JavaScript: Overview at the top, then Projects expanded with a ChevronDown and aria-expanded true, three indented children along a left border rail (Website redesign active, Mobile app, Q3 launch), then Members, Billing, and Settings below. The active child carries bg-muted and font-medium; the border rail is the only visual signal that these items belong to Projects. Avery Stone with full name and avery@acme.com anchors the foot. The content side shows the Website redesign page header, 12 open tasks across 3 milestones, due Jul 24, Share and New task buttons, and one dashed panel for a board or table block.

The project children are a separate array from the top and bottom nav items. Keeping the expansion static means no toggle state is needed; swap to a controlled Accordion when your router owns open/closed.

When to use

Reach for this shell when the product has a two-level information architecture and the active section always ships with its children visible. Wire aria-current to your router and aria-expanded to the open section derived from the current path.

A natural flow around it on an Application Pro page:

Before

• Nothing, shells are the page

After

• Data table
• Filters and search

What you can display

One strong use is the project-scoped workspace sidebar. Other nested nav patterns:

• Team channels. Workspace at the top level, channels indented below.
• Settings subsections. Security expanded showing SSO, MFA, and audit log children.
• Report groups. Revenue expanded with Monthly, Quarterly, and Annual children.

Tip: the border rail only reads as hierarchy when the parent row is clearly distinct; the ChevronDown and font-weight do the work, the rail confirms it.