Preview

Import

import { MagneticNav, MagneticNavItem, MagneticNavLink } from "@sigil-ui/components";

Usage

<MagneticNav>
  <MagneticNavItem>
    <MagneticNavLink href="/" active>Home</MagneticNavLink>
  </MagneticNavItem>
  <MagneticNavItem>
    <MagneticNavLink href="/docs">Docs</MagneticNavLink>
  </MagneticNavItem>
  <MagneticNavItem>
    <MagneticNavLink href="/blog">Blog</MagneticNavLink>
  </MagneticNavItem>
</MagneticNav>

How it works

A ::before pseudo-element on the <ul> uses CSS anchor positioning to track whichever <li> contains a hovered, focused, or active link:

li:has(a:is(:hover, :focus-visible, [data-active])) {
  anchor-name: --sigil-magnetic-target;
}

ul::before {
  position-anchor: --sigil-magnetic-target;
  left: anchor(left);
  top: anchor(top);
  width: anchor-size(width);
  height: anchor-size(height);
}

The indicator transitions smoothly between positions using --s-duration-fast and --s-ease-out tokens. No JavaScript required.

Vertical

Sub-components

<MagneticNav> — outer <nav> wrapper
<MagneticNavItem> — <li> wrapper for each link
<MagneticNavLink> — <a> with active prop for current page

Props

MagneticNav

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction of the nav list.

MagneticNavLink

Prop	Type	Default	Description
`active`	`boolean`	`false`	Mark this link as the currently active page. Sets `aria-current="page"`.

Token integration

CSS Variable	Purpose
`--s-navbar-item-gap`	Gap between nav items
`--s-radius-lg`	List container radius
`--s-radius-md`	Link and indicator radius
`--s-button-padding-x`	Link horizontal padding
`--s-spacing-xs`	Link vertical padding
`--s-button-font-weight`	Link font weight
`--s-text`	Active/hovered link color
`--s-text-muted`	Inactive link color
`--s-surface`	Indicator background
`--s-border`	Indicator border color
`--s-border-style`	Indicator border style
`--s-duration-fast`	Transition speed
`--s-ease-out`	Transition easing

Magnetic Nav