Breadcrumb Trail Append
Going one level deeper slides a new crumb in from the right while the trail behind it recedes.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Breadcrumb Trail Append
*
* Drilling one level deeper slides a new crumb in from the right while
* the trail behind it slides left and recedes. Going back up removes theAbout this pattern
Orientation for anything with a hierarchy: folders, categories, settings sections. The crumb that arrives is the one that moved you, so it enters from the direction of travel while the existing trail shifts left and dims — position and opacity together say both where you are and which way you came. The labels are the delicate part: they use layout="position" so the row can reflow around them without stretching a single glyph, and popLayout takes a removed crumb out of flow the moment it starts leaving so the rest close the gap immediately rather than waiting. Past four levels the oldest crumbs fold into one overflow control instead of letting the bar scroll away from the current location.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- File browser
The folder path grows and truncates as you move through directories.
Related patterns
- Nested Menu DrillA submenu pushes the parent list aside inside the same panel, and the panel resizes to fit it.
- Dropdown Menu OpenA menu unfolds from the corner of the control that opened it, with its items arriving a frame apart.
- Route Progress TopA top-edge bar advances during navigation and completes with a quick finish.