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.

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

Yes — ` ...` is the canonical semantic. Screen readers announce it as 'Breadcrumb, list'.

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

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.

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'.

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

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.

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'.