# Navbar 2

> navbar

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/navbar-2).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/navbar-2
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/navbar-2/light.png
- Registry item: https://blocks.cnippet.dev/r/navbar-2.json
- Categories: navbar
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/navbar-2.json
```

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

## Dependencies

- npm packages: `lucide-react`
- Registry items: `@cnippet/badge`, `@cnippet/button`

## Files

### `registry/default/sections/navbar-2.tsx`

```tsx
"use client";

import { Menu } from "lucide-react";
import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

export default function Component() {
  const navItems = [
    { href: "#product", label: "Product" },
    { href: "#solutions", label: "Solutions" },
    { href: "#resources", label: "Resources" },
    { href: "#pricing", label: "Pricing" },
  ];

  return (
    <nav className="w-full bg-white py-4 md:py-6 dark:bg-background">
      <div className="mx-auto max-w-6xl px-4">
        <div className="flex items-center justify-between">
          {/* Logo & Badge */}
          <div className="flex items-center gap-3">
            <Link
              className="font-medium text-gray-900 text-lg dark:text-gray-100"
              href="/"
            >
              Beam
            </Link>
            <Badge className="hidden bg-violet-100 text-violet-700 text-xs sm:inline-flex dark:bg-violet-900/30 dark:text-violet-300">
              v2.0
            </Badge>
          </div>

          {/* Desktop Navigation */}
          <div className="hidden items-center gap-8 lg:flex">
            {navItems.map((item) => (
              <Link
                className="text-gray-600 text-sm transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
                href={item.href}
                key={item.label}
              >
                {item.label}
              </Link>
            ))}
          </div>

          {/* Actions */}
          <div className="flex items-center gap-3">
            <Button
              className="hidden text-gray-600 text-sm hover:bg-gray-100 hover:text-gray-900 lg:inline-flex dark:text-gray-400 dark:hover:bg-neutral-800 dark:hover:text-gray-100"
              size="sm"
              variant="ghost"
            >
              Sign In
            </Button>
            <Button
              className="bg-violet-600 text-sm shadow-sm hover:bg-violet-700 dark:bg-violet-600 dark:hover:bg-violet-700"
              size="sm"
            >
              Get Started
            </Button>
            <Button className="lg:hidden" size="sm" variant="outline">
              <Menu className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </div>
    </nav>
  );
}
```