---
description: Create a heading with a custom anchor ID.
title: Anchor heading
image: https://developers.cloudflare.com/style-guide/build-the-page/components/anchor-heading/og.png?v=a3ccee6b6529e6ad
---
[Skip to content](#main-content)
> Documentation Index
> Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt
> Use this file to discover all available pages before exploring further.
# Anchor heading
Last updated Aug 20, 2026|Copy as Markdown| [View as Markdown](https://developers.cloudflare.com/style-guide/build-the-page/components/anchor-heading/index.md)| [Agent setup](https://developers.cloudflare.com/agent-setup/)
The `AnchorHeading` component is used `96` times on `19` pages.
See all examples of pages that use AnchorHeading
Used **96** times.
**Pages**
- /cloudflare-one/networks/connectors/cloudflare-wan/analytics/-Source
- /cloudflare-one/networks/connectors/cloudflare-wan/configuration/appliance/network-options/application-based-policies/breakout-traffic/-Source
- /cloudflare-one/networks/connectors/cloudflare-wan/reference/traffic-steering/-Source
- /cloudflare-wan/analytics/-Source
- /cloudflare-wan/configuration/appliance/network-options/application-based-policies/breakout-traffic/-Source
- /cloudflare-wan/-Source
- /cloudflare-wan/reference/traffic-steering/-Source
- /fundamentals/api/reference/limits/-Source
- /learning-paths/data-center-protection/get-started/-Source
- /magic-transit/analytics/-Source
- /magic-transit/get-started/-Source
- /magic-transit/reference/gre-ipsec-tunnels/-Source
- /magic-transit/reference/mtu-mss/-Source
- /magic-transit/reference/traffic-steering/-Source
- /magic-transit/troubleshooting/routing-and-bgp/-Source
**Partials**
- src/content/partials/durable-objects/api-async-kv-legacy.mdx
- src/content/partials/durable-objects/durable-objects-pricing.mdx
- src/content/partials/workers/wrangler-commands/containers.mdx
- src/content/partials/workers/wrangler-commands/tunnel.mdx
The `AnchorHeading` component defines headings. Specifically, `AnchorHeading` performs the following:
1. Generates URL fragments corresponding to headings.
2. Formats URL fragments into compatible syntax. For example, a `&` is replaced with a `-`.
3. Creates a button to copy the URL at each fragment.
4. Allows heading fragments to be defined separately from the text of the heading itself.
```mdx
import { AnchorHeading } from "~/components";
```
Markdown files (including partials) have this behavior by default, applied via rehype plugins. Therefore, the `AnchorHeading` component is usually only required when writing headings yourself inside components, or when working on non-markdown files.
To override the ID given to a heading within Markdown, add an MDX comment at the end of the line:
```mdx
## foo {/*bar*/}
{/* HTML: foo
*/}
```
Note
The `AnchorHeading` component emulates the behavior of the [`rehype-slug` ↗︎](https://github.com/rehypejs/rehype-slug) and the [`rehype-autolink-headings` ↗︎](https://github.com/rehypejs/rehype-autolink-headings). It adds an `id` based on the output of [`github-slugger` ↗︎](https://github.com/Flet/github-slugger/) to the heading, as well as adding a button to copy a link to that particular heading.
Was this helpful?
YesNo
## On this page
[Docs](https://developers.cloudflare.com/)
```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/build-the-page/components/anchor-heading/#page","headline":"Anchor heading","description":"Create a heading with a custom anchor ID.","url":"https://developers.cloudflare.com/style-guide/build-the-page/components/anchor-heading/","inLanguage":"en","image":"https://developers.cloudflare.com/style-guide/build-the-page/components/anchor-heading/og.png?v=a3ccee6b6529e6ad","dateModified":"2026-08-20","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
```