Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Top Bar Tab Switch Banner Block for Ark UI

A segmented control in a slim bar whose choice rewrites a one-line summary beside it.

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 section switch for React with Ark UI, the strip at the top of a hub that lets you flip between views. For Velvetlane, a project hub, a segmented control of four sections (Overview, Changelog, Roadmap and Status) sits on a rounded track at the start, with a thumb that slides under the chosen one. At the end, one line summarises that section: "Overview: 3 projects in progress", "Roadmap: 12 items planned", "Status: all 6 services running". The four summaries share one grid cell so the strip stays 44 pixels tall whichever shows, and a polite status line speaks the new summary when you change the choice. The control is a radio group: Tab reaches it once and the arrow keys move through the sections. On a phone the summary drops under the control. It's built from Segment Group and Guides and your theme's tokens for every colour, and it follows the theme. For dashboards, project pages and settings screens that switch a view in place rather than going to another page.

FAQ

How do I change the sections and what they say?

Edit SECTIONS at the top of the file: an id, a label and the summary shown after the name. The summary is plain text, so it's where you put a live figure from your data; keep it to about 30 characters so it stays on one line beside the control on a desktop. To switch a real view, read the chosen state where you render the panel below the bar.

When should I use the nav links strip instead?

Use this one when the choice changes a view on the same page, like a filter or a mode. Use Top Bar Nav Links when each choice is a page of its own: it renders real anchors in a nav with aria-current, where this renders a radio group with a sliding thumb.

How do screen readers learn about the change?

A polite status line is present from the start and empty; choosing a section fills it with that section's sentence ("Roadmap: 12 items planned"), so it's announced once per change. The visible summaries are stacked in one cell, and only the current one is exposed to screen readers.

How does the keyboard work?

The segments are a radio group: Tab lands on the chosen one, the arrow keys move the choice (and the summary follows it) and the thumb slides with a CSS transition that reduced motion turns off. The focus ring is drawn on the segment itself.

How does it fit at 320 pixels?

The control tightens its padding and uses a smaller type size, so all four segments fit in the 256 pixels the strip leaves; the summary takes the second line, so the strip is about 70 pixels tall. In a right-to-left page the segments and the thumb mirror.

All 100 banner blocks