# Navbar 4

> 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-4).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/navbar-4
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/navbar-4/light.png
- Registry item: https://blocks.cnippet.dev/r/navbar-4.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-4.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/button`

## Files

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

```tsx
"use client";

import { ChevronDown, Menu, X } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
import { Button } from "@/components/ui/button";

export default function Component() {
  const [isOpen, setIsOpen] = useState(false);

  const navItems = [
    { href: "#product", label: "Product" },
    { href: "#solutions", label: "Solutions" },
    { href: "#developers", label: "Developers" },
    { href: "#company", label: "Company" },
  ];

  return (
    <nav className="w-full bg-white dark:bg-background">
      <div className="mx-auto max-w-6xl px-4">
        <div className="flex h-16 items-center justify-between sm:h-20">
          {/* Logo */}
          <Link
            className="font-medium text-gray-900 text-lg dark:text-gray-100"
            href="/"
          >
            Beam
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden items-center gap-8 lg:flex">
            {navItems.map((item) => (
              <div className="group relative" key={item.label}>
                <Link
                  className="flex items-center gap-1 text-gray-600 text-sm transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
                  href={item.href}
                >
                  {item.label}
                  <ChevronDown className="h-3 w-3 transition-transform group-hover:rotate-180" />
                </Link>
              </div>
            ))}
          </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="hidden bg-violet-600 text-sm hover:bg-violet-700 lg:inline-flex dark:bg-violet-600 dark:hover:bg-violet-700"
              size="sm"
            >
              Get Started
            </Button>
            <Button
              className="lg:hidden"
              onClick={() => setIsOpen(!isOpen)}
              size="icon"
              variant="ghost"
            >
              {isOpen ? (
                <X className="h-5 w-5" />
              ) : (
                <Menu className="h-5 w-5" />
              )}
            </Button>
          </div>
        </div>

        {/* Mobile Menu */}
        {isOpen && (
          <div className="border-gray-200 border-t py-4 lg:hidden dark:border-neutral-700">
            <div className="flex flex-col gap-4">
              {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 className="flex flex-col gap-2 border-gray-200 border-t pt-4 dark:border-neutral-700">
                <Button
                  className="w-full justify-start text-gray-600 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-neutral-800 dark:hover:text-gray-100"
                  variant="ghost"
                >
                  Sign In
                </Button>
                <Button
                  className="w-full bg-violet-600 text-sm hover:bg-violet-700 dark:bg-violet-600 dark:hover:bg-violet-700"
                  size="sm"
                >
                  Get Started
                </Button>
              </div>
            </div>
          </div>
        )}
      </div>
    </nav>
  );
}
```