PillNav
pill-navRenders pill-shaped navigation with hover fill, inverted labels, and an active dot.
Usage
Basic usage
Input items and activeHref, activate the item to stay in the inverted state and light up the indicator dot.
<PillNav
items={[
{ href: "#home", label: "Home" },
{ href: "#features", label: "Features" },
{ href: "#pricing", label: "Pricing" },
{ href: "#docs", label: "Docs" },
]}
activeHref="#home"
/>With brand logo
The logo slot renders the circular logo on the left side. When hovering, the entire logo rotates in one circle.
<PillNav items={items} activeHref="#features" logo={<Mark />} />Close entrance animation
initialLoadAnimation={false} Skip the pop-up/expand animation for the first load.
<PillNav
items={items}
activeHref="#pricing"
logo={<Mark />}
initialLoadAnimation={false}
/>When to use
Use PillNav for lightweight CSS-only site navigation that can render directly in a server component, often beside a brand logo. Use GooeyNav for particle bursts, NavigationMenu or NavMenu for multilevel menus, or Navbar for structural header layout. Every item renders as an anchor, and activeHref matches by string.
Import
import { PillNav } from "@hulianui/ui"Props
Inherits Omit<HTMLAttributes<HTMLElement>, "children"> on the root nav.
| Name | Type | Default | Description |
|---|---|---|---|
| items* | PillNavItem[] | — | { href, label, ariaLabel? } entries rendered as pills. |
| activeHref | string | — | Exact href receiving persistent inversion and the active dot. |
| logoHref | string | items[0].href → "#" | Logo destination. |
| logoAriaLabel | string | "Home" | Logo accessible label. |
| initialLoadAnimation | boolean | true | Initial logo and pill entrance, skipped under reduced motion. |
| className | string | — | Root nav class name. |
PillNavItem is { href: string; label: string; ariaLabel?: string }; ariaLabel falls back to label.
Slots
| Slot | Type | Description |
|---|---|---|
| logo | React.ReactNode | Optional circular logo, usually an image or icon, rotating on hover. |
Example
<PillNav items={[{ href: "#home", label: "Home" }, { href: "#features", label: "Features" }, { href: "#pricing", label: "Pricing" }, { href: "#docs", label: "Docs" }]} activeHref="#home" logo={<Mark />} />Without a logo:
<PillNav items={items} activeHref="#features" />Usage guidelines
- activeHref must exactly equal an item href, including anchors and trailing slashes.
- In sliding-pill designs, inverted text belongs inside and above the pill to avoid delayed color changes; see [[sliding-pill-indicator-inverted-text-lives-in-pill-z-above]].
- An inline wrapper around a block logo can align to the baseline and sit low in a flex row. Use
flex items-centerandleading-none; see [[flex-row-pill-offset-from-inline-child-in-block-wrapper]].
Related
Navbar · BeianFooter · NavMenu · NavigationMenu · Menu · Menubar
Playground
<PillNav
items={[
{ href: "#home", label: "Home" },
{ href: "#features", label: "Features" },
{ href: "#pricing", label: "Pricing" },
{ href: "#docs", label: "Docs" },
]}
activeHref="#home"
logo={<Mark />}
initialLoadAnimation={true}
/>