Boltdocs Logo
GuidesIntegrationsAPIPluginsComponents
  1. Home
  2. ChevronRightUi
  3. ChevronRightHeading

Heading

Accessible document title headings with automated slug anchors.

The Heading primitive is a wrapper element that renders HTML title headers (<h1> to <h6>) and automatically appends clipboard anchor links when provided with an id.

It maps onto a real <h1> through <h6> element (with level controlling which), so screen readers and SEO crawlers treat it as a real heading. The bonus is the auto-generated anchor link that copies a deep-link URL to the clipboard on click.

You'll normally only use it inside MDX content where you need to inject a custom-styled heading — Boltdocs automatically generates <Heading> instances from ## and ### markdown. Reach for the primitive when you're writing a layout component or want to override heading styles.

ImportLink

import { Heading } from 'boltdocs/primitives'

Quick StartLink

Render a header with automated anchor link wrapping:

import { Heading } from 'boltdocs/primitives'

export default function SectionHeader() {
  return (
    <Heading
      level={2}
      id="project-architecture"
      className="text-2xl font-bold text-body border-b border-subtle pb-2"
    >
      Project Architecture
    </Heading>
  )
}

Anchor PositionsLink

You can customize where the Lucide anchor link symbol appears:

Wrap Position (Default)Link

Wraps the entire text content inside a router-local hyperlink, rendering the link icon at the right edge when hovered.

Before / After PositionsLink

Renders the link icon as a standalone prefix or suffix:

<Heading level={3} id="options" anchorPosition="before">
  Configuration Options
</Heading>

Component PropsLink

The Heading component accepts standard HTML heading attributes plus:

PropertyTypeDefaultDescription
level1 | 2 | 3 | 4 | 5 | 6RequiredRenders the corresponding HTML heading element (e.g. 1 outputs <h1>).
idstringundefinedSection unique slug identifier. Required to enable anchor linking.
showAnchorbooleantrueToggles whether to output hover/click anchor symbols.
anchorPosition'wrap' | 'before' | 'after''wrap'Determines the layout orientation of link icons.
anchorIconReactNodeLucideLinkCustom SVG graphics component to override default link graphics.
anchorClassNamestringundefinedCustom styling overrides for the anchor anchor wrapping link element.
classNamestringundefinedCSS class style override for heading.
styleCSSPropertiesundefinedInline style settings.

PitfallsLink

  • level is required. Don't pass a non-existent level (7+) — React will warn at runtime. Use the right level for the semantic meaning, not because it looks pretty.
  • id matters more than styling. Even if you don't show the anchor link, an explicit id keeps deep links working for users reading the page in a renderer that hides anchors.
  • anchorIcon is meant to be replaced. The default is Link from lucide-react. If your theme uses a different visual identity (e.g. #), pass it through.
Last updated on July 27, 2026

Was this page helpful?