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.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
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.