Floating NavPro

A site header as one pill: a highlight glides along the menu, one panel reshapes from menu to menu, and search widens out of its button.

Installation

When to use

The header of a marketing site or a product's landing page, with a few menus of links and a search.
When the header is the first thing people touch and should feel finished: every hover and click moves smoothly.

When not to use

Inside an app, where people work: a sidebar or a plain top bar stays out of the way.
Deep menus several levels down: a mega menu page or a sidebar holds them better.

Usage

Floating Nav with your own data: a whole component you can paste as a page.

example.tsx

1"use client"
2
3import { FloatingNav } from "@/components/dashral/pro/floating-nav"
4
5const items = [
6  {
7    label: "Product",
8    links: [
9      { label: "Planning", description: "Roadmaps and cycles", href: "/planning" },
10      { label: "Automations", description: "Rules that sort and assign", href: "/automations" },
11    ],
12  },
13  { label: "Pricing", href: "/pricing" },
14]
15
16export default function Header() {
17  return (
18    // A header: it stays at the top while the page scrolls under it.
19    <div className="sticky top-4 z-40 flex justify-center px-4">
20      <FloatingNav
21        brand={<span>Acme</span>}
22        items={items}
23        search={{ placeholder: "Search Acme", suggestions: [{ label: "Pricing", description: "Plans and prices", group: "Company", href: "/pricing" }] }}
24        actions={<a href="/signup" className="rounded-full bg-foreground px-4 py-2 text-sm text-background">Start free</a>}
25      />
26    </div>
27  )
28}

API reference

FloatingNav

A site header as one pill: a highlight glides along its menu, a menu's links open in a panel that reshapes from one menu to the next, and the search button widens into the search panel (the menu button too, on a phone).

Prop	Type	Default
`brand`	`React.ReactNode` Required. The logo and name at the start; a link to `brandHref`.	—
`brandHref`	`string`	`"/"`
`items`	`FloatingNavItem[]` Required.	—
`actions`	`React.ReactNode` At the end: a call to action, Sign in…	—
`search`	`{ suggestions: FloatingNavSuggestion[]; placeholder?: string; title?: string }` Search: its suggestions (filtered as you type) and placeholder. Left out, there's no search button.	—
`linkAs`	`React.ElementType` The link component (Next.js's Link, your router's): `a` by default.	`"a"`
`className`	`string`	—
`classNames`	`FloatingNavClassNames`	—

type FloatingNavLink

Prop	Type	Default
`label`	`string`	—
`description`	`string`	—
`icon`	`React.ReactNode`	—
`href`	`string`	—

type FloatingNavItem

A menu entry: a plain link (href), or a menu whose links open in the panel.

Prop	Type	Default
`label`	`string`	—
`href`	`string`	—
`links`	`FloatingNavLink[]`	—

type FloatingNavSuggestion

Prop	Type	Default
`label`	`string`	—
`description`	`string`	—
`icon`	`React.ReactNode`	—
`group`	`string`	—
`href`	`string`	—

type FloatingNavClassNames

Prop	Type	Default
`root`	`string`	—
`bar`	`string`	—
`panel`	`string`	—
`search`	`string`	—

Keyboard

Keys	Action
`⌘K`or`Ctrl K`	Open the search, from anywhere on the page
`Tab`	Reach the header
`←`or`→`	Along the bar, past every menu and button
`↓`	On a menu: open its panel at the first link
`↑`or`↓`or`←`or`→`	In a menu's panel: between links; past an edge, on to what's beside it on the bar
`↑`or`↓`	In the search: through the results
`Enter`	Open the result or link
`Esc`	Close the panel or the search, the focus back where it was

Accessibility

A nav named "Main"; each menu button says whether its panel is open (aria-expanded).
The search and the phone's menu are dialogs (aria-modal) named Search and Menu; the bar's own content is hidden from screen readers while one is open.
Closing returns the focus to the button that opened it.

Motion

A highlight glides along the menu; one panel reshapes and slides from menu to menu in the direction you move.
The search widens out of its button to the bar's own width (0.42 s) while the bar's content steps back (fading, to 97%, a 2px blur), and shrinks back on close.
Smooth tweens on [0.4, 0, 0.2, 1], never springs. With reduced motion there are no slides or growth, only short fades.