# Navbar Section v4

> Fixed bottom centered dock nav with frosted pill container, hairline active indicator, responsive links, and primary CTA.

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

- Page, with a live preview: https://shadcn.exchange/r/uiception/navbar-section-v4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/navbar-section-v4-light-74431b2140bbacd3.png
- Registry item: https://uiception.com/r/navbar-section-v4.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiception.com/r/navbar-section-v4.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`

## Files

### `registry/new-york/blocks/navbar-section-v4/page.tsx`

```tsx
/* inspired by useghost.sh */

import LoremDemo from "./components/navbar-lorem-demo"
import NavbarSectionV4 from "./components/navbar-section-v4"

export default function Page() {
  return (
    <>
      <NavbarSectionV4 />
      <div className="pb-32 sm:pb-28">
        <LoremDemo />
      </div>
    </>
  )
}
```

### `registry/new-york/blocks/navbar-section-v4/components/navbar-section-v4.tsx`

```tsx
"use client"

import { useState } from "react"
import Link from "next/link"

import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

type NavItem = {
  label: string
  href: string
  external?: boolean
  signInSpacing?: boolean
}

const NAV_ITEMS: NavItem[] = [
  { label: "Home", href: "#" },
  { label: "Pricing", href: "#" },
  { label: "Docs", href: "#", external: true },
  { label: "Sign in", href: "#", signInSpacing: true },
]

const linkClass = cn(
  "relative shrink-0 rounded-full px-2 py-1.5 text-xs whitespace-nowrap text-muted-foreground transition-colors hover:text-foreground",

  "after:pointer-events-none after:absolute after:right-2 after:bottom-1 after:left-2 after:h-px after:bg-foreground after:opacity-0 after:transition-opacity sm:px-3 sm:text-sm sm:after:right-3 sm:after:-bottom-[5px] sm:after:left-3",
  "aria-[current=page]:text-foreground aria-[current=page]:after:opacity-100"
)

export default function NavbarSectionV4() {
  const [activeIndex, setActiveIndex] = useState(0)

  return (
    <nav
      aria-label="Primary"
      className={cn(
        "fixed left-1/2 z-40 flex justify-center",
        "-translate-x-1/2",
        "bottom-[max(0.75rem,env(safe-area-inset-bottom,0px))] w-[calc(100vw-1rem)] max-w-xl",
        "sm:bottom-6 sm:w-auto sm:max-w-none"
      )}
    >
      <div
        className={cn(
          "flex max-w-full flex-nowrap items-center gap-0.5 overflow-x-auto overscroll-x-contain rounded-full border border-foreground/10 bg-background/80 px-1 py-1 pb-2 pl-2 shadow-lg shadow-foreground/5 backdrop-blur",
          "touch-pan-x [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
          "sm:touch-auto sm:gap-1 sm:overflow-visible sm:p-1 sm:pb-1 sm:pl-3"
        )}
      >
        {NAV_ITEMS.map((item, i) => {
          const shared = cn(linkClass, item.signInSpacing && "ml-1 sm:ml-2")
          const handleClick = (e: { preventDefault: () => void }) => {
            if (!item.external) e.preventDefault()
            setActiveIndex(i)
          }
          if (item.external) {
            return (
              <a
                key={item.label}
                aria-current={activeIndex === i ? "page" : undefined}
                className={shared}
                href={item.href}
                rel="noreferrer"
                target="_blank"
                onClick={handleClick}
              >
                {item.label}
              </a>
            )
          }
          return (
            <a
              key={item.label}
              aria-current={activeIndex === i ? "page" : undefined}
              className={shared}
              href={item.href}
              onClick={handleClick}
            >
              {item.label}
            </a>
          )
        })}
        <Button
          asChild
          className="h-7 shrink-0 gap-1 rounded-full px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 sm:h-8 sm:px-3 sm:text-sm"
          size="sm"
        >
          <Link href="#" onClick={(e) => e.preventDefault()}>
            Get started
          </Link>
        </Button>
      </div>
    </nav>
  )
}
```

### `registry/new-york/blocks/navbar-section-v4/components/navbar-lorem-demo.tsx`

```tsx
import { Instrument_Serif } from "next/font/google"

const instrumentSerif = Instrument_Serif({
  subsets: ["latin"],
  weight: ["400"],
})

function Spacer({ size = "md" }: { size?: "sm" | "md" | "lg" | "xl" }) {
  const heights = { sm: "h-4", md: "h-8", lg: "h-16", xl: "h-28" }
  return <div className={heights[size]} />
}

function Block({ rows = 1 }: { rows?: number }) {
  return (
    <div className="space-y-2">
      {Array.from({ length: rows }, (_, i) => (
        <div key={i} className="h-3" />
      ))}
    </div>
  )
}

export default function NavbarLoremDemo() {
  return (
    <main className="px-4 py-4 md:py-6 lg:py-8">
      <article
        aria-label="Sample document preview"
        className="mx-auto w-full max-w-2xl rounded-none border border-border bg-card text-card-foreground shadow-sm"
      >
        <header className="px-8 py-8 pt-10 sm:px-10">
          <span className={`${instrumentSerif.className} text-2xl text-foreground`}>
            uiception.com
          </span>
        </header>

        <div className="px-8 py-12 sm:px-10">
          <Spacer size="xl" />
          <Block rows={3} />
          <Spacer size="xl" />
          <Block rows={3} />
          <Spacer size="xl" />
          <div className="grid grid-cols-3 gap-6">
            {[0, 1, 2].map((i) => (
              <Block key={i} rows={3} />
            ))}
          </div>
          <Spacer size="xl" />
          <Block rows={3} />
          <Spacer size="xl" />
          <Block rows={3} />
          <Spacer size="xl" />
        </div>
      </article>
    </main>
  )
}
```