Floating Nav
A floating glass navigation bar. Its icons open into labels on hover or focus, the item for the section on screen is highlighted, and an item can open a menu whose entries preview a clip or a still beside it. It stays icon-only on a phone and takes your actions, such as a theme toggle, beside it.
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | FloatingNavItem[] | — | id, label, icon, and an optional href and menu. The id is also the page section it scrolls to. |
| activeId | string | — | The highlighted item. Unset, it follows the section under the top third of the screen. |
| onNavigate | (item) => boolean | void | — | Called when an item is chosen. Return true to handle it yourself. |
| actions | ReactNode | — | Beside the bar: a theme toggle, a call to action. |
| position | "fixed" | "absolute" | "fixed" | Fixed to the top of the screen, or placed in a positioned container. |
| menu.groups[].entries[] | { key, name, href, external?, preview?, caption? } | — | A menu line. preview is { video, poster? } or { image }; caption is two short notes under it. |
| className | string | — | Classes for the root element. |