Bordered breadcrumb

A breadcrumb housed in a rounded card with a subtle shadow. Lifts the navigation path off the page for detail views and account settings screens.

A tight breadcrumb with reduced spacing between its links. Fits crowded toolbars and mobile headers where horizontal room is in short supply.

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 pairing each link with a leading icon. Helps users scan the path at a glance across sections like home, docs, billing, and settings.

A breadcrumb that numbers each step in the path. Clarifies order for sequential flows such as checkout, onboarding, or a multi step setup wizard.

A breadcrumb where each link sits inside a rounded pill shape. Adds a friendly, tappable feel to navigation on dashboards and profile pages.

A breadcrumb with a fill that tracks how far a user has moved. Shows completion across multi step forms, checkout, and guided account onboarding.

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 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 laid out as a connected timeline of steps. Maps a journey through stages, ideal for order tracking and live project status views.

A breadcrumb trail wrapped in a soft tinted background bar. Anchors the top of a page and keeps navigation links readable above busy content.

A pagination row where each page number sits inside its own outlined button. The clear borders separate pages cleanly across data tables and search results.