Channel List Sidebar
Workspace nav rail with channel and DM sections, unread badges, a muted channel indicator, and per section add affordances.
Workspace nav rail with channel and DM sections, unread badges, a muted channel indicator, and per section add affordances.
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
Channel List Sidebar is the workspace navigation rail, two sections under the Acme header: Channels with five hash-prefixed entries and Direct Messages with four people. The engineering channel carries a bold name and a count badge of 4, random shows 2, and releases is muted with a VolumeX icon instead of the hash. General is active. In the DM section Priya Nair and Maya Chen show an online presence dot; Jordan Lee and Noah Park show an offline dot. Maya Chen has an unread badge of 3. Each section header has a Plus button to add a new channel or start a DM.
Channels and dms are separate arrays so their display rules stay independent. Muting a channel with VolumeX instead of hiding it is the distinction between quiet and gone.
Reach for this block as the left rail of a full-page chat shell, wired to your channel and DM list endpoints and your WebSocket for presence updates. Pair it with a message thread or DM thread panel in the main content column.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the Slack-style workspace nav rail. Other sidebar shapes:
Tip: bold the channel name for unread and show the count badge; both signals together are clearer than either alone.