MiniDev UI

Floating Nav

A sticky marketing navbar that tucks into a floating pill after you scroll, with a hover highlight that glides between links and an animated mobile menu.

src/registry/blocks/floating-nav.tsx/r/floating-nav.json

Installation#

bash
npx shadcn@latest add https://ui.minidev.pro/r/floating-nav.json

Usage#

tsx
import { FloatingNav } from "@/components/ui/floating-nav"

export function Example() {
  return <FloatingNav />
}

API reference#

FloatingNav props
PropTypeDefault
brandReact.ReactNode( <span className="flex items-center ...
linksNavLink[]LINKS
cta{ label: string; href?: string; onClick?: () => void }{ label: "Start free" }
secondary{ label: string; href?: string } | null{ label: "Sign in", href: "#" }
classNamestring-

Dependencies#

npm

lucide-reactmotion

Built from

Button

Related navigation components#

Search Results PageA search results panel with a query input, result count and a list of hits, each showing a monospace item name, a tier badge and a one line summary.Back LinkSmall back navigation link with a left arrow icon, muted text that darkens on hover and a visible focus ring. Defaults to the label Back and accepts any href.Breadcrumb EllipsisEllipsis marker for collapsing the middle of long breadcrumb trails. Decorative and hidden from assistive tech, sized to sit between breadcrumb separators.BreadcrumbBreadcrumb navigation from an items array, with chevron separators, linked ancestors and the current page marked with aria-current. Built with React.Collapsible SidebarSidebar with a toggle button on its edge that collapses it to a narrow rail and expands it again. The button label updates for screen readers.Command ItemRow for command menus with a label, an optional keyboard shortcut in a kbd tag and an active highlight state. Use it to build custom command lists.
All navigation components