Navigationduskmoonimplemented5 demos

Anchor

Anchor builds in-page navigation for long documentation or settings screens.

Import@duskmoon-dev/components/anchor

5API sections

22documented props

3behavior scenarios

Key API

itemstargetOffsetboundsoffsetTopgetContainergetCurrentAnchor

Usage

When to use

Use it when users need to move between sections, pages, steps, or contextual actions.
Expose current and disabled state so navigation remains clear to keyboard and screen-reader users.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Wayfinding

Covers the route, section, step, or action-list patterns that help users move through an interface.

Current state

Shows selected, active, open, or current props where the component exposes them.

Primary API surface

Anchor is most often configured through `items`, `targetOffset`, `bounds`, `offsetTop`.

Covered behavior

Renders nested item links and tracks active href on click

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and Anchor from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Anchor } from "@duskmoon-dev/components/anchor";

export function Example() {
  return (<Anchor
  affix={false}
  showInkInFixed
  items={[
    {
      href: "#intro",
      title: "Intro",
      children: [{ href: "#demos", title: "Demos" }]
    }
  ]}
/>);
}

Preview

Renders nested item links and tracks active href on click

test-backed

Anchor scenario from the component test coverage: renders nested item links and tracks active href on click.

Source

import "@duskmoon-dev/components/styles.css";
import { Anchor } from "@duskmoon-dev/components/anchor";

export function AnchorRendersNestedItemLinksDemo() {
  return (<Anchor
  affix={false}
  showInkInFixed
  items={[
    {
      href: "#intro",
      title: "Intro",
      children: [{ href: "#demos", title: "Demos" }]
    }
  ]}
/>);
}

Preview

Supports Anchor.Link children and hash changes

test-backed

Anchor scenario from the component test coverage: supports anchor.link children and hash changes.

Source

import "@duskmoon-dev/components/styles.css";
import { Anchor } from "@duskmoon-dev/components/anchor";

export function AnchorSupportsAnchorLinkChildrenDemo() {
  return (<Anchor
  affix={false}
  showInkInFixed
  items={[
    {
      href: "#intro",
      title: "Intro",
      children: [{ href: "#demos", title: "Demos" }]
    }
  ]}
/>);
}

Preview

Accepts nav props, className, ref, and getCurrentAnchor

test-backed

Anchor scenario from the component test coverage: accepts nav props, classname, ref, and getcurrentanchor.

Source

import "@duskmoon-dev/components/styles.css";
import { Anchor } from "@duskmoon-dev/components/anchor";

export function AnchorAcceptsNavPropsClassNameDemo() {
  return (<Anchor
  affix={false}
  showInkInFixed
  items={[
    {
      href: "#intro",
      title: "Intro",
      children: [{ href: "#demos", title: "Demos" }]
    }
  ]}
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Anchor
  affix={false}
  showInkInFixed
  items={[
    {
      href: "#intro",
      title: "Intro",
      children: [{ href: "#demos", title: "Demos" }]
    }
  ]}
/>
</div>

<div data-theme="moonlight">
  <Anchor
  affix={false}
  showInkInFixed
  items={[
    {
      href: "#intro",
      title: "Intro",
      children: [{ href: "#demos", title: "Demos" }]
    }
  ]}
/>
</div>

API

The API reference below lists every parsed exported type or interface for Anchor. Start with `items`, `targetOffset`, `bounds`, `offsetTop` for common usage.

Types: packages/components/src/components/anchor/Anchor.types.tsScenarios: packages/components/src/components/anchor/Anchor.test.tsx

AnchorPropsinterface extends Omit< ComponentProps<"nav">, "onChange" | "onClick" >

Prop	Type	Required	Description
`items`	`AnchorItem[]`	No	items configures Anchor.
`targetOffset`	`number`	No	targetOffset configures Anchor.
`bounds`	`number`	No	bounds configures Anchor.
`offsetTop`	`number`	No	offsetTop configures Anchor.
`getContainer`	`() => Window \| HTMLElement`	No	getContainer configures Anchor.
`getCurrentAnchor`	`(activeLink: string) => string`	No	getCurrentAnchor configures Anchor.
`affix`	`boolean`	No	affix configures Anchor.
`showInkInFixed`	`boolean`	No	showInkInFixed configures Anchor.
`onClick`	`(`	No	onClick configures Anchor.
`event`	`MouseEvent<HTMLElement>,`	Yes	event configures Anchor.
`link`	`{ title: ReactNode; href: string },`	Yes	link configures Anchor.
`onChange`	`(currentActiveLink: string) => void`	No	onChange configures Anchor.

AnchorIteminterface

Prop	Type	Required	Description
`key`	`string`	No	key configures Anchor.
`href`	`string`	Yes	href configures Anchor.
`title`	`ReactNode`	Yes	title configures Anchor.
`target`	`string`	No	target configures Anchor.
`children`	`AnchorItem[]`	No	children configures Anchor.

AnchorLinkPropsinterface extends Omit< ComponentProps<"a">, "children" | "href" | "onClick" | "title" >

Prop	Type	Required	Description
`href`	`string`	Yes	href configures Anchor.
`title`	`ReactNode`	Yes	title configures Anchor.
`target`	`string`	No	target configures Anchor.
`children`	`ReactNode`	No	children configures Anchor.
`onClick`	`ComponentProps<"a">["onClick"]`	No	onClick configures Anchor.

AnchorLinkComponenttype

ForwardRefExoticComponent< AnchorLinkProps & RefAttributes<HTMLAnchorElement> >

AnchorComponenttype

ForwardRefExoticComponent< AnchorProps & RefAttributes<HTMLElement> > & { Link: AnchorLinkComponent