Anchor

In-page anchor navigation with scroll-linked highlighting. <nav> semantics plus aria-current="location".

Basic usage

Basic

• Section 1
• Section 2
• Section 2.1

<script setup>
const anchorItems = [
  { id: 'sec-1', title: 'Section 1' },
  { id: 'sec-2', title: 'Section 2', children: [{ id: 'sec-2-1', title: 'Section 2.1' }] },
]
</script>

<template>
  <LhAnchor :items="anchorItems" />
</template>

<script>
export default {
  data() {
    return {
      anchorItems: [
        { id: 'sec-1', title: 'Section 1' },
        { id: 'sec-2', title: 'Section 2', children: [{ id: 'sec-2-1', title: 'Section 2.1' }] },
      ],
    }
  },
}
</script>

<template>
  <LhAnchor :items="anchorItems" />
</template>

Horizontal layout and scroll options

direction="horizontal" lays the links out in a row; smooth disables smooth scrolling; offset compensates for the anchor region's offset from the top of the scroll container; target observes a specific scroll container (window by default).

Horizontal anchors

• Section 1
• Section 2
• Section 2.1

<script setup>
const anchorItems = [
  { id: 'sec-1', title: 'Section 1' },
  { id: 'sec-2', title: 'Section 2' },
]
</script>

<template>
  <!-- Horizontal anchors -->
  <LhAnchor
    :items="anchorItems"
    direction="horizontal"
    :offset="8"
    :smooth="true"
  />
</template>

<script>
export default {
  data() {
    return {
      anchorItems: [
        { id: 'sec-1', title: 'Section 1' },
        { id: 'sec-2', title: 'Section 2' },
      ],
    }
  },
}
</script>

<template>
  <!-- Horizontal anchors -->
  <LhAnchor
    :items="anchorItems"
    direction="horizontal"
    :offset="8"
    :smooth="true"
  />
</template>

API

LhAnchor Props

Attribute	Description	Type	Default
items	Anchor data (supports children)	[LhAnchorItem](#type-LhAnchorItem)[]	—
target	Scroll container (selector or element; window by default)	string | HTMLElement	—
offset	Offset used when resolving the active anchor	number	0
direction	Layout direction	"vertical" | "horizontal"	'vertical'
smooth	Smooth scrolling	boolean	true
sx	Quick layout props	LhSxProps	—

LhAnchor Events

Event	Description	Callback
change	Active anchor changed (scroll-linked updates and anchor clicks)	(id: string) => void
click	An anchor link is clicked, before the scroll starts	(e: MouseEvent, id: string) => void

LhAnchorItem

Field	Description	Type
id	Target element id	string
title	Display text	string
children	Nested anchors	LhAnchorItem[]

Accessibility

• The container is a semantic <nav> with an aria-label; the current anchor carries aria-current="location"
• Links are real <a href="#id"> (works without JS; click is enhanced to smooth scrolling)
• Smooth scrolling degrades to instant jumps under prefers-reduced-motion: reduce

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/anchor/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhAnchorProps

export interface LhAnchorProps {
  items: LhAnchorItem[]
  target?: string | HTMLElement
  offset?: number
  direction?: 'vertical' | 'horizontal'
  smooth?: boolean
  sx?: LhSxProps
}

LhFlatAnchorItem _{(from @lh-ui/share/core/anchor)}

export interface LhFlatAnchorItem {
  id: string
  title: string
  level: number
}

LhAnchorItem _{(from @lh-ui/share/core/anchor)}

export interface LhAnchorItem {
  id: string
  title: string
  children?: LhAnchorItem[]
}