Skip to content
E-115Element

Glass Breadcrumb Trail

Premium breadcrumb trail: a frosted pill with a home icon crumb, hover tints, a "…" disclosure that tucks the middle crumbs into a small menu, and a current page marked with a glowing dot (aria-current="page"). Pure C…

Get this with ProIncluded in your plan

50 sites for €79 only, Compare all plans

Preview Desktop, 1280px

All photos and visual assets used in this preview are sourced from Unsplash.

The system behind it

One pattern, your whole brand.

Glass Breadcrumb Trail reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.

Type
Element
Category
Breadcrumbs
Responsive
Desktop to phone
Works with
Etch, ACSS, plain CSS

Options 7

Set on the section, in Etch’s attributes panel. No code needed.

data-theme
lightdark

surface of the showcase section

data-align
startcenterend

position of the trail

data-style
glasssolidunderlineminimal

look of the trail

data-separator
chevronslashdotarrow

divider between crumbs

data-size
sml

type and padding scale

data-collapse
truefalse

show the "…" menu that holds the middle crumbs

data-anim
risefadenone

entrance

Component props 1

Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.

Crumb3 in this pattern · 4 props
PropTypeDefault
label
text

Templates

url
text

#

current
true / false

False

showIcon
true / false

False

Included in Pro From €39 a year, with all 753 patterns.

Get Pro

More patterns

Keep browsing.

L-000

Quick View

Desktop, 1440px
Pro
demo.etchedy.com

The real preview of this pattern. Every pattern adapts to your ACSS tokens.

Unlock with ProSee plansIncluded in your plan