shadcn.io is not affiliated with official shadcn/ui
Landing Page Navbar Block for Ark UI
A 64 px navbar built for a landing page: a skip link that appears on keyboard focus, in-page links that jump to the page's sections, the chosen section marked by a stroke on the bar's edge, a Log in link and a Shine Button, with a sheet on phones.
Installation
Overview
A navbar for React with Ark UI for a one-page site. The first thing a keyboard user reaches is a skip link that appears at the top of the window on focus and jumps past the bar to the page's content. Then the wordmark, four in-page links (Features, Pricing, Testimonials and FAQ) that jump to those sections, a Log in link and a Get started free Shine Button. A link you choose is marked as the current location, with aria-current="location", a heavier label and a foreground stroke on the bar's bottom edge that lies over the next block's top rule, so the mark isn't colour alone. The links are plain anchors to #features, #pricing, #testimonials and #faq: give each section its id and scroll-mt-20 so the bar never covers its heading when the page jumps. Below the md breakpoint the links fold into a menu button that opens a sheet from the top with the same links and both actions. The bar is 64 pixels high, draws no bottom border and takes its rails and top rule from the Guides spine. It's built from Skip Nav, Sheet, Guides, Shine Button and Button, with your theme's tokens for every colour. For landing pages and marketing one-pagers.
FAQ
How do I point the links at my sections?
Edit SECTIONS at the top of the file: each entry is an id and a label, and the link is #id. Give the section element the same id and scroll-mt-20 (the bar is h-16, so 5rem clears it with a little air); if you make the bar sticky, that margin is what keeps each heading in view after a jump. For smooth jumps add motion-safe:scroll-smooth to html, so reduced motion jumps instantly.
How does the skip link work?
It's the Skip Nav link, the first focusable thing on the page: hidden until it takes focus, then a button-shaped link in the window's top corner that jumps to #main-content. Wrap your page's main content in the Skip Nav content part (or give any element id="main-content" and tabindex="-1") so there's something to land on. Its colours are the theme's foreground and background, not the primary colour.
Why is the current link a location, not a page?
The links jump within one page, so the right token is aria-current="location": a screen reader announces the chosen link as the current location. The demo sets it from your click and starts on Features; for a live scroll-spy that follows the page, set current from an IntersectionObserver over your sections instead. Choosing a link doesn't prevent the browser's jump.
How does it work with a keyboard and a screen reader?
The links sit in a nav landmark named Main, after the skip link and the wordmark (a link home). Tab walks the skip link, the wordmark, the four links, Log in and Get started free; links take a focus ring and a tint, the same as hover.
How does it work on a phone?
Below the md breakpoint the wordmark and a menu button stay on the bar (Get started free too, from sm) and nothing wraps at 320 pixels. The menu button opens a sheet from the top whose header lines up with the bar, then the links, the chosen one tinted with a dot, and Log in and Get started free as a pair. Choosing a link jumps to its section and closes the sheet; so do Escape and the close button, and focus goes back to the menu button.
Log in and Get started free take asChild with the link inside, so either can be your router's link.