# Navbar 10

> Navbar 10 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-10).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-navbar-10
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-navbar-10-light-a0496ae841a8515c.png
- Registry item: https://uiable.com/r/block-navbar-10.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-10.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: `framer-motion`, `lucide-react`

## Files

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

```tsx
"use client"

import { useState } from "react"

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

// third-party
import { motion, AnimatePresence } from "framer-motion"

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

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

export default function Navbar10() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const pathname = usePathname()

  const links = [
    { label: "Home", href: "#" },
    { label: "About", href: "#" },
    { label: "Features", href: "#" },
    { label: "Testimonial", href: "#" },
    { label: "Contact", href: "#" },
  ]

  const isActive = (href: string) => {
    if (href === "/") {
      return pathname === "/"
    }
    return pathname.startsWith(href)
  }

  return (
    <>
      <div className="fixed inset-x-0 top-0 z-50">
        <header className="z-50 container mx-auto w-full px-4 py-4 lg:px-0">
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="flex h-16 items-center justify-between rounded-full border border-teal-100/50 bg-[#fcfefd]/70 px-6 shadow-md backdrop-blur-xl"
          >
            {/* Logo */}
            <Link href="####" className="group flex items-center gap-2">
              <Logo />
            </Link>

            {/* Desktop Navigation Links */}
            <nav className="hidden items-center gap-8 text-sm font-semibold text-slate-600 lg:flex">
              {links.map((link) => (
                <Link
                  key={link.label}
                  href={link.href}
                  className={`group relative py-1 transition-colors hover:text-teal-900 ${
                    isActive(link.href) ? "font-bold text-teal-900" : ""
                  }`}
                >
                  {link.label}
                  <span
                    className={`absolute inset-x-0 bottom-0 h-[2px] scale-x-0 bg-teal-600 transition-all duration-300 ${
                      isActive(link.href)
                        ? "scale-x-100"
                        : "scale-x-0 group-hover:scale-x-100"
                    }`}
                  />
                </Link>
              ))}
            </nav>

            {/* Action Buttons */}
            <div className="hidden items-center gap-4 lg:flex">
              <Link
                href="#"
                className="text-sm font-semibold text-slate-600 transition-colors hover:text-teal-950"
              >
                Sign in
              </Link>
              <Link
                href="#"
                className="inline-flex h-10 shrink-0 items-center justify-center rounded-full bg-teal-700 px-6 text-sm font-semibold text-white shadow-lg shadow-teal-700/10 transition-all duration-200 hover:bg-teal-800"
              >
                Get Started
              </Link>
            </div>

            {/* Mobile Menu Open Trigger */}
            <button
              onClick={() => setMobileMenuOpen(true)}
              className="flex h-10 w-10 items-center justify-center rounded-full border border-slate-200 bg-white shadow-sm transition hover:bg-slate-50 lg:hidden"
              aria-label="Open mobile menu"
            >
              <Menu className="h-5 w-5 text-slate-700" />
            </button>
          </motion.div>
        </header>
      </div>

      {/* Mobile Navigation Drawer */}
      <AnimatePresence>
        {mobileMenuOpen && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              onClick={() => setMobileMenuOpen(false)}
              className="fixed inset-0 z-50 bg-black/30 backdrop-blur-sm lg:hidden"
            />
            <motion.div
              initial={{ x: "100%" }}
              animate={{ x: 0 }}
              exit={{ x: "100%" }}
              transition={{ type: "spring", damping: 25, stiffness: 200 }}
              className="fixed top-0 right-0 z-50 h-full w-4/5 max-w-sm bg-white p-6 shadow-2xl lg:hidden"
            >
              <div className="mb-8 flex items-center justify-between">
                <Link
                  href="/"
                  onClick={() => setMobileMenuOpen(false)}
                  className="flex items-center gap-2"
                >
                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-teal-600 text-white">
                    <Shield className="h-4 w-4" />
                  </div>
                  <span className="text-lg font-bold text-teal-950">
                    Housiq
                  </span>
                </Link>
                <button
                  onClick={() => setMobileMenuOpen(false)}
                  className="flex h-8 w-8 items-center justify-center rounded-full border border-slate-100 text-slate-500 hover:bg-slate-100"
                  aria-label="Close menu"
                >
                  <X className="h-4 w-4" />
                </button>
              </div>

              <nav className="mb-8 flex flex-col gap-5 text-lg font-semibold text-slate-700">
                {links.map((link) => (
                  <Link
                    key={link.label}
                    href={link.href}
                    onClick={() => setMobileMenuOpen(false)}
                    className={`py-1 transition-colors hover:text-teal-950 ${
                      isActive(link.href) ? "font-bold text-teal-950" : ""
                    }`}
                  >
                    {link.label}
                  </Link>
                ))}
              </nav>

              <div className="flex flex-col gap-4 border-t border-slate-100 pt-6">
                <Link
                  href="/sign-in"
                  onClick={() => setMobileMenuOpen(false)}
                  className="py-2 text-center font-semibold text-slate-600 hover:text-teal-950"
                >
                  Sign in
                </Link>
                <Link
                  href="/sign-in"
                  onClick={() => setMobileMenuOpen(false)}
                  className="inline-flex items-center justify-center rounded-full bg-teal-700 py-3 text-center text-sm font-semibold text-white transition-all duration-200 hover:bg-teal-800"
                >
                  Get Started
                </Link>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </>
  )
}
```

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

```tsx
export default function LightLogo() {
  return (
    <div className="group flex items-center gap-2.5">
      {/* Modern Wordmark */}
      <div className="flex items-center">
        <span className="text-2xl font-black tracking-tighter text-foreground">
          Housiq
        </span>
      </div>
    </div>
  )
}
```