Skip to content
Pinky UI

navigation

Editorial Index Navigation

A typography-led numbered index with a traveling rule that keeps the current destination legible.

  • navigation
  • editorial
  • index
  • rule

Live preview

Quick usage

usage
import { EditorialIndexNavigation } from "@pinky-ui/experiences";

<EditorialIndexNavigation items={items} />

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

disabled={true}

Install

Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/experiences

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
itemsNavigationLink[]—Numbered destinations with optional metadata and descriptions.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • The ordered list preserves reading order and links retain native semantics.
  • Current state is expressed with aria-current and never depends on the traveling rule alone.

Performance

  • Only one short indicator and the active label receive motion.
  • The index has no viewport or pointer loop.

Reduced motion

The rule and text settle immediately while numbering, current state and descriptions remain unchanged.

When to use

  • Long-form editorial, case-study and chapter navigation

When not to use

  • Compact application chrome or rapidly changing filters

Skill

Purpose

EditorialIndexNavigation is a numbered, typography-led index for chapters, projects or long-form sections. A restrained traveling rule follows the active destination without turning the index into a card grid.

Interaction anatomy

  • Numbering: ordered destinations communicate sequence and scale.
  • Typography: the active title gains weight and a small amount of leading space.
  • Rule: one supplemental line follows the current row.
  • Metadata: optional labels give each destination a useful editorial cue.

Live example

Move across the index or tab through it. Focus and pointer attention produce the same active row, while the links remain directly usable.

Usage

tsx
import { EditorialIndexNavigation } from "@pinky-ui/experiences";

<EditorialIndexNavigation
  items={chapters.map((chapter, index) => ({
    id: chapter.slug,
    label: chapter.title,
    href: `#${chapter.slug}`,
    meta: `${index + 1} / 04`,
    description: chapter.summary,
  }))}
/>;

Tune

  • Use it for a meaningful sequence, not a generic site footer.
  • Keep descriptions short and let the title carry hierarchy.
  • Preserve generous row height for touch and reading rhythm.

Accessibility

The ordered list and native anchors provide the structure. Use aria-current for the active destination; the rule and typography are supplemental.

Reduced motion

Render the final active title and rule position immediately. Keep numbering, descriptions and focus behavior unchanged.

Open this skill on its own page