# Navbar

> A top navigation bar with brand wordmark, a responsive link list, and sign-in / get-started actions.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/navbar).

- Page, with a live preview: https://shadcn.exchange/r/quill/navbar
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/navbar-light-02289abbcafae65a.png
- Registry item: https://www.quilldesignsystem.com/r/navbar.json
- Categories: navigation
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/navbar.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `button`, `https://www.quilldesignsystem.com/r/icon.json`

## Notes from the registry

A top navigation bar with brand wordmark, a responsive link list, and sign-in / get-started actions. Do: Keep "Get started" as the one default-variant (primary) button; "Sign in" stays ghost so it doesn't compete. Don't: Style both actions as equally prominent primary buttons. Use sidebar-nav when primary navigation belongs in a persistent side rail for an app, not a top bar for a marketing site. Use command-palette when navigation is keyboard-driven and searchable, not a fixed row of links.

## Files

### `registry/blocks/navbar.tsx`

```tsx
import { Button } from '@/components/ui/button'
import { Icon } from '@/components/ui/icon'

const links = ['Product', 'Solutions', 'Pricing', 'Docs']

/** A top navigation bar with brand wordmark, a responsive link list, and sign-in / get-started actions. */
export function Navbar() {
  return (
    <nav className="flex h-14 w-full items-center gap-6 border-b border-border bg-background px-6 text-foreground">
      <span className="font-heading text-lg">Quill</span>
      <ul className="hidden flex-1 items-center gap-1 md:flex">
        {links.map((l) => (
          <li key={l}>
            <a
              href="#"
              className="rounded-lg px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground outline-hidden focus-visible:ring-3 focus-visible:ring-ring/50"
            >
              {l}
            </a>
          </li>
        ))}
      </ul>
      <div className="ml-auto flex items-center gap-2">
        <Button variant="ghost" size="sm">
          Sign in
        </Button>
        <Button size="sm">
          Get started <Icon name="arrow_forward" size={16} />
        </Button>
      </div>
    </nav>
  )
}
```