Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Workspace Top Bar Banner Block for Radix UI

A top bar for a team workspace manager that says which workspace you are in, with your role as a badge and a Switch menu of workspaces behind a divider.

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 top bar for React with Radix UI, a line that tells you where you are before you act. Juniperwell's strip sits between the page's rails: an avatar with the workspace's initials, "You are in Harbor & Pine" with the name in medium weight, and an outline "Owner" badge. At the end, in a cell of its own behind a solid divider that meets the top rule with a plus, a ghost "Switch" button opens a menu with a radio list of three workspaces. Choosing one rewrites the line, the initials and the role (Admin in Lantern Row, Member in Tern Studio) and a polite status line says it. The three versions of the line share one grid cell, so the strip stays 44 pixels on a desktop and two lines at most on a phone. It is built from Guides, Avatar, Badge, Dropdown Menu and Button, and follows your theme. The workspace names belong to the customer; the product's name is the vendor's.

FAQ

Where do the workspaces and roles come from?

From WORKSPACES at the top of the file: an id, the initials for the avatar, the name and the visitor's role in it. Replace the list with your account's workspaces and call your own function in choose to switch the session. The line, the avatar and the badge are all drawn from the current item, so nothing else needs changing.

How does the menu work with the keyboard?

Tab reaches "Switch"; Enter, Space or the arrow keys open the menu, the arrow keys move between the three workspaces, typing jumps to one by its first letters, and Enter chooses it. Escape closes the menu and returns focus to the button. The list is a radio group, so the current workspace is marked and announced as selected. The exact details come from the library you chose.

Why doesn't the bar change size when I choose a workspace?

All three versions of the line are drawn in the same grid cell: the current one, and an invisible, inert copy of each, so the cell is always as big as the biggest. The divider cell stays at the end and the strip stays one line on a desktop whichever workspace is chosen.

What does a screen reader say after a switch?

A polite status line, present from load and empty until the first choice, says "Switched to Lantern Row. Your role is Admin." The avatar is decoration and hidden from assistive technology; the badge reads "Your role: Owner" as part of the sentence.

How does it fit on a phone?

Below 640 pixels the "Switch" button shrinks to its icon (its name is still "Switch workspace") so the sentence keeps the width, and the sentence and badge wrap to two lines at most at 320 pixels. The divider's plus mark is dropped on phones; the divider stays.

Does it work in right-to-left layouts?

Yes. The avatar and sentence start at the right, the divider and the "Switch" cell sit at the left, and the menu opens on the logical end side. The sentence is isolated in a bdi, so a name with an ampersand keeps its order.

All 100 banner blocks