import { Component } from '@angular/core';
import { WrAnchor } from 'ngwr/anchor';
@Component({ imports: [WrAnchor] })
export class MyComponent {}Anchor
In-page links that highlight the section in view.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Demo
Pass links in document order; set offset to the height of a sticky header.
<wr-anchor [links]="links" [offset]="80" />API
| Name | Description | Type | Default |
|---|---|---|---|
links | The entries, in DOCUMENT ORDER — the scroll spy walks them top to bottom and stops at the first target below the cursor line, so a list in any other order highlights the wrong entry. | readonly WrAnchorLink[] | [] |
ariaLabel | Accessible name for the navigation landmark. Falls back to anchor.label, then 'Table of contents' — it used to be that English string, hard-coded on the host, in a landmark a screen reader reads out on every page. | string | null | null |
offset | Pixel offset subtracted on scroll — for sticky headers. | number | 0 |
hitArea | Highlight an item when its target's top is within this many px of the offset line. | number | 80 |
Types
interface WrAnchorLink {
id: string;
label: string;
children?: readonly WrAnchorLink[];
}| Name | Description | Type | Default |
|---|---|---|---|
WrAnchorLink | One entry in the rail. | interface | — |
idrequired | Target element id (without #). | string | — |
labelrequired | Visible text. | string | — |
children | One level of nested links. | readonly WrAnchorLink[] | — |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/anchor's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-anchor-border | var(--wr-border-base) | .wr-anchor |
--wr-anchor-font-family | var(--wr-font-family-base) | .wr-anchor |
--wr-anchor-link-active-font-weight | var(--wr-font-weight-semibold) | .wr-anchor |
--wr-anchor-link-font-size | var(--wr-text-sm) | .wr-anchor |
--wr-anchor-link-line-height | var(--wr-leading-snug) | .wr-anchor |
--wr-anchor-link-padding-x | var(--wr-space-sm) | .wr-anchor |
--wr-anchor-link-padding-y | var(--wr-space-xs) | .wr-anchor |
--wr-anchor-link-radius | var(--wr-border-radius-sm) | .wr-anchor |
--wr-anchor-list-gap | var(--wr-space-xs) | .wr-anchor |
--wr-anchor-list-nested-margin-top | var(--wr-space-xs) | .wr-anchor |
Dependencies
| Built on | WrScroll |
|---|
See also
Directive wrAffixStick an element to the top on scroll and style it while it is stuck.Component Back to TopA floating button that scrolls the page back to the top.Component TabsSwitch between panels, or between routes.Service WrScrollScroll to an element, id, selector or position, with an offset for sticky headers.