Slash Breadcrumb
A breadcrumb that divides its links with a forward slash. Mirrors a file path style for code tools, documentation, and folder browsing screens.
A breadcrumb that divides its links with a forward slash. Mirrors a file path style for code tools, documentation, and folder browsing screens.
Search blocks by description or jump to a page.
Slash Breadcrumb is a horizontal navigation trail that separates each link with a forward slash character. Four items appear in sequence: a Home link, a Products link, a Categories link, and a current page label for Electronics that carries no href and is rendered as plain text to signal the active location. Each slash sits between the items in a muted tone so the links stand out while the separators recede.
The links and the current page label are all independent copy. You can add or remove steps to match any depth of hierarchy, swap the demo labels for your own section names, and rewrite the hrefs to point at your routes. Nothing in the structure depends on a specific number of items, so a two step path or a five step path both work without layout changes.
Reach for this block when the path itself is meaningful to the reader and the slash character reinforces that meaning. It fits naturally on any screen where content lives inside a nested folder or category structure: a careers platform showing a candidate moving through Department, Role, and Job Detail, or a hiring tool where a recruiter is inside a specific pipeline stage. The slash separator reads as a file path, which makes it the clearest choice for documentation sites, admin tools, and any product where users navigate through named levels.
A natural flow around it on a Components page:
Before
After
The block suits any product with hierarchical navigation. A few concrete fits:
Tip: keep the path to four steps or fewer. Longer paths compress on small screens and the middle steps become hard to tap.