Heading With Anchor

Add anchor for every heading.

Heading 1

Heading 1 align

Installation

1

Install the package

2

Paste this code into your project

3

Modify `scroll-m-20` according to your header height and `Link` to `a` if you are not using Next.js

4

Update import paths as needed

Usage

h1 to h6

Heading 1

Heading 1 without anchor

Heading 2

Heading 2 without anchor

Heading 3

Heading 3 without anchor

Heading 4

Heading 4 without anchor

Heading 5
Heading 5 without anchor
Heading 6
Heading 6 without anchor

Show anchor when hover heading

Show anchor when hover heading

Close to heading

Heading with anchor align

Properties

PropertyTypeDefault
className
string
anchor
string
anchorAlignment
'close' | 'spaced'
spaced
anchorVisibility
'hover' | 'always' | 'never'
always
disableCopyToClipboard
boolean
false

Spectrum Pro

Stop building from scratch.
Ship faster with Pro templates.

Premium Next.js templates built on Spectrum UI. Dark. Animated. Production-ready.