shadcn.io is not affiliated with official shadcn/ui
Landing Page Navbar Block for React
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 Base 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 render the link they're given with render, with nativeButton={false}.
Related
- Pro
Scroll Spy Navbar
Link highlightsA navbar whose current link follows the section in view in a framed scrolling page preview, with a 1-pixel stroke that slides to it and links that scroll to their section.
- 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
Sticky Blur Navbar
Surface and themeA navbar stuck to the top of a scrolling page preview: clear at rest, frosted with a hairline once the page moves under it, with a sheet menu on phones.
- 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
Animated Underline Navbar
Link highlightsA one-bar navbar for a design studio whose links draw a hairline underline in from the inline start on hover and focus and retract it toward the end, with the current page keeping its full line, using nothing but a CSS transform.
- 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.