Navigation

Anchor

In-page navigation links that track the user's scroll position and highlight the active section. Perfect for long documentation pages or landing pages.

Installation

npx benflux-ui add anchor

Sticky sidebar usage

// Add IDs to your headings
<h2 id="installation">Installation</h2>
<h2 id="usage">Usage</h2>
<h2 id="api">API</h2>

// Anchor sticks to top:20 by default (affix=true)
<div className="flex gap-12">
  <main className="flex-1">
    {/* page content */}
  </main>
  <Anchor
    items={[
      { href: "#installation", title: "Installation" },
      { href: "#usage", title: "Usage" },
      { href: "#api", title: "API" },
    ]}
  />
</div>

Horizontal direction

<Anchor
  direction="horizontal"
  items={[
    { href: "#overview", title: "Overview" },
    { href: "#features", title: "Features" },
    { href: "#pricing", title: "Pricing" },
  ]}
/>

Props

Prop	Type	Default	Description
items*	AnchorLinkItem[]	—	List of anchor link items (supports nested children)
affix	boolean	true	Whether to stick to the top when scrolling
offsetTop	number	80	Scroll offset for detecting the active section
targetOffset	number	—	Override the scroll detection threshold (defaults to offsetTop + 20)
direction	"vertical" \| "horizontal"	"vertical"	Layout direction of the anchor links
onChange	(currentLink: string) => void	—	Called when the active link changes

AnchorLinkItem

interface AnchorLinkItem {
  href: string         // Target ID, e.g. "#installation"
  title: ReactNode     // Link label
  children?: AnchorLinkItem[]  // Nested links
}