UI & UX

Breadcrumbs & Wayfinding

Implements accurate, accessible hierarchical breadcrumbs with correct BreadcrumbList structured data.

What it does

Implements accurate, accessible hierarchical breadcrumbs with correct BreadcrumbList structured data.

When to use it

Use for deep content hierarchies, ecommerce categories, or navigation that confuses hierarchy with browser history.

Problems it prevents

Stops breadcrumbs that show browser history instead of the site's actual content hierarchy.

Typical workflow

  1. Confirm the real content hierarchy
  2. Implement accurate breadcrumb semantics
  3. Add BreadcrumbList structured data
  4. Verify responsive collapse behaviour

Example output

A breadcrumb trail that always matches the real site hierarchy, with structured data search engines can actually use.

What's included

  1. 01
    The complete prompt

    The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

  2. 02
    Install walkthrough

    Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

  3. 03
    Use notes

    How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Installation

Save the manual as SKILL.md in ~/.claude/skills/breadcrumbs-wayfinding/ to use it on every project, or in .claude/skills/breadcrumbs-wayfinding/ to scope it to one repository. Then invoke it directly:

/breadcrumbs-wayfinding

Read the official Claude Code skills guide

Works well with

Save by bundling

Get Breadcrumbs & Wayfinding as part of Frontend Builder: five skills that work together as one toolkit, for £1.96 less than buying all five separately.

View Frontend Builder (£9.49)