shadcn.io is not affiliated with official shadcn/ui
Minimal Navbar Block for Solid
The least navbar there is: a slim 48 px bar with a wordmark, three plain links and one Shine Button for a journaling app, with no motion, the current page marked by weight and a dot, and a bottom drawer on phones.
Installation
Overview
A navbar for Solid with Ark UI that does as little as a navbar can. The wordmark sits at the start, three links (Features, Privacy and Pricing) follow in small, muted text, and a Get the app Shine Button closes the row. Nothing moves and nothing is measured: a link darkens on hover and focus, and the page you're on has a heavier label with a small dot before it, with aria-current="page", so it isn't marked by colour alone. Below the md breakpoint the links fold into a menu button that opens a drawer from the bottom with the three links. The bar is 48 pixels high, draws no bottom border and takes its rails and top rule from the Guides spine. It has no state of its own, so it's a server component (the drawer keeps its own). It's built from Drawer, Guides, Shine Button and Button, with your theme's tokens for every colour. For apps, tools and single-purpose sites whose navigation is three links and one action.
FAQ
How do I change the links and the current page?
Edit PAGES at the top of the file: each entry is a label, an href and, for the page you're on, current: true. The bar and the drawer both read it. With a router, compute current from the path in a server component or pass it in; the dot, the heavier label and aria-current="page" follow. Three links is the design: with more, use a bar that has a menu.
Why is it a server component?
Nothing in the bar needs state, effects or event handlers: the links are plain anchors and the drawer owns its open state, so the file has no "use client" and ships no script of its own beyond the catalog's Drawer and Shine Button, which are client components. If you add something that needs state, add the directive.
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 walks the wordmark, the three links and Get the app, and on a phone the menu button; a link takes a focus ring, and the current page is announced as the current page.
How does it work on a phone?
Below the md breakpoint Get the app and a menu button stay on the bar next to the wordmark, and nothing wraps at 320 pixels. The menu button opens a drawer from the bottom: a handle, a Menu title and the three links, the current page tinted with a dot. Drag it down, press Escape, tap the overlay or choose a link to close it; focus goes back to the menu button.
The drawer's handle is Ark's grabber; each link is wrapped in the drawer's close part with asChild.
Get the app's asChild receives its props: spread it onto your router's link.
What happens with reduced motion?
Nothing in the bar moves, so there's nothing to reduce. The drawer opens without sliding and the band of light on Get the app fades in where it stands instead of sweeping.
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, and it draws no bottom border, because the next block's top rule is its bottom edge. To keep it in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header.