shadcn.io is not affiliated with official shadcn/ui
Announcement Pill Navbar Block for Vue
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 Vue with Ark 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.