Search blocks by description or jump to a page.
An expanded workspace sidebar with flat items, a Projects group opened to indented children along a guide line, and two collapsed groups with counts.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Sidebar Nav Tree is a full app shell built around a 64-wide expanded sidebar. A Northwind workspace header with a switcher chevron sits on top, then flat primary items (Home, Inbox with a 12 badge, My issues), then a Projects group opened to show its children indented along a left guide line: Apollo web active, Atlas API with a 3 badge, Billing revamp, and Mobile app, closed by a New project link. Two collapsed groups, Teams and Resources, carry counts and a right chevron below. A sidebar foot holds an Invite teammates link, and the content area renders the active Apollo web project with Current sprint and Recent activity cards.
Primary items, tree children, and collapsed groups are three typed arrays so active and badge fields share one shape. The open group sets aria-expanded true and the collapsed ones set it false; active links carry aria-current. The indentation guide is a real border-l on the children container, not padding.
Reach for this block as the primary sidebar of an issue tracker or project tool where work nests under a group and users expand the tree to reach a specific item. Wire the tree arrays to your workspace data and set aria-current on the active child via your router.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the project tree sidebar. Other configurations:
Tip: the indented children hang off a real border-l guide line, so the nesting reads at a glance without any extra indentation math.