Sticky Breadcrumb
A breadcrumb that pins to the top of the view as the page scrolls. Keeps the current location visible on long articles and deep settings pages.
A breadcrumb that pins to the top of the view as the page scrolls. Keeps the current location visible on long articles and deep settings pages.
Search blocks by description or jump to a page.
Sticky Breadcrumb is a navigation bar that pins to the top of a scrollable container as the user moves down the page. A translucent background with a subtle blur effect keeps the bar legible over the content beneath it, and a thin bottom border and light shadow separate it cleanly from the body. The trail shows the full path from Home through intermediate sections down to the current page, with chevron separators between each link.
The bar sits inside any scrollable region you provide, so you can drop it into a full viewport layout or a bounded panel. The path links, their labels, and the number of levels are all yours to change. You can shorten the trail to two levels or extend it to five without affecting the sticky behavior.
Reach for this block on any page where the content is tall enough that a reader could lose their place. In a product analytics SaaS it fits naturally on a deep drill-down view, such as a workspace, a dashboard, or an event explorer where users navigate several levels before landing on the detail they need. Compared to a static breadcrumb that scrolls away, this one keeps the path anchor visible the entire time, so users can jump back up the hierarchy without scrolling back to the top.
A natural flow around it on a Components page:
Before
After
The block has three distinct parts you can adjust independently:
Tip: if your layout already has a fixed top navigation bar, offset the breadcrumb's stick point to sit just below it so the two bars do not overlap.