React component · zero runtime deps

A Pokémon route-map style navigation for React — a trail of circular nodes joined by a dotted line, each showing a pixel-art sprite for a page or section.

npm install pokenav
Read the docsBuild a nav
  • 898 sprites, loaded lazily
  • Plain CSS — no Tailwind, no framework coupling
  • Bring your own artwork with spriteUrl
Click a node
Playground

Build your nav

Pick sprites, rename the items, tune the theme, copy the config. The preview beside the steps is the real component, re-rendering as you go.

Nav items

Choose a sprite for Home

898 of 898

Copy your config

{
  "position": "left",
  "orientation": "vertical",
  "items": [
    {
      "label": "Home",
      "href": "/",
      "pokemonId": 133
    },
    {
      "label": "Work",
      "href": "/work",
      "pokemonId": 81
    },
    {
      "label": "Writing",
      "href": "/writing",
      "pokemonId": 137
    },
    {
      "label": "Contact",
      "href": "/contact",
      "pokemonId": 185
    }
  ],
  "theme": {
    "accentColor": "#f97316",
    "ringStyle": "solid",
    "trailPath": "wavy",
    "dotStyle": "dotted"
  }
}
Theming

One accent, every variant

Everything below is the same component under different theme settings — ring, trail, hover, focus and fill colors all derive from a single accentColor. Click a node to change the active route.

accentColor

Trail path

straight

wavy

wavypokeball

Horizontal orientation

Labels sit below the node so the trail never runs through them. position stays independent — it controls which end the trail packs to.

horizontalstraight

horizontalwavy

horizontalpokeballposition: right

Scroll linking

Scroll-linked trail fill

Scroll the page — the trail fills continuously in accentColor, and the highlight travels to whichever node the fill has reached. Progress comes from useScrollProgress(), not from inside the component.

straight

wavy

horizontalwavy

Not just Pokémon

Custom sprites

Every item takes a spriteUrl, so the component works with entirely your own artwork and never touches the bundled catalogue — which is also the answer to the sprite licensing question.

spriteUrl

Ready to drop it in?

The usage docs cover install, the full NavConfig reference, custom sprites and accessibility.

Read the docs