Anchor Nav

Vertical or horizontal in-page link bar with active highlight. Active link gets accent-primary background pill or underline glow.

Components

Anchor Nav

navigation

interactive

<arc-anchor-nav>

Overview

AnchorNav is an in-page navigation component that renders a list of section links in either a vertical column or horizontal row. The active link is highlighted with an accent-primary background pill (vertical) or underline glow (horizontal), giving users a clear sense of where they are within a long-scrolling page. It is the ideal companion for single-page documentation, landing pages with sectioned content, and settings screens with distinct panels. The component manages its own selection state via the `value` prop and dispatches `arc-change` when the user clicks a link. For automatic scroll-position tracking, pair AnchorNav with ScrollSpy — the scroll spy updates the active value as the user scrolls, and AnchorNav reflects the change visually. This combination delivers a polished "table of contents" experience with minimal wiring. AnchorNav supports both orientations out of the box. Vertical mode is best for sidebars and narrow rail positions, while horizontal mode works well as a sub-header beneath a TopBar. Both modes use smooth scroll behavior when links are clicked, and all items are fully keyboard navigable with arrow keys and Enter activation.

Guidelines

When to use

Pair with ScrollSpy for automatic active-link tracking on scroll
Use vertical orientation in sidebars and horizontal under a TopBar
Keep link labels short — two to four words that match section headings
Ensure each link target has a matching ID on the page
Place AnchorNav in a sticky container so it remains visible during scroll

When not to use

Do not use AnchorNav for multi-page navigation — use Sidebar or NavigationMenu instead
Do not add more than eight to ten links — split long pages into separate routes instead
Do not mix orientations on the same page
Do not forget to set matching IDs on the sections the links point to
Do not use AnchorNav without sticky positioning — it loses its wayfinding value if it scrolls away

Features

Vertical and horizontal orientations
Accent-primary background pill (vertical) or underline glow (horizontal) on active link
`arc-change` event on link selection
Controlled value prop for external state management
Smooth scroll to target section on click
Full keyboard navigation with arrow keys
Pairs with ScrollSpy for automatic scroll tracking
Token-driven theming via CSS custom properties

Preview

Overview Installation Theming API Reference

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<arc-anchor-nav orientation="vertical" value="overview" id="toc">
  <span value="overview">Overview</span>
  <span value="installation">Installation</span>
  <span value="theming">Theming</span>
  <span value="api">API Reference</span>
</arc-anchor-nav>

<script>
  document.querySelector('#toc').addEventListener('arc-change', (e) => {
    console.log('active section:', e.detail.value);
  });
</script>

import { AnchorNav } from '@arclux/arc-ui-react';

export function TableOfContents() {
  return (
    <AnchorNav
      orientation="vertical"
      value="overview"
      onArcChange={(e) => console.log('active:', e.detail.value)}
    >
      <span value="overview">Overview</span>
      <span value="installation">Installation</span>
      <span value="theming">Theming</span>
      <span value="api">API Reference</span>
    </AnchorNav>
  );
}

<script setup>
import { AnchorNav } from '@arclux/arc-ui-vue';

function onChange(e) {
  console.log('active:', e.detail.value);
}
</script>

<template>
  <AnchorNav orientation="vertical" value="overview" @arc-change="onChange">
    <span value="overview">Overview</span>
    <span value="installation">Installation</span>
    <span value="theming">Theming</span>
    <span value="api">API Reference</span>
  </AnchorNav>
</template>

<script>
  import { AnchorNav } from '@arclux/arc-ui-svelte';
</script>

<AnchorNav
  orientation="vertical"
  value="overview"
  on:arc-change={(e) => console.log('active:', e.detail.value)}
>
  <span value="overview">Overview</span>
  <span value="installation">Installation</span>
  <span value="theming">Theming</span>
  <span value="api">API Reference</span>
</AnchorNav>

import { Component } from '@angular/core';
import { AnchorNav } from '@arclux/arc-ui-angular';

@Component({
  imports: [AnchorNav],
  template: `
    <arc-anchor-nav
      orientation="vertical"
      value="overview"
      (arc-change)="onChange($event)"
    >
      <span value="overview">Overview</span>
      <span value="installation">Installation</span>
      <span value="theming">Theming</span>
      <span value="api">API Reference</span>
    </arc-anchor-nav>
  `,
})
export class TableOfContentsComponent {
  onChange(e: CustomEvent) {
    console.log('active:', e.detail.value);
  }
}

import { AnchorNav } from '@arclux/arc-ui-solid';

export function TableOfContents() {
  return (
    <AnchorNav
      orientation="vertical"
      value="overview"
      onArcChange={(e) => console.log('active:', e.detail.value)}
    >
      <span value="overview">Overview</span>
      <span value="installation">Installation</span>
      <span value="theming">Theming</span>
      <span value="api">API Reference</span>
    </AnchorNav>
  );
}

import { AnchorNav } from '@arclux/arc-ui-preact';

export function TableOfContents() {
  return (
    <AnchorNav
      orientation="vertical"
      value="overview"
      onArcChange={(e) => console.log('active:', e.detail.value)}
    >
      <span value="overview">Overview</span>
      <span value="installation">Installation</span>
      <span value="theming">Theming</span>
      <span value="api">API Reference</span>
    </AnchorNav>
  );
}

API

orientation 'vertical' | 'horizontal' ='horizontal': Layout direction. Vertical renders a column of links; horizontal renders a row.
value string ='': The value of the currently active link. Controls which item is highlighted.
items Array<{label: string, value: string}> =[]: Declarative list of items to render. Each object needs a label (display text) and value (identifier). Alternative to slotting children.

Events

arc-change: Fired when a link is selected with detail: { value }.

Anchor Nav

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight