Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Breadcrumb Branch, animated React component

Breadcrumb navigation grown as a living branch. Your path is the wood, twigs carry the places beside each step and buds at the tip are the places inside. Tap a bud and the branch grows into it; go back and the old wood turns to autumn and its leaves tumble down. A sparrow, which is you, hops to the tip and the springy limb dips under it. Gusts run through the leaves, your pointer rustles them and sunlight dapples it all. Every place is also a real button, so the path works with a keyboard and a screen reader.

  • Pro
  • Inputs & Controls
  • Hover
  • Spring

Wood creaking as the branch grows, leaves rustling and falling, and the sparrow chirping as it hops. Sound is off on this site until you switch it on.

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Q3 launch
3 inside
Tap a bud to grow into it, a twig to step aside, or a name to go back.

Props

PropTypeDefaultWhat it does
rootPlace—The places you can go, as a tree: { name, children }.
defaultPathstring[]["Work", "Projects", "Q3 launch"]Where you start, as names below the root.
onNavigate(path: string[]) => void—Called with the names from the root down whenever you move.
enableSoundbooleantrueWood creaking, leaves rustling and the sparrow. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseWalks the branch by itself until the visitor touches it. Never runs under reduced motion.
classNamestring—Extra classes for the card.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Breadcrumb Branch is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

How Breadcrumb Branch works

Breadcrumb navigation grown as a living branch. The path you are on is a branch growing out of a trunk, one length of wood per level, each place's name tagged where it joins. Side twigs carry the places beside each one (tap one to step sideways), and buds at the tip carry the places inside where you are (tap one and the branch grows into it: the wood draws out, the bud swells and its leaves unfurl).

The source, the install command and the build prompt come with Pro.

Breadcrumb Branch questions

Does it make sound, and how do I turn it off?

Wood creaking as the branch grows, leaves rustling and falling, and the sparrow chirping as it hops. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More inputs & controls