Inbox Sidebar
Mail navigation sidebar with a Compose button, standard folders with unread counts, and a labeled section of color-coded labels with message counts.
Mail navigation sidebar with a Compose button, standard folders with unread counts, and a labeled section of color-coded labels with message counts.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Inbox Sidebar is the mail navigation rail for the Acme workspace, showing Avery Stone at avery@acme.com pinned at the top above a full-width Compose button. Six folder links follow: Inbox with a bold 2 unread count and active state, Starred, Sent, Drafts with a 3 badge, Archive, and Trash. Below the divider a Labels section lists five colored-dot entries using chart token colors, Roadmap, Q2 Planning indented one level beneath it, Engineering, Finance, and Design, each with a message count. A drag-to-nest note sits at the bottom of the labels area.
Folders and labels are two typed arrays with uniform key shapes so TS never infers a union from optional fields. The indented label is static markup, a class condition on ml-4, to show the nesting pattern without drag interaction.
Reach for this block as the left rail in a mail layout, wired to your folder counts and current route for aria-current. Extend the labels array from your label API and wire the Compose button to open the compose blueprint.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the primary mail folder navigation. Other sidebar configurations:
Tip: the drag-to-nest note below labels replaces a tooltip, it teaches the interaction on first view without requiring hover.