Breadcrumbs
Show the path from home to here, and let people click any step.
NavigationEstablished
Free forever. No paywall, no card.
A free library of classic and AI interaction patterns for designers and students - the problem, the solution, and when not to use it.
grounded in the work of
- Google PAIR Guidebook
- Microsoft HAX Toolkit
- Martijn van Welie
- Jenifer Tidwell, Designing Interfaces
- GOV.UK Design System
- Nielsen Norman Group
Sources the patterns cite - not endorsements.
- patterns named
- classic
- from AI products
- families
don't read about it - try it
Patterns you can actually use
Every pattern here is something you can touch. Pick 1, use it for a few seconds, and notice what it does for you.
Home
Classic patternBreadcrumbs
People find it easier to see where they are than to remember how they got there.
try this:
- 1Click into a category, then jump back up using the trail.
- 2Every step is a link except the last - the page you are on.
- 3The trail shows where the page lives, not where you have been.
classic and AI, 1 library
AI didn't invent new problems
Most AI patterns answer a question interaction designers asked long ago. Learn them in pairs, and each 1 makes the other easier to understand.
Classic patternThe question both answerAI pattern
- Where am I in this?
- Wait for a yes before the next step
- Make the wait feel shorter
- What can I do here?
- Say what went wrong, and what to do next
- Show a little, keep the rest a click away
the same page, every time
A pattern page that teaches, not just shows
Most libraries stop at a screenshot. Every pattern here carries the trade-offs, a wrong example beside the right one, and a check at the end - the parts learning research says make a pattern stick.
Most visitors read about a fifth of the words on a page. So the whole idea has to fit in the first sentence.
People read 20 to 28% of a page's words on an average visit (Nielsen Norman Group).
Breadcrumbspart 1 of 6
In 1 lineShow the path from the home page to the current page as a row of links, so people know where they are and can jump back up 1 or more levels.
The whole idea, before anything else - for the reader who stops here.
The wrong version is a near-miss of the right one, drawn on the same grid, and the broken rule is named.
Right and wrong examples shown together beat right-only in 9 of 12 studies, and never lost (Dieterich et al., 2025).
Breadcrumbspart 2 of 6
Aim for, avoidAim for
Avoid
The same row, drawn twice. Only 1 thing changes - and the rule it breaks is named: orientation.
So you can defend the choice to a stakeholder, and skip the pattern when it does not fit.
A lesson learnt without when it applies is hard to reuse on a new problem (Kolodner, Gray and Fasse).
Breadcrumbspart 3 of 6
Why it worksPeople recognise where they are more easily than they remember how they got there. The row turns the invisible structure into something you can see and point at.
When not to use
- The site is flat - 1 or 2 levels.
- A single-task flow, such as a checkout.
- As the only navigation.
Each example names the product and the month it was last checked, so you can tell whether it is still true.
MDN, the web's most-used reference, ends every page with the date it was last changed.
Breadcrumbspart 4 of 6
Seen in- Microsoft Learnchecked Oct 2026
Learn › Azure › Storage above the article title; the current page is left out.
- GOV.UKchecked Oct 2026
Home › Driving and transport, marked up as nav aria-label="Breadcrumb".
Combined with, alternative to, conflicts with - not a loose "see also" list.
Concept maps beat text, lists and outlines for remembering, across 55 studies (Nesbit and Adesope, 2006).
Breadcrumbspart 5 of 6
Related patterns- Combined withMain navigation
- Alternative toTabs
- Conflicts withWizard
- See alsoFaceted navigation
A question that makes you apply the pattern to a new screen, not just recognise it.
Tested after reading, people remembered 56% a week later, against 42% for re-reading (Roediger and Karpicke, 2006).
Breadcrumbspart 6 of 6
Check yourselfA photo app has 2 screens: the gallery and 1 photo. The designer adds “Gallery › Photo” above every photo. Good idea?
Yes, it helps orientationNo, the site is too flatOnly on desktop
Breadcrumbspart 1 of 6
In 1 lineShow the path from the home page to the current page as a row of links, so people know where they are and can jump back up 1 or more levels.
The whole idea, before anything else - for the reader who stops here.
browse the library
Every pattern, 1 swipe away
Finished pages first, then the ones being written - each card says which.
start here
Pick the path that fits where you are
4 short reading tracks, 8 to 12 patterns each. No sign-up needed to read. Sign up only when you want to save.
made by a designer
Hi, I’m Abhi.
I’m a Senior Interaction Designer in Hyderabad, with 15 years of designing for people - and now for people and AI.
I went to IDC School of Design, IIT Bombay to go deeper into HCI, and I now mentor its Design of Interactive Products course. The old pattern libraries I learnt from have mostly gone offline, and the patterns that arrived with AI were never written down. So I’m writing both - in the open, and free.
“Find them, test them, and make them so simple that one day they feel as obvious as a checkbox.”
the library, as it grows
Written
Being written next
- Inline validation
- Empty state
- StreamingAI
- CitationsAI
- Approval gateAI
- Suggested promptsAI
before you go
Start with the problem you have today.
Free forever - save patterns, make collections, share them with 1 link.
Join free