Breadcrumbs

Breadcrumbs

Breadcrumb is secondary navigation that helps users to understand the relation between the current page and previous pages of the same domain.

Breadcrumbs would easily guide users for a path to the current page, how they landed here, which category in this page falls to, what is parent page/ product of this page/product etc.

Pro tip
Use breadcrumbs in every page/product, you never know from where user landed to your that particular page.

How to use the Breadcrumb block of The Plus Addons For Gutenberg

The Breadcrumb block comes with multiple functions. Let’s understand how to use this block in the tutorial below.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add breadcrumb into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing breadcrumb after “/” sign, eg.“/breadcrumb”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Breadcrumbs Bar

Style

Select your preferred layout for breadcrumbs here. We have provided a modern and simple one.

Full Width (Style-1)

Enabling full width will make the element stretched 100% in a horizontal direction into its base container.

Alignment

Alignment of component into left, center or right direction.

Home Title/ Icon

Home Title

Title text for the page link which is going to display as home or root.

Icon Type

Icon type is a selection of whether you want an icon or not.

Icon/ Image

Selection of icon type whether you want icon as a symbol icon or any image.

Icon Library

On selection of Icon in the previous dropdown, you’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased licence for the pro plan and activation has been done you’ll use pro icons.

Custom Image

On selection of Image in the previous dropdown, you’ll be asked to choose and upload the image, and after uploading the image basic styling option for the image would be displayed there.

Separator Icon

Icon Type

Icon type is a selection of whether you want an icon or not.

Icon/ Image

Selection of icon type whether you want icon as a symbol icon or any image.

Icon Library

On selection of Icon in the previous dropdown, you’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased licence for the pro plan and activation has been done you’ll use pro icons.

Custom Image

On selection of Image in the previous dropdown, you’ll be asked to choose and upload the image, and after uploading the image basic styling option for the image would be displayed there.

Visibility

Home/ Parent/ Current

Toggle switch to display links for Home/ Parent/ Current in breadcrumbs navigation.

Letter Limit

Parent/ Current

Set a maximum limit of letters to be displayed as a link title for Parent/ Current items in navigation.

SEO Option

Enable Schema Markup

Option provided for Search engine optimization, which will convert this accordion into FAQ type schema used for SEO.

2. Style

The Style tab is used for customizing the appearance of all the Breadcrumb block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Common Breadcrumbs

Typography

Assign a size, weight, spacing and much more to fonts.

Text Color

A color picker to assign a suitable color to the text.

Border

Draw a border around the element and give width and color to it.

Home Icon/ Image

Padding

Put in some inner space to an element.

Size

Set icon size from here.

Normal Color

A color picker to assign a suitable color to the icon.

Hover Color

A color picker to assign a suitable color to the icon on the hover.

Separator

Padding

Put in some inner space to an element.

Size

Set icon size from here.

Normal Color

A color picker to assign a suitable color to the icon.

Hover Color

A color picker to assign a suitable color to the icon on the hover.

Separator Background

Padding

Put in some inner space to an element.

Margin

Put in some outer space to an element.

Border Radius

Set the radius curve of the element’s corner.

Color (All/ Home/ Active)

A color picker to assign a suitable color to the background of navigation link titles.

Content Background

Padding

Put in some inner space to an element.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.