Divi Breadcrumbs Module
Show people where they are.
DG Breadcrumbs is a Divi 5 module that shows visitors where they are. It works out the trail by itself for pages, posts, products, archives, search results and 404 pages, so one module in a Theme Builder template covers the whole site. Ten designs for ten kinds of websites below; every trail is live and ends with the title of this page.
USE CASE 01 · BOUTIQUES, BRIDAL & JEWELLERS
A hairline of gold between every step
Small caps, wide letter-spacing and a tiny gold diamond between the crumbs. Quiet enough for a luxury brand, clear enough for every shopper.
Text: small caps, wide tracking · Separator: gold “◆” · Wrapper: hairline top & bottom rules
The Ivory Collection
Hand-finished gowns · fittings by appointment in Vienna
USE CASE 02 · CLINICS, DENTISTS & WELLNESS
Calm, rounded and reassuring
Patients should never feel lost. Soft teal capsules, a heart for home and gentle angle arrows make every step easy to read and easy to tap.
Wrapper: white capsule bar + soft shadow · Home: heart icon on teal · Separator: angle icon
Teeth whitening
45 minutes · results in one visit · from $199
USE CASE 03 · GAMING, ESPORTS & TECH LAUNCHES
Level up the trail
Gaming and esports sites want energy. Every crumb is a glowing chip: the home link burns in a violet-to-pink gradient, and cyan double arrows lead the way.
Home: gradient chip + gamepad icon + glow · Links: outlined glass chips · Separator: cyan double-angle icon
Winter Cup 2027
128 teams · $50,000 prize pool · starts 12 January
USE CASE 04 · CORPORATE, FINANCE & LAW FIRMS
Underlined, precise, corporate
For banks, law firms and investor pages: plain text crumbs, a firm rule under each link and an em dash between steps. Left-aligned, nothing decorative, everything clear.
Links: 2px underline (bottom border) · Separator: text “—” · Alignment: left, inside an accent-bar card
Q3 2026 results
Revenue up 18% year on year · published 28 October
USE CASE 05 · STARTUPS & PRODUCT LAUNCHES
Bold boxes, hard shadows
The neo-brutalist look: thick black outlines, flat pink and white blocks and a solid offset shadow on every crumb. Loud, fun and impossible to miss.
Crumbs: 2px black border + hard 4px shadow · Home: rocket icon on pink · Separator: text “→”
Version 4.0 is here
Dark mode · 3× faster sync · shipped today
USE CASE 06 · ONLINE SHOPS
Pills that feel like buttons
Shoppers jump between categories a lot. Each crumb is a soft pill they can tap, the home pill has an icon, and the current page is filled with the brand colour.
Crumbs: pill background + radius · Home: icon + text · Separator: chevron icon
Noise-cancelling headphones
42 products · free shipping over $50
USE CASE 07 · BLOGS & MAGAZINES
Quiet, classic and readable
An editorial trail stays out of the way: small serif text, slashes between the links, and the current page underlined like a printed caption.
Separator: text "/" · Current page: underline (border bottom) · Alignment: left
The quiet return of the printed magazine
By Elena Costa · 8 min read
USE CASE 08 · DOCUMENTATION & HELP CENTRES
A trail that reads like a file path
Monospace text in a dark bar, "›" between the steps: developers read it like a path. Turn on Enable Schema on a real docs site and search engines get the trail as JSON-LD.
Font: monospace · Wrapper: dark bar · Extras: monospace trail, dark bar
Authentication with API keys
Last updated 2 days ago · v3.2
USE CASE 09 · HERO HEADERS & LANDING PAGES
Seven days on the Sunset Coast
A frosted pill sits on any photo hero. Separators are tiny dots; the current page glows in the accent colour.
Wrapper: translucent background, border, radius · Separator: dot icon · Section: Divi photo + gradient
USE CASE 10 · REAL ESTATE & ARCHITECTURE
Outlined tags with a refined touch
Thin outlined tags look like labels on an architect's drawing. Square corners, a gold accent and generous spacing give a listing page a high-end feel.
Crumbs: outlined tags, square corners · Separator: thin line icon · Current page: filled gold
The Old Bank Residences
5 rooms · 210 m² · €1,950,000
USE CASE 11 · SAAS & WEB APPS
A dashboard trail with icons
Inside an app, small uppercase crumbs with a folder icon on every link feel like navigation, not decoration. The current page gets a soft chip.
Links: Use Link Icon (folder) · Text: uppercase, letter-spaced · Current page: chip
Website relaunch 2027
12 tasks · 4 members · due 30 November
USE CASE 12 · TRAVEL & TOURISM
A little plane between every stop
Separator icons can tell a story: here a plane flies between the crumbs. Bright, friendly and impossible to miss on a tour page.
Separator: plane icon · Home: globe icon · Current page: sunny colour
Tea highlands by train
7 days · small groups · from $1,380
USE CASE 13 · RESTAURANTS & HOSPITALITY
An elegant trail for an elegant menu
A script home link, small caps for the rest and a row of dots between them. On a dark, warm background it feels like the first line of a printed menu.
Home: script font · Separator: text "· · ·" · Colours: gold on dark
The tasting menu
Seven courses · Thursday to Saturday · $95
USE CASE 14 · SCHOOLS & ONLINE COURSES
Every level gets its own colour
For a course it helps to see each level as a step. Home, the course and the lesson each get their own rounded pill colour, playful but tidy.
Home: yellow pill · Links: green pill · Current page: blue pill
Lesson 4: Colour and contrast
12 minutes · quiz at the end
USE CASE 15 · CREATIVE AGENCIES & PORTFOLIOS
Neon on black
A bold trail for a bold studio: oversized, uppercase, separated by slashes, and the current page outlined in neon with a soft glow.
Text: large uppercase · Separator: text "//" · Current page: neon border + glow
Orbit Creative — rebrand
Identity · website · motion · 2026