About CSS Breadcrumb Builder

Navigation breadcrumb with custom separator — /, >, arrow. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

• Frontend developers generating breadcrumb navigation CSS for content sites
• E-commerce developers building category path breadcrumbs for product pages
• Documentation site builders creating section-level navigation indicators
• SEO engineers implementing breadcrumb structured data with matching styles

Tips

• Choose from slash, angle bracket, or arrow separators between items
• Customize separator character and spacing to match your navigation style
• The last breadcrumb item is automatically styled as the current page

Fun Facts

• Breadcrumb navigation is named after the fairy tale 'Hansel and Gretel' (1812) by the Brothers Grimm, where children dropped bread crumbs to find their way home.
• Jakob Nielsen's 2007 usability study found that breadcrumbs are used by less than 10% of website visitors, yet removing them increased user confusion by 35% in deep site hierarchies.
• Google began showing breadcrumb trails in search results in 2009, replacing long URLs with structured navigation paths — making breadcrumb markup an SEO best practice.

FAQ

Is the separator image, text, or pure CSS?

All three — toggle between a text separator (>, /), a CSS-generated chevron (pure borders), or an SVG icon. Pure CSS is fastest.

How are current-page crumbs styled?

Last-child gets no link style and `aria-current="page"`. Color and weight can be customized separately from the links.

Does it wrap on narrow screens?

Two modes: truncate middle crumbs with ellipsis (`…`), or wrap to multiple lines. Truncate is better for mobile space.

Is the markup accessible?

Yes — `<nav aria-label="Breadcrumb"><ol>...` is the canonical semantic. Screen readers announce it as 'Breadcrumb, list'.