Jump links
Jump links for lit-material: an "On this page" list that highlights the section in view.
- 1.8 KB gzipped
- @lit-material/jump-links 0.2.1
- Renders on the server
Example
Jump links
An "On this page" list: plain anchors, with the section in view highlighted as you scroll the page.
Install
Section text.
Docker
Section text.
Configuration
Section text.
Install
npm install @lit-material/jump-links @lit-material/tokensimport "@lit-material/jump-links";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-jump-links>
An "On this page" list: links to a page's sections that highlight the
one being read. The links are plain #id anchors, so they work before
(and without) JavaScript and render on the server; scrolling then marks
the section at the top of the viewport with aria-current="location".
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
links | links | JumpLink[] | [] | The sections. Ignored while for is set. As an attribute it takes JSON,
so server-rendered markup carries the links and hydrates to the same list. |
htmlFor | for | string | "" | Id of a container whose h2/h3 headings with ids become the links. |
label | label | string | "On this page" | Heading above the links; empty hides it. Also names the <nav>. |
offset | offset | number | 0 | Pixels covered by a sticky header: a section counts as current once its top passes this line. |
current | property only | string | "" | Id of the section in view; reflected as aria-current on its link. |
CSS parts
| Part | Description |
|---|---|
nav | The <nav>. |
link | Each link. |
title | The heading above the links. |