Skip to main content
Home
Browse packagesDocsSign in

@daviddarnes/heading-anchors@2.0.2
Built and signed on GitHub Actions

latest
daviddarnes/heading-anchors

A Web Component to add anchor links to headings with IDs

This package works with Deno, BrowsersIt is unknown whether this package works with Cloudflare Workers, Node.js, Bun
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
This package works with Deno
It is unknown whether this package works with Bun
This package works with Browsers
JSR Score
76%
Published
a year ago (2.0.2)

heading-anchors

A Web Component to add anchor links to headings with IDs.

Demo | Styling demo | Further reading

Examples

<script type="module" src="heading-anchors.js"></script>

<heading-anchors>
  <h2 id="heading-level-2">Heading level 2</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

  <h3 id="heading-level-3">Heading level 3</h3>
  <p>
    Excepturi eligendi exercitationem, ratione, in delectus vitae veritatis
    dolorem porro cupiditate quam eaque voluptates.
  </p>
</heading-anchors>

Features

This Web Component allows you to:

  • Add anchor links to headings which have an ID attribute and value
  • Customise which elements will be appended with an anchor link using the selector attribute
  • Customise where the anchor link is appended using the position attribute

Installation

You have a few options (choose one of these):

  1. Install via npm: npm install @daviddarnes/heading-anchors (also avaialbe on jsr)
  2. Download the source manually from GitHub into your project.
  3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one of these):

<!-- Host yourself -->
<script type="module" src="heading-anchors.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@daviddarnes/heading-anchors@2.0.2/heading-anchors.js"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://esm.sh/@daviddarnes/heading-anchors@2.0.2"
></script>

Using selector and position

By default heading-anchors will select all the h2[id], h3[id] and h4[id] elements within it to append an anchor link to. However with the selector attribute you can pass in a different selector string to select:

<heading-anchors selector="h2[id]">
  <!-- ... -->
</heading-anchors>

Note: It's recommended you use selectors that utilise the [id] attribute selector for better reliability

By default heading-anchors will append anchor links right after the element, using the insertAdjacentHTML API. However you can adjust this using the position attribute:

<heading-anchors position="beforeend">
  <!-- ... -->
</heading-anchors>

Credit

With thanks to the following people:

Built and signed on
GitHub Actions
View transparency log

New Ticket: Report package

Please provide a reason for reporting this package. We will review your report and take appropriate action.

Please review the JSR usage policy before submitting a report.

Add Package

deno add jsr:@daviddarnes/heading-anchors

Import symbol

import * as heading_anchors from "@daviddarnes/heading-anchors";
or

Import directly with a jsr specifier

import * as heading_anchors from "jsr:@daviddarnes/heading-anchors";

Add Package

pnpm i jsr:@daviddarnes/heading-anchors
or (using pnpm 10.8 or older)
pnpm dlx jsr add @daviddarnes/heading-anchors

Import symbol

import * as heading_anchors from "@daviddarnes/heading-anchors";

Add Package

yarn add jsr:@daviddarnes/heading-anchors
or (using Yarn 4.8 or older)
yarn dlx jsr add @daviddarnes/heading-anchors

Import symbol

import * as heading_anchors from "@daviddarnes/heading-anchors";

Add Package

vlt install jsr:@daviddarnes/heading-anchors

Import symbol

import * as heading_anchors from "@daviddarnes/heading-anchors";

Add Package

npx jsr add @daviddarnes/heading-anchors

Import symbol

import * as heading_anchors from "@daviddarnes/heading-anchors";

Add Package

bunx jsr add @daviddarnes/heading-anchors

Import symbol

import * as heading_anchors from "@daviddarnes/heading-anchors";