Navbar Floating

An inset navbar with a bordered surface and shadow.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/navbar-floating.json

Usage

tsx

import { NavbarFloating } from "@/components/hangry-ui/blocks/navbar-floating";

<NavbarFloating
  brand="Acme"
  badge=""
  activeHref="#components"
  links={[
    { label: "Home", href: "#home" },
    { label: "Components", href: "#components" },
    { label: "Blocks", href: "#blocks" },
    { label: "Shaders", href: "#shaders" },
    { label: "Sponsor", href: "#sponsor" },
    { label: "Privacy", href: "#privacy" },
  ]}
  githubHref="#github"
  supportHref="#sponsor"
/>

Sample navigation

The default page labels match the main footer: Home, Components, Blocks, Shaders, Sponsor, and Privacy. Fragment URLs keep the demo on the current page. Replace them with your own routes when using the block.