shadcn.io is not affiliated with official shadcn/ui
SaaS Marketing Navbar Block for Svelte
A 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.
Installation
Overview
A marketing navbar for Svelte with Ark UI, the bar that opens a product's site. The wordmark leads; a Product menu opens a panel of four product areas, each with an icon on a small tile and one line on what it does; Customers, Pricing and Docs follow as plain links, the current page marked by a foreground stroke that lies on the bar's bottom edge; Sign in and a Start free Shine Button close the row. 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, its header lined up with the bar. The panel and the sheet open over the page, so the block stays one bar high (64 pixels, 56 on a phone). The page's rails and top rule come from the Guides spine and the bar draws no bottom border: the next block's top rule is its bottom edge. It's built from Navigation Menu, Sheet, Guides, Shine Button and Button, with your theme's tokens for every colour. For SaaS and product sites whose header needs one menu of product areas and a sign-up that's always in reach.
FAQ
How do I change the menu and the links?
Edit PRODUCT at the top of the file for the panel (each area is a title, a one-line description, an icon and an href) and PAGES for the plain links. Both the bar and the phone sheet read them, so they never drift apart. Four areas fill the panel's two columns; keep the descriptions to one short clause. Mark the page you're on with current: true, or compute it from your router (an area's href against the current path): that link gets aria-current="page", which draws the stroke on the bar and tints the row in the sheet, and a screen reader announces it as the current page.
How does it work with a keyboard and a screen reader?
The links sit in a nav landmark named Main, after the wordmark (a link home). Tab reaches the wordmark, Product, each link, Sign in and Start free. Enter or Space opens the Product menu, its button says whether it's expanded, and Escape closes it and puts focus back on Product.
Opening the menu moves focus to the first product area; Tab walks the four and carries on to Customers, and the menu closes as focus leaves it. The menu opens on click, not on hover.
How does it work on a phone?
Below the md breakpoint the wordmark, Start free and a menu button stay on the bar, and nothing wraps at 320 pixels. The menu button says whether the menu is open and which panel it controls; it opens a sheet from the top whose header lines up with the bar (the wordmark where it was, the close button where the menu button was), then the four product areas with their descriptions, the links with the current page tinted, and Sign in and Start free. Focus moves into the sheet and stays there; Escape, the close button or choosing a link closes it, and focus goes back to the menu button. A sheet taller than the screen scrolls.
Does choosing a link close the menu?
Yes, in the panel and in the sheet, so a client-side route change that keeps the navbar mounted doesn't leave a menu open over the new page.
The Product menu's open state is held in the block (menuOpen), and each product link closes it.
The sheet's open state is held in the block too (sheetOpen), and each of its links closes it. Every link points at #: point them at your pages.
Sign in's and Start free's asChild receive their props: spread them onto your router's link.
How does it sit on the page, and can it stick to the top?
The navbar is the page's first block: its + marks and rails line up with every block under it, its top rule falls on the window's top edge (or between it and a banner above it), and it draws no bottom border, because the next block's top rule is its bottom edge. The panel opens over the page under the bar, so the page below doesn't move. To keep the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header; the menu still opens under it.
What moves, and what happens with reduced motion?
Nothing moves on load: the navbar is chrome and is simply there. The panel opens with the menu's own fade, the chevron turns, the sheet slides down from the top, and a band of light sweeps across Start free once on hover and keyboard focus. With reduced motion the chevron turns at once, the sheet appears without sliding and the light fades in where it stands. The panel also appears without its fade.