Monday, October 12, 20269:40 AMETLondon2:40 PMDubai5:40 PMTokyo10:40 PMSydney12:40 AMLos Angeles6:40 AM57°FNew YorkNewsletter

Breadcrumbs

Breadcrumb trails with their own schema.

On this page

Breadcrumbs
Help shoppers find their way back
The same trail, twelve moods
Three ways to behave on small screens
Nine separators

NEWSON · ELEMENT NO. 51

Show visitors where they are and let Google show it too. Automatic trails for pages, posts, categories, WooCommerce, search and archives, twelve styles from pills to a developer path, icons per item, collapsible long trails and three smart phone modes.

This one is automatic: it reads the real page you are on.

SHOP

Connected arrows with an icon per level: shop, category, product. On single products the automatic mode builds this from WooCommerce categories.

Studio Pro WirelessSample product · $149

Documentation · developer path

Breadcrumbs

A terminal-style path with a blinking cursor feels right at home on developer docs and changelogs.

Blog article · pills + icons

BRANDING · 6 MIN READWhy your logo needs a small version

Long titles are shortened in the trail; hover to see the full title (sample article).

Deep catalog · collapsed after 4 · click “…”

Online course · steps with dots

TWELVE STYLES

Every style below uses the same three-level trail, so you can compare them side by side.

Plain text · style = plain

Pills · style = pills

Connected arrows · style = chevron

Frosted glass · style = glass

Gradient bar · style = gradient

Dark bar · style = dark

Animated underline · style = underline

Tags · style = tags

Minimal caps · style = minimal

Segmented · style = segmented

Developer path · style = path

Steps · style = steps

ON PHONES

These boxes are narrow, so each widget switches to its phone mode: wrap, swipe sideways (starts at the current page), or just a “Back to parent” button.

Wrap · mobile = wrap