Dot Breadcrumb
A breadcrumb that separates each link with a small round dot. Offers a quiet, minimal path indicator for clean app layouts and page headers.
A breadcrumb that separates each link with a small round dot. Offers a quiet, minimal path indicator for clean app layouts and page headers.
Search blocks by description or jump to a page.
Dot Breadcrumb is a single horizontal navigation trail. Four items sit in a row, each link separated from the next by a small round dot rendered in a muted tone. The last item is the current page and appears as plain text rather than a link, so readers know at a glance where they have landed.
The structure is intentionally minimal: one breadcrumb list, no container card, no background fill, no icons. You can swap the link labels and hrefs, add or remove intermediate steps, or drop the block into any header area without it fighting the surrounding content.
Reach for this block when the page needs a location indicator that stays out of the way. The dot separator is quieter than a slash or chevron, which makes it a good fit for creative and studio sites where whitespace and typographic calm matter more than clear technical wayfinding. A portfolio work detail page, a case study, or a services category view all benefit from a separator that reads as punctuation rather than UI chrome.
A natural flow around it on a Components page:
Before
After
The block covers any path that fits cleanly in a single row of linked labels. A few specific uses worth calling out:
Tip: the dot separator works best with short, one or two word labels. Long labels crowd the dots and break the minimal feel.