In-page anchors

Styles live in scss/components/_anchor-nav.scss. In-page anchor navigation links sections on long pages with a vertical rail and optional icons.

Anatomy

Prerequisites

• PimentCSS installed, Installation.
• Icons (optional), link-01 at 20px via ph().
• Section IDs, each href should target a heading or region id on the page.

Anchor items, level 1

By default, .anchor-nav and each .anchor-item grow to the full label width (plus 8px padding); labels are never truncated. Hover and doc-only .anchor-item--hover wrap that box. For a narrow sidebar with ellipsis, add .anchor-nav--constrained. Icons are optional via .anchor-item__icon. Doc-only .anchor-item--focus previews the focus ring; production uses :focus-visible. Selected uses aria-current="true".

Anchor items, level 2

Child sections use .anchor-item--level-2 (extra 8px left margin so hover aligns with indented text) and aria-current="page" when that section is active.

Vertical anchor block

Stack links inside .anchor-nav. Mix level 1 and level 2 items; only one section should be current at a time.

<nav class="anchor-nav" aria-label="Sections"><a href="#intro" class="anchor-item anchor-item--selected" aria-current="true">
    <span class="anchor-item__label">Introduction</span>
  </a><a href="#details" class="anchor-item anchor-item--level-2">
    <span class="anchor-item__label">Details</span>
  </a></nav>

Interactive example

Add data-anchor-live on .anchor-nav and call wireAllAnchorNavs() after load. Clicks update aria-current (demo prevents navigation). In production, pair with scroll-spy or native hash navigation.

// See docs-site/src/lib/anchor-behavior.ts (aria-current on section click).

Class reference

Customize (Sass)

1. 01

   Anchor spacing

   Override gaps, padding, and selected border width.
   variables

   @use "pimentcss-design-system" with (
     $anchor-item-gap: 0.75rem,
     $anchor-item-py: 0.5rem,
     $anchor-item-px-l1: 0.5rem,
     $anchor-item-px-l2: 1rem,
     $anchor-border-selected: 0.125rem
   );

2. 02

   Rebuild CSS

   Run after editing _anchor-nav.scss.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps