# Expandable Breadcrumb Trail

> A breadcrumb with a home icon and an ellipsis that expands hidden levels with a sliding reveal, plus an animated link row below.

- Kind: Element
- Page: https://ownlyplans.com/bhaskar/expandable-breadcrumb-trail/
- Licence: CC BY 4.0 (reuse with credit)

## Code

`index.html`

```html
<div class="bc"><nav class="trail"><a class="c"><svg viewBox="0 0 24 24"><path d="M4 11l8-7 8 7v9H4z"/></svg>Workspace</a><i class="sep"></i><button class="dots" aria-label="Show hidden levels">...</button><span class="hid"><span class="in"><i class="sep"></i><a class="c">Projects</a><i class="sep"></i><a class="c">Design</a></span></span><i class="sep"></i><b>Navigation</b></nav><a class="row"><svg viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z"/></svg><span>Breadcrumb</span><svg class="go" viewBox="0 0 24 24"><path d="M7 17L17 7M9 7h8v8"/></svg></a></div>
```

`styles.css`

```css
.bc{width:330px;font-family:system-ui,-apple-system,sans-serif;display:grid;gap:14px;color:#e5e5e5}.trail{display:flex;align-items:center;gap:8px;font-size:13px;padding-bottom:14px;border-bottom:1px solid #222}.c{display:flex;align-items:center;gap:6px;color:#8a8a8a;cursor:pointer;transition:color .2s}.c:hover{color:#fff}.c svg,.row svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sep{width:6px;height:6px;border-top:1.5px solid #555;border-right:1.5px solid #555;transform:rotate(45deg);margin:0 2px;flex:none}.dots{border:0;background:none;color:#8a8a8a;font:700 13px/1 inherit;letter-spacing:1px;cursor:pointer;padding:2px 4px;border-radius:6px;transition:.2s}.dots:hover{background:#222;color:#fff}.dots.gone{display:none}.hid{display:grid;grid-template-columns:0fr;transition:grid-template-columns .45s cubic-bezier(.3,.9,.3,1);opacity:0}.hid.open{grid-template-columns:1fr;opacity:1}.hid .in{display:flex;align-items:center;gap:8px;overflow:hidden;min-width:0;white-space:nowrap}.trail b{font-weight:600}.row{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid #262626;border-radius:10px;background:#181818;font-size:13px;cursor:pointer;transition:border-color .25s,background .25s}.row:hover{border-color:#3a3a3a;background:#1d1d1d}.row span{flex:1}.row .go{color:#777;transition:transform .25s,color .25s}.row:hover .go{transform:translate(2px,-2px);color:#fff}
```

`script.js`

```js
(function(){var d=document.querySelector('.dots'),h=document.querySelector('.hid');d.onclick=function(){h.classList.add('open');d.classList.add('gone')}})();
```

---
Also available as JSON: https://ownlyplans.com/bhaskar/expandable-breadcrumb-trail/?format=json
MCP server: https://ownlyplans.com/mcp