blog heading navigator
BlogHeadingNavigator renders the compact desktop-only heading rail that tracks article scroll position, surfaces heading text on hover, and gives longform pages a quick structural jump menu.
| field | value |
|---|---|
| group | blog |
| import | @arieare/ds-blog/BlogHeadingNavigator.astro |
| source | packages/ds-blog/src/BlogHeadingNavigator.astro packages/ds-blog/src/blog.css |
Introduction
Navigator markers stay minimal until focus, hover, or the active heading catches up.
Structure
Each item points at a real heading id inside the same document.
Detail work
Depth-three items shorten the marker line so the hierarchy stays readable.
component tokens
| token | source | description |
|---|---|---|
--page-bg / --border-color | @arieare/ds-blog/tokens.css | Sets the blog reading surface and divider color. The centered reading width now comes from the shared shell-layout tokens. |
--primary-ink / --secondary-ink | @arieare/ds-blog/tokens.css | Provides the blog package's primary and secondary ink aliases. |
--blog-surface-rule-hover | @arieare/ds-blog/tokens.css | Hover rule color used by list-item and navigator accents. |
--ds-tooltip-bg / --ds-tooltip-ink | @arieare/ds/tokens.css | Controls tooltip surface and text colors. |
--ds-tooltip-font / --ds-tooltip-feature-settings | @arieare/ds/tokens.css | Keeps tooltip copy on the shared small-body type contract. |
--ds-tooltip-offset / --ds-tooltip-max-width | @arieare/ds/tokens.css | Defines tooltip offset from the trigger and its maximum readable width. |
props
| prop | type | default | description |
|---|---|---|---|
items | Array<{ id: string; text: string; depth: 2 | 3 }> | — | Ordered heading list used to build the navigator links and scroll targets. |