Marketing

Floating Navbar

Pronew

A pill navbar that gets out of the way on scroll and glides between links.

Components

Forms, overlays, navigation and data display. Every primitive is free, MIT-licensed and installed with the shadcn CLI, so the code lands in your repo and stays yours.

Accordion
Calendar
Combobox
Command
Sidebar

Blocks

Whole sections and screens — heroes, pricing, dashboards, sign-in — assembled from the same primitives. Copy one in and edit it like any other file.

Hero
Pricing
Dashboard
Login
FAQ

Pricing

One licence unlocks the Pro registry: every Pro component and block, installed with the same command and a key in components.json.

Free
Pro
Team

Installation

npx shadcn@latest add @blank-pro/floating-navbar

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import {
  FloatingNavbar,
  FloatingNavbarActions,
  FloatingNavbarBrand,
  FloatingNavbarItem,
  FloatingNavbarList,
} from "@/components/ui/floating-navbar"

<FloatingNavbar defaultValue="components">
  <FloatingNavbarBrand>Blank</FloatingNavbarBrand>
  <FloatingNavbarList>
    <FloatingNavbarItem value="components" asChild>
      <a href="/components">Components</a>
    </FloatingNavbarItem>
    <FloatingNavbarItem value="pricing" asChild>
      <a href="/pricing">Pricing</a>
    </FloatingNavbarItem>
  </FloatingNavbarList>
  <FloatingNavbarActions>
    <Button size="sm" shape="pill">Get Pro</Button>
  </FloatingNavbarActions>
</FloatingNavbar>

Scrolling down hides the bar, scrolling up brings it back, and once the page has scrolled it shrinks a touch. The active item wears a pill that glides to the next one. Under reduced motion the bar never hides or shrinks and the pill moves without a glide.

The bar is fixed to the viewport. To float it inside a scrolling panel, as the example does, pass that panel as containerRef and className="sticky". Items are buttons; asChild hands their styling to your own link.

Props

Prop	Type	Default
`value`	`string`	—
`defaultValue`	`string`	—
`onValueChange`	`(value) => void`	—
`hideOnScroll`	`boolean`	`true`
`scrollThreshold`	`number`	`24`
`position`	`"top" \| "bottom"`	`"top"`
`containerRef`	`RefObject`	—