shadcn.io is not affiliated with official shadcn/ui
Announcement Pill Navbar Block for React
A one-bar navbar for a design-handoff tool with its news inside the row: an Announcement pill between the links and the actions, moved to the top of the sheet on small screens.
Installation
Overview
A navbar for React with Base UI that carries one piece of news without a second row. The wordmark of Brindlemark, a design-handoff tool, leads; Product, Pricing and Docs follow as plain links with the current page marked by a stroke on the bar's bottom edge; and between the links and the actions sits an Announcement pill: a "New" badge, "Live handoff comments" and an arrow that turns around in right-to-left layouts. The pill is a link to the release, sits inside the bar's own row and has no dismiss button; Sign in and a Shine Button close the row. The pill shows from the lg breakpoint; below it, it moves to the top of the sheet that holds the links and both actions. The block follows the theme: no tinted strip, no second row, 64 pixels high (56 on a phone). It's built from Announcement, Badge, Navigation Menu, Sheet, Shine Button and Guides. For product sites with a launch worth a line but not a banner.
FAQ
How do I change the news?
Edit NEWS at the top: the badge word, the text and where it goes. Keep the text to a few words: the pill is max-w-full and truncates, but it's meant to be read at a glance. It's a link, so its words should say where it goes ("Live handoff comments", not "Learn more").
Why is there no dismiss, and how is this different from the top bar banner?
The top bar banner (banner-top-bar) is a tinted strip above the navbar that folds away when dismissed. Here the news is part of the bar, so there's nothing to fold: the pill is as permanent as the links, and you remove it by deleting the News element when the release is old. Use the banner when the message should disappear; use this when the bar can carry it.
How does it work with a keyboard and a screen reader?
Tab reaches the wordmark, the links, the pill, Sign in and Start free, in that order; the pill takes a visible focus ring. It's a plain link, so it announces as "New Live handoff comments", link. The links sit in a nav landmark named Main.
How does it work on a phone?
Below lg the pill leaves the bar, and below md so do the links and Sign in; Start free and a menu button stay. The menu button opens a sheet from the top, its header lined up with the bar (the wordmark where it was, the close button where the menu button was), with the pill first, then the links, then both actions. Choosing the pill or a link closes the sheet and focus goes back to the menu button.
Related
- Pro
SaaS Marketing Navbar
Mega menusA one-bar marketing navbar for a product roadmap tool: a wordmark, a Product menu of four areas with icons and one-line descriptions, plain links with the current page marked, Sign in and a Shine Button, and a sheet with the same links on phones.
- Pro
Top Bar Banner
Top barsA slim announcement strip for a writing app's release: one centred line with the version, the news and an underlined link, and a ghost button that folds the strip away.
- Pro
Dismissible Announcement Bar Hero
Updates and timelinesA showcase hero for a release planning tool: a dismissible announcement band, a headline beside the pitch, a Shine Button, a trust line and a framed sketch of a release board that runs off the bottom.
- Pro
Reverse Split News List Hero
Updates and timelinesA reverse split hero on drafting lines for a team docs workspace: a greyscale product illustration beside an announcement pill, the headline, a ruled list of the latest updates as links, a Shine Button and a second action.
- Pro
Waitlist Morph Startup Navbar
Calls to actionA one-bar navbar for a calendar assistant in beta: a Beta badge beside the wordmark, three plain links, and a Join the waitlist Shine Button that turns in place into an email field and then into a confirmation.
- Pro
New Feature Top Bar Banner
Top barsA top bar for a collaborative editor with an outline New chip, one line of news and a See it button that opens a popover preview of the feature, with a close at the end.