Zach’s ugly mug (his face) Zach Leatherman

<heading-anchors> Web Component

Looking out to sea over Peel Beach and Peel Castle, a rusted boat anchor sits on grass
August 29, 2024

<heading-anchors> adds sibling anchor links for heading elements (h1h6) when they have an id attribute and positions those anchor links visually as though they were nested inside of the heading.

Inspired by David Darnes’ component of the same name.

Currently in use on v9 of the eleventy-base-blog project (and on this very web site, too).

Features

  • Useful when you want preserve heading text as is (selectable, able to nest other links, etc).
  • Useful when you want to exclude anchor links from your RSS feed.
  • Links are positioned alongside heading text, but not nested inside of heading markup (for improved screen-reader compatibility and accessibility)
  • Establishes a placeholder element to establish space for the anchor link and so that heading text doesn’t reflow during interaction
  • Prefers the CSS Anchoring API (where available) but works using JavaScript positioning when the API is not available.
  • Automatically matches font styling of the heading (font-family, line-height, font-size, and font-weight)

Prior Art


IndieWeb Avatar for https://unsplash.com/Poster image by James Qualtrough

< Newer
11ty is Joining Font Awesome
Older >
Oddbird’s Winging It Live: Web Components

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

3 Reposts

Zach Leatherman :11ty:Tom Arild JakobsenRyan Mulligan

7 Likes

Diego López :kirby:Jacky (is looking for work)Xavier RuizJulianoëTyler StickaSwiftAdam Stoddard
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)