DESIGN 01 / 16DarkDash

Dark Breadcrumb — Dash Separator

Shows the path (Home – Category – Product) on a dark strip.

Best forStores with many categories.
Where to place itTop of the product page, under the header.

How to use: add the Product Breadcrumb block and choose dark · dash in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 02 / 16PlainPipe

Plain Breadcrumb — Pipe Separator

Simple text path with | between items.

Best forMinimal stores.
Where to place itTop of product or category pages.

How to use: add the Product Breadcrumb block and choose plain · pipe in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 03 / 16SoftCustom

Soft Breadcrumb — Custom Separator

Soft background with your own separator symbol.

Best forBrand-styled stores.
Where to place itTop of product pages.

How to use: add the Product Breadcrumb block and choose soft · custom in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 04 / 16CardChevron

Card Breadcrumb — Chevron Separator

Breadcrumb inside a small card with › arrows.

Best forClean modern stores.
Where to place itAbove the product title.

How to use: add the Product Breadcrumb block and choose card · chevron in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 05 / 16ChipsArrow

Chip Breadcrumb — Arrow Separator

Each level as a chip with arrows.

Best forMobile-friendly navigation.
Where to place itTop of product pages.

How to use: add the Product Breadcrumb block and choose chips · arrow in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 06 / 16RibbonSlash

Ribbon Breadcrumb — Slash Separator

Ribbon-style path with / between items.

Best forColorful stores.
Where to place itUnder the header.

How to use: add the Product Breadcrumb block and choose ribbon · slash in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 07 / 16UnderlineDot

Underline Breadcrumb — Dot Separator

Underlined links with dots.

Best forMinimal, text-first stores.
Where to place itAbove the product title.

How to use: add the Product Breadcrumb block and choose underline · dot in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 08 / 16DarkDash

Dark Breadcrumb — Spice Version

Dark strip with dash.

Best forSpice stores.
Where to place itTop of product pages.

How to use: add the Product Breadcrumb block and choose dark · dash in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 09 / 16PlainPipe

Plain Breadcrumb — Honey Version

Plain text path.

Best forHoney stores.
Where to place itTop of product pages.

How to use: add the Product Breadcrumb block and choose plain · pipe in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 10 / 16SoftCustom

Soft Breadcrumb — Oil Version

Soft custom path.

Best forOil stores.
Where to place itTop of product pages.

How to use: add the Product Breadcrumb block and choose soft · custom in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 11 / 16CardChevron

Card Breadcrumb — Nuts Version

Card with chevrons.

Best forNuts stores.
Where to place itAbove the title.

How to use: add the Product Breadcrumb block and choose card · chevron in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 12 / 16ChipsArrow

Chip Breadcrumb — Pickle Version

Chip path.

Best forPickle stores.
Where to place itTop of product pages.

How to use: add the Product Breadcrumb block and choose chips · arrow in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 13 / 16RibbonSlash

Ribbon Breadcrumb — Spice Version

Ribbon path.

Best forSpice stores.
Where to place itUnder the header.

How to use: add the Product Breadcrumb block and choose ribbon · slash in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 14 / 16UnderlineDot

Underline Breadcrumb — Honey Version

Underlined path.

Best forGift stores.
Where to place itAbove the title.

How to use: add the Product Breadcrumb block and choose underline · dot in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 15 / 16DarkDash

Dark Breadcrumb — Oil Version

Dark path.

Best forPremium stores.
Where to place itTop of product pages.

How to use: add the Product Breadcrumb block and choose dark · dash in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
DESIGN 16 / 16PlainPipe

Plain Breadcrumb — Classic Default

Plain pipe path — simplest default.

Best forAny store.
Where to place itTop of product pages.

How to use: add the Product Breadcrumb block and choose plain · pipe in its style settings

What you can customize in this widget
ColorsHover color, Current color, Sep color, Background color, Border color, Chip background, Box background, Box border color
Font & text sizeSize
Size & spacingGap, Radius, Box margin, Box background size, Box radius
Layout & styleDesign, Text align
Show / hide optionsHome, Home icon, Shop, Cat, Cat full, Current, Schema, Nowrap, Bold current, Divider, On, Orig
Text, images & linksSource, Home text, Shop text, Current link, Trim, Prefix, Items, Sep, Sep custom, Padding y, Padding x, Space below, Link color, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0