Anchor Nav — ARC UI

Components

Anchor Nav

navigation

interactive

<arc-anchor-nav>

Overview

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

Use AnchorNav for multi-page navigation — use Sidebar or NavigationMenu instead
Add more than eight to ten links — split long pages into separate routes instead
Mix orientations on the same page
Forget to set matching IDs on the sections the links point to
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
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: `
    <AnchorNav
      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>
    </AnchorNav>
  `,
})
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

Prop	Type	Default	Description
`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

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