# Navbar 8

> Navbar 8 variant for block.

A shadcn/ui block from the [@uiable](https://uiable.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiable/block-navbar-8).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-navbar-8
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-navbar-8-light-8481cae0ad78a4d6.png
- Registry item: https://uiable.com/r/block-navbar-8.json
- Categories: navbar
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-navbar-8.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: `@uiable/button`

## Files

### `src/components/uiable/blocks/navbar/navbar-8/navbar-8.tsx`

```tsx
"use client"

import { useState } from "react"

// next
import Link from "next/link"
import { usePathname } from "next/navigation"

// shadcn
import { Button } from "@/components/ui/button"

// project-imports
import Logo from "@/images/landings/AiDarkLogo"

// assets
import { Menu, X } from "lucide-react"

const navLinks = [
  { href: "/", label: "Home" },
  { href: "/features", label: "Features" },
  { href: "/pricing", label: "Pricing" },
  { href: "/resources", label: "Resources" },
]

export default function Navbar8() {
  const [isOpen, setIsOpen] = useState(false)
  const pathname = usePathname()

  return (
    <nav className="dark absolute top-0 right-0 left-0 z-50 w-full border-b border-white/5 bg-slate-950/80 text-white backdrop-blur-2xl lg:fixed">
      <div className="container mx-auto flex items-center justify-between px-8 py-6">
        <div className="dark flex cursor-pointer items-center gap-2">
          <Link href="/">
            <Logo />
          </Link>
        </div>

        {/* Desktop links */}
        <div className="hidden items-center gap-2 text-sm font-medium lg:flex">
          {navLinks.map((link) => {
            const isActive = pathname === link.href
            return (
              <Link
                key={link.href}
                href={link.href}
                className={`rounded-full px-4 py-2 transition-all duration-300 ${
                  isActive
                    ? "bg-white/10 text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]"
                    : "text-gray-400 hover:bg-white/5 hover:text-white"
                }`}
              >
                {link.label}
              </Link>
            )
          })}
        </div>

        {/* Right CTA */}
        <div className="hidden items-center gap-4 lg:flex">
          <Link
            href="/login"
            target="_blank"
            className="text-sm font-medium text-gray-300 transition-colors hover:text-white"
          >
            Sign In
          </Link>
          <Link href="/register" target="_blank">
            <Button className="rounded-full bg-white text-black hover:bg-gray-200">
              Get Started Free
            </Button>
          </Link>
        </div>

        {/* Mobile hamburger */}
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="relative flex h-10 w-10 items-center justify-center rounded-lg text-gray-300 transition-colors hover:bg-white/10 hover:text-white lg:hidden"
          aria-label="Toggle menu"
        >
          <Menu
            className={`absolute h-5 w-5 transition-all duration-300 ${isOpen ? "scale-75 rotate-90 opacity-0" : "scale-100 rotate-0 opacity-100"}`}
          />
          <X
            className={`absolute h-5 w-5 transition-all duration-300 ${isOpen ? "scale-100 rotate-0 opacity-100" : "scale-75 -rotate-90 opacity-0"}`}
          />
        </button>
      </div>

      {/* Mobile menu */}
      <div
        className={`overflow-hidden transition-all duration-300 ease-in-out lg:hidden ${isOpen ? "max-h-max opacity-100" : "max-h-0 opacity-0"}`}
      >
        <div className="container mx-auto flex flex-col gap-4 border-t border-white/5 px-8 pt-4 pb-6">
          {navLinks.map((link) => {
            const isActive = pathname === link.href
            return (
              <Link
                key={link.href}
                href={link.href}
                onClick={() => setIsOpen(false)}
                className={`rounded-lg px-4 py-2 text-sm font-medium transition-all duration-300 ${
                  isActive
                    ? "bg-white/10 text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]"
                    : "text-gray-400 hover:bg-white/5 hover:text-white"
                }`}
              >
                {link.label}
              </Link>
            )
          })}
          <div className="grid grid-cols-2 gap-4">
            <Link
              href="/login"
              target="_blank"
              onClick={() => setIsOpen(false)}
              className="block rounded-full bg-white/10 px-4 py-2 text-center text-sm font-semibold text-white transition-colors hover:bg-white hover:text-black"
            >
              Sign In
            </Link>
            <Link
              href="/register"
              target="_blank"
              onClick={() => setIsOpen(false)}
            >
              <Button className="w-full rounded-full border-none bg-white font-semibold text-black hover:bg-gray-200">
                Get Started Free
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </nav>
  )
}
```

### `src/images/landings/AiDarkLogo.tsx`

```tsx
export default function AiDarkLogo({ className = "" }: { className?: string }) {
  return (
    <div className={`group flex items-center gap-2.5 ${className}`}>
      {/* AI Neural Spark Icon */}
      <div className="relative flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 p-[1px] transition-all duration-300 group-hover:scale-105 group-hover:shadow-[0_0_20px_rgba(168,85,247,0.5)]">
        <div className="flex h-full w-full items-center justify-center rounded-[11px] bg-slate-950">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            className="h-4.5 w-4.5 transition-transform duration-300 group-hover:rotate-12"
            xmlns="http://www.w3.org/2000/svg"
          >
            {/* 4-Point Radiant AI Spark */}
            <path
              d="M12 2C12 7.52 7.52 12 2 12C7.52 12 12 16.48 12 22C12 16.48 16.48 12 22 12C16.48 12 12 7.52 12 2Z"
              fill="url(#cortex-ai-dark-grad)"
            />
            {/* Center Core Glow */}
            <circle cx="12" cy="12" r="2.2" fill="#FFFFFF" fillOpacity="0.9" />
            {/* Satellite AI Nodes */}
            <circle cx="19" cy="5" r="1.5" fill="#38BDF8" />
            <circle cx="5" cy="19" r="1.2" fill="#F472B6" />
            <defs>
              <linearGradient
                id="cortex-ai-dark-grad"
                x1="2"
                y1="2"
                x2="22"
                y2="22"
                gradientUnits="userSpaceOnUse"
              >
                <stop stopColor="#818CF8" />
                <stop offset="0.5" stopColor="#C084FC" />
                <stop offset="1" stopColor="#F472B6" />
              </linearGradient>
            </defs>
          </svg>
        </div>
      </div>

      {/* Brand Name & AI Badge */}
      <div className="flex items-center gap-1.5">
        <span className="text-xl font-bold tracking-tight text-white">
          Cortex
        </span>
        <span className="rounded-md bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 px-1.5 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase shadow-[0_0_12px_rgba(168,85,247,0.35)]">
          AI
        </span>
      </div>
    </div>
  )
}
```