A small horizontal trail showing where you are in the site hierarchy. Essential for any site more than two levels deep.
Breadcrumbs are a secondary navigation element showing the user's current location within the website's hierarchy. Named after the Hansel and Gretel fairy tale, they appear as a horizontal trail of links: Home › Category › Subcategory › Current Page. They let users understand where they are and jump back to any parent level with one click.
Breadcrumbs use an ordered list (ol) of links separated by a visual divider — usually a forward slash, chevron, or angle bracket. The current page is the last item and is NOT a link (it's where you already are). All items before it are clickable. Visual style is intentionally subtle — small font, muted color — so it doesn't compete with the main page heading.
Waxed Lancashire cotton, brass hardware. Made in batch 12 — limited to 240 numbered pieces. The kind of coat you bring with you when the forecast is uncertain.
Add to bag — $485Add a breadcrumb navigation to a product detail page. HTML structure: <nav aria-label='Breadcrumb'><ol> with li items separated by CSS-generated dividers. Style: font-size:13px, color:#888888. Each link (except last): color:#888, text-decoration:none, hover:color:#111 with 0.2s transition. Last item (current page): color:#111, font-weight:500, no link. Separator: CSS li + li::before { content: '›'; margin: 0 8px; color:#CCCCCC }. The breadcrumb path for this page: Home → Men's Clothing → Outerwear → Winter Jackets. Wrap in a container with 16px top and bottom padding. Also add JSON-LD schema.org BreadcrumbList markup in the head for SEO.