A documentation navbar: logo with a version picker, a search field with a keyboard hint that opens a command palette, Docs, API and Changelog links and a theme button; a menu sheet on a phone.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/navbar-05.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Usage
This block is a section, not a page. Import it where you want it, alongside your other sections.
import { Navbar05 } from '@/components/navbar-05/navbar-05'
export default function Page() {
return (
<main>
<Navbar05 />
</main>
)
}Files
What the command adds to your project, and where.
components/navbar-05/navbar-05.tsxThe section. Import it into any page and render it; it fills the width of its parent.
It also installs the components it is built from, unless you already have them: Button, Command, Kbd, Select, Sheet.
The block uses one accent colour. Installing adds a --brand variable to your global CSS (an existing one is left alone); change it to match your product.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in Navbar
- Navbar 01A standard marketing navbar: logo, four links, Sign in and a primary button; sticky with a hairline that appears on scroll, and a full-screen menu sheet on a phone.
- Navbar 02A navbar with a mega menu: Product and Resources open panels of grouped links with descriptions and a featured card, and collapse to accordion sections in a sheet on a phone.
- Navbar 03A dismissible announcement bar above a centred-logo navbar with links either side and a search field that opens a command palette on ⌘K.
- Navbar 04A floating pill navbar, detached and centred below the top edge, that hides on scroll down and returns on scroll up; on a phone the pill grows into a dropdown panel.