Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Navbar blocks

Pro

Pinned Message Chat Navbar Block for Radix UI

A conversation header for a team chat app: the channel name and member count, a one-line pinned message that cycles to the next pin when pressed, member avatars and Voice and Video call links with tooltips.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A navbar for a chat app in React with Radix UI. It is the header of one conversation in Quillhearth, a team chat app: a channel tile and the name "kitchen-crew" lead, the member count beside it, and under them one line, the channel's pinned message ("Pinned 1 of 3: Friday's menu is locked…"). Pressing the line shows the next pin, round to the first, and the three lines share one cell, so the bar never changes height however long a pin is: it truncates with an ellipsis. A hairline divides this half from the other: member avatars and the Voice and Video call links, named by tooltips. On a phone a back arrow replaces the tile, and the avatars and the member count give way. Nothing is sent or called: the links go to #. It's built from Avatar, Tooltip, Button and Guides. For chat, messaging and collaboration products whose pinned messages deserve to stay in view.

FAQ

How do I change the pinned messages?

Edit PINS at the top of the file: an id and the text of each. The line, its "Pinned 2 of 3" counter and the spoken sentence all derive from the list, so adding a fourth pin changes the counter to "of 4". Long text is cut with an ellipsis; the full sentence is the button's accessible name.

How does a screen reader hear the change?

The pin line is one button whose name is the whole sentence plus "Show the next pin". When you press it, a hidden status region (present from page load, empty until the first press) says the new pin, for example "Pinned 2 of 3: Deliveries move to the side door…". Focus stays on the button, so you can keep pressing it.

Why doesn't the bar change height when the pin changes?

All three pins are stacked in one grid cell and the two that aren't current are invisible, so the cell is always as wide and as tall as the widest and tallest pin. Nothing moves when you press.

How do the call links and tooltips work?

Voice call and Video call are links to # (point them at your call routes), each named by its own hidden text and a tooltip on hover and focus. Escape closes a tooltip; the two links share one tooltip provider.

How does it work on a phone?

Below sm the channel tile gives way to a back arrow link (named "Back to channels") and the member count disappears; below md the avatars go too. The pin line keeps the remaining width and truncates, and the two call links stay.

How does it sit on the page?

It's the page's first block: its + marks and rails line up with every block under it, and it draws no bottom border because the next block's top rule is its bottom edge. The tooltips open over the page.

All 100 navbar blocks