About this block

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.

When to use

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

• A short hero or page header to establish the section context
• Tabs to let users switch between related views before diving into a deep content area

After

• Pagination at the bottom of the content list so users can move between result pages without losing their place
• Cards to render the detail items the breadcrumb path leads to

What you can customize

The block has three distinct parts you can adjust independently:

• The breadcrumb path. Swap in your own routes and labels at any depth, from a two-level "Home / Reports" trail to a four-level hierarchy that mirrors your app's navigation tree.
• The sticky bar appearance. The translucent background and blur are applied as a single unit, so you can swap in a fully opaque background or remove the shadow to match a flatter design system.
• The scrollable content below. The demo cards are placeholders. Replace them with your real page content and the sticky behavior carries over automatically.

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.