HeadingLink – Once UI

The HeadingLink component creates linkable section headings that automatically integrate with the HeadingNav component to provide a smooth navigation experience throughout your content.

HeadingLink

Example Section

This is a section with a linkable heading

<HeadingLink as="h2" id="example-section">
  Example Section
</HeadingLink>
<Text onBackground="neutral-weak">
  This is a section with a linkable heading
</Text>

Usage

Use the HeadingLink component to create section headings throughout your content. When used with the HeadingNav component, these headings will automatically appear in the navigation.

Multiple headings

First Section

Content for the first section

Subsection

Content for the subsection

<HeadingLink as="h2" id="first-section">
  First Section
</HeadingLink>
<Text onBackground="neutral-weak" marginBottom="16">
  Content for the first section
</Text>
<HeadingLink as="h3" id="subsection">
  Subsection
</HeadingLink>
<Text onBackground="neutral-weak">
  Content for the subsection
</Text>

Styling

The HeadingLink component can be customized with the standard Heading styling props.

Styling

Styled Heading

This heading has custom styling

<HeadingLink 
  as="h2" 
  id="styled-heading" 
  onBackground="accent-weak"
  marginBottom="16"
>
  Styled Heading
</HeadingLink>

HeadingNav

The HeadingLink component works seamlessly with the HeadingNav component to create an automatic table of contents.

Features

Creates linkable section headings with anchor IDs
Automatically integrates with HeadingNav for table of contents
Supports all heading levels (h1-h6)
Provides hover link indicators for easy navigation
Fully accessible with proper heading semantics

API reference

Prop	Type	Default
idrequired Anchor target, and what the copied link points at.	string	—
asrequired Which heading level to render.	h1h2h3h4h5h6	—
children	React.ReactNode	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—