Anchor

The default maps to Arco line-less; underline maps to Arco's default track. See the Element Plus docs for props.

Trackless Anchor

The default matches Arco line-less; links scroll this example's container.

Overview

Details

Resources

Overview content

Details content

Resources content

<script setup lang="ts">
import { useId } from 'vue'
// A unique id keeps this anchor scoped to its own scroll container.
const id = useId()
const sections = ['Overview', 'Details', 'Resources']
</script>

<template>
  <div style="width: 100%; display: flex; gap: 24px">
    <el-anchor :container="'#' + id" :offset="0" style="width: 150px; flex-shrink: 0">
      <el-anchor-link v-for="section in sections" :key="section" :href="'#' + id + '-' + section" :title="section" />
    </el-anchor>
    <div :id="id" style="height: 220px; overflow: auto; flex: 1; border: 1px solid var(--el-border-color)">
      <section v-for="section in sections" :id="id + '-' + section" :key="section" style="height: 220px; padding: 16px">{{ section }} content</section>
    </div>
  </div>
</template>

Underline Anchor

Underline matches Arco's default track; the marker follows the active section.

Overview

Details

Resources

Overview content

Details content

Resources content

<script setup lang="ts">
import { useId } from 'vue'
// A unique id keeps this anchor scoped to its own scroll container.
const id = useId()
const sections = ['Overview', 'Details', 'Resources']
</script>

<template>
  <div style="width: 100%; display: flex; gap: 24px">
    <el-anchor :container="'#' + id" type="underline" :offset="0" style="width: 150px; flex-shrink: 0">
      <el-anchor-link v-for="section in sections" :key="section" :href="'#' + id + '-' + section" :title="section" />
    </el-anchor>
    <div :id="id" style="height: 220px; overflow: auto; flex: 1; border: 1px solid var(--el-border-color)">
      <section v-for="section in sections" :id="id + '-' + section" :key="section" style="height: 220px; padding: 16px">{{ section }} content</section>
    </div>
  </div>
</template>

Horizontal Anchor

Horizontal arranges links in a row while targeting the example's own container.

Overview

Details

Resources

Overview content

Details content

Resources content

<script setup lang="ts">
import { useId } from 'vue'
// A unique id keeps this anchor scoped to its own scroll container.
const id = useId()
const sections = ['Overview', 'Details', 'Resources']
</script>

<template>
  <div style="width: 100%; ">
    <el-anchor :container="'#' + id" type="underline" direction="horizontal" :offset="0">
      <el-anchor-link v-for="section in sections" :key="section" :href="'#' + id + '-' + section" :title="section" />
    </el-anchor>
    <div :id="id" style="height: 220px; overflow: auto; flex: 1; border: 1px solid var(--el-border-color)">
      <section v-for="section in sections" :id="id + '-' + section" :key="section" style="height: 220px; padding: 16px">{{ section }} content</section>
    </div>
  </div>
</template>

Differences from Arco

• Width follows the container rather than Arco's fixed 150px.
• Clicking a link retains Element Plus URL-hash behavior.