Anchor

A navigation component that tracks scroll position and highlights the current section. Supports smooth scrolling, nested items, horizontal mode, and animated indicators.

Basic

The anchor tracks which section is visible and highlights the corresponding link. Click a link to smooth-scroll to its section.

Getting StartedInstallationConfigurationAdvanced Usage

Getting Started

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Installation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Configuration

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Advanced Usage

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

<script setup>
import { ref } from 'vue'
import { VxAnchor } from 'veloxui'

const items = [
  { href: '#getting-started', title: 'Getting Started' },
  { href: '#installation', title: 'Installation' },
  { href: '#configuration', title: 'Configuration' },
  { href: '#advanced', title: 'Advanced Usage' },
]
</script>

<template>
  <VxAnchor :items="items" />
</template>

Nested Items

Use children for sub-sections. Nested links are indented automatically.

Getting StartedInstallation

npmyarn

ConfigurationAdvanced Usage

npm

npm install veloxui

yarn

yarn add veloxui

<VxAnchor :items="[
  { href: '#intro', title: 'Introduction' },
  { href: '#install', title: 'Installation', children: [
    { href: '#npm', title: 'npm' },
    { href: '#yarn', title: 'yarn' },
  ]},
  { href: '#config', title: 'Configuration' },
]" />

Marker Styles

Choose between line (default), dot, or none.

Line

Getting StartedInstallationConfigurationAdvanced Usage

Dot

Getting StartedInstallationConfigurationAdvanced Usage

None

Getting StartedInstallationConfigurationAdvanced Usage

<VxAnchor :items="items" marker="line" />
<VxAnchor :items="items" marker="dot" />
<VxAnchor :items="items" marker="none" />

Horizontal

Set direction="horizontal" for a horizontal anchor bar.

OverviewFeaturesPricingFAQ

Overview

Section content goes here.

Features

Section content goes here.

Pricing

Section content goes here.

FAQ

Section content goes here.

<VxAnchor :items="items" direction="horizontal" />

Horizontal Dot

OverviewFeaturesPricingFAQ

<VxAnchor :items="items" direction="horizontal" marker="dot" />

Disabled Items

Individual items can be disabled.

AvailableAvailableLockedLocked

<VxAnchor :items="[
  { href: '#a', title: 'Available' },
  { href: '#b', title: 'Locked', disabled: true },
]" />

Hash Change

By default, clicking a link updates the URL hash. Disable with :hash-change="false".

<!-- URL hash stays unchanged -->
<VxAnchor :items="items" :hash-change="false" />

Custom Target

Scope scroll tracking to a specific container by passing a CSS selector or HTMLElement.

<div id="scroll-area" style="height: 400px; overflow: auto;">
  <VxAnchor :items="items" target="#scroll-area" />
  <div id="section-1">...</div>
  <div id="section-2">...</div>
</div>

Custom Classes

Override styling with root-class, item-class, active-class, and indicator-class.

<VxAnchor
  :items="items"
  root-class="my-anchor"
  item-class="my-link"
  active-class="my-active"
  indicator-class="my-indicator"
/>

Custom Item Slot

Use the #item slot for custom rendering. Receives item and active.

<VxAnchor :items="items">
  <template #item="{ item, active }">
    <span :style="{ fontWeight: active ? 700 : 400 }">
      {{ active ? '> ' : '' }}{{ item.title }}
    </span>
  </template>
</VxAnchor>

With Affix

Wrap with VxAffix to make the anchor sticky while scrolling.

<VxAffix :offset="80" shadow>
  <VxAnchor :items="items" :offset="80" />
</VxAffix>

API

VxAnchor Props

Prop	Type	Default	Description
items	AnchorItem[]	[]	Anchor link definitions
v-model	string	—	Active href
offset	number	0	Scroll offset from top (px)
direction	'vertical' | 'horizontal'	'vertical'	Layout direction
marker	'line' | 'dot' | 'none'	'line'	Active indicator style
target	string | HTMLElement	window	Scroll container
smooth	boolean	true	Smooth scroll animation
hash-change	boolean	true	Update URL hash on click
indent	number	16	Nested item indentation (px)
root-class	string | string[] | object	—	Class on root element
item-class	string | string[] | object	—	Class on every link
active-class	string | string[] | object	—	Class on active link
indicator-class	string | string[] | object	—	Class on the indicator

AnchorItem

Property	Type	Required	Description
href	string	Yes	Target section id (e.g. #section)
title	string	Yes	Display text
children	AnchorItem[]	No	Nested sub-links
disabled	boolean	No	Disable this link

Events

Event	Payload	Description
update:modelValue	string	Active href changed
change	string	Active section changed
click	(item, event)	Link clicked

Slots

Slot	Props	Description
item	{ item: AnchorItem, active: boolean }	Custom link content

Exposed

Name	Type	Description
scrollTo(href)	function	Scroll to a section programmatically
activeHref	Ref<string>	Current active href