---
title: "WooCommerce Breadcrumbs"
description: "Display WooCommerce breadcrumb navigation in Bricks and customize the home link, prefixes, suffixes, separators, and spacing."
canonical: "https://academy.bricksbuilder.io/builder/elements/woocommerce/breadcrumbs/"
markdownUrl: "https://academy.bricksbuilder.io/builder/elements/woocommerce/breadcrumbs.md"
pageType: "article"
section: "builder"
category: "elements"
lastmod: "2026-05-21T13:58:32.000Z"
---
Displays WooCommerce breadcrumb navigation.

## Settings

- **Before** (text) - Text to display before breadcrumbs.

- **Home: URL** (text) - Custom URL for home link. Default: home URL.

- **Home: Label** (text) - Label for home link. Default: "Home".

- **Home: Icon** (icon) - Icon for home link.

- **Home: Gap** (number with units) - Gap between home icon and label.

- **Home: Icon Size** (number) - Size of home icon.

- **Hide label** (checkbox) - Hide home label when icon is present. Only available when Home: Icon is set.

- **Prefix** (text) - Text to display before each breadcrumb item.

- **Suffix** (text) - Text to display after each breadcrumb item.

### Separator

- **Type** (select) - Separator type. Options: Text, Icon. Default: Text.

- **Separator** (text) - Separator text. Default: "/". Only available when Type is not Icon.

- **Icon** (icon) - Separator icon. Only available when Type is Icon.

- **Icon typography** (typography) - Typography for separator icon. Only available when Icon is set. Excludes: font-family, font-weight, font-style, text-align, text-decoration, text-transform, line-height, letter-spacing.

- **Gap** (number with units) - Gap between breadcrumb items.

- **Margin** (spacing) - Margin around separators.