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.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
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.