Breadcrumb

Hierarchical trail showing the user's location within a site or app

What is it?

Breadcrumbs show a path from a high-level page to the current page, helping users understand context and navigate up the hierarchy. They are typically placed near the top of a content page.

Mockdown

```
Home  /  Category  /  Subcategory  /  Current Item
```

Characteristics:
- Compact, horizontal trail
- Links to parent levels
- Helpful for deep hierarchies and SEO

Layouts Using This Pattern

┌───────────────────────────────────────────────┐
│  Logo    Search [___________]  🛒 Cart (3)   │
├───────────────────────────────────────────────┤
│                                               │
│  ┌──────────────────┐  Product Name           │
│  │                  │  ★★★★☆ (128 reviews)    │
│  │   ┌──────────┐   │                         │
│  │   │  Product │   │  $49.99  $69.99         │
│  │   │  Image   │   │  ──────────────         │
│  │   │   📷     │   │  Color: ● ○ ○ ○        │
│  │   └──────────┘   │  Size:  S [M] L XL     │
│  │                  │                         │
│  │  ○  ○  ●  ○     │  Qty: [ 1  ▾ ]          │
│  └──────────────────┘                         │
│                        [ 🛒 Add to Cart     ] │
│                        [ ♡  Add to Wishlist  ]│
├───────────────────────────────────────────────┤
│  Description │ Reviews │ Shipping             │
│  ─────────────────────────────────            │
│  Premium quality product with...              │
└───────────────────────────────────────────────┘

E-Commerce

E-Commerce Product Detail Page

A conversion-optimized product detail page with image gallery, variant selector, add-to-cart, reviews, and related products — for DTC e-commerce stores.

--product-page--gallery--cart

Medium

Use these prompts to generate layouts built with this pattern.

--breadcrumb --navigation --hierarchy

Ready to build?

Use this pattern as inspiration when creating UI layouts with AI tools.

Try the Editor Browse Layout Prompts