Anchor

Provides an interactive way to navigate sections on a page using anchored links.

Usage

Basic Usage

Render the Anchor component by providing a list of link items.

<Anchor
  items={[
    { key: '1', href: '#section1', title: 'Section 1' },
    {
      key: '2',
      href: '#section2',
      title: 'Section 2',
      children: [
        { key: '2.1', href: '#subsection2.1', title: 'Subsection 2.1' },
        { key: '2.2', href: '#subsection2.2', title: 'Subsection 2.2' },
      ],
    },
    { key: '3', href: '#section3', title: 'Section 3' },
  ]}
/>

With Offset and Behavior

You can customize the scroll behavior and set an offset.

<Anchor
  items={[
    { key: '1', href: '#section1', title: 'Section 1' },
    {
      key: '2',
      href: '#section2',
      title: 'Section 2',
      children: [
        { key: '2.1', href: '#subsection2.1', title: 'Subsection 2.1' },
        { key: '2.2', href: '#subsection2.2', title: 'Subsection 2.2' },
      ],
    },
    { key: '3', href: '#section3', title: 'Section 3' },
  ]}
  color={'violet'}
  offset={50}
  behavior="auto"
/>

API

Props

Anchor

Prop	Type	Default	Required
items	LinkItem[]	-	Yes
offset	number	-	-
behavior	ScrollBehavior	-	-
onChange	(selectedKey: string) => void	-	-

Link Item

Prop	Type	Default	Required
key	string	-	Yes
href	string	-	Yes
title	string	-	Yes
children	LinkItem[]	[]	-