Breadcrumb

Introduction

How does it work?

This section is used for customizing the styling and look & feel of the Breadcrumb{Learn more} for any pair builder{Learn more} (e.g Ring Builder for pair maker).

Please refer to the following video for more details:

Appearance of Breadcrumb

Breadcrumb Radius (px)

Value in this field will be used to customize the corner radius of the Breadcrumb border. It supports Pixels values only. Be sure to append “px” at the last.

Admin Panel
Output

Note:- Below you will find mention of active and inactive breadcrumb fields. Active means the step on which the user presently is on and the rest steps are considered inactive. So, here you can customize fields for active and inactive breadcrumb steps.

Breadcrumb Active Background Color

You can use this field to customize the background color of the active Breadcrumb step.

Admin Panel
Output

Breadcrumb Inactive Background Color

You can use this field to customize the background color of the inactive Breadcrumb step. 

Admin Panel
Output

Breadcrumb Number Icon Active Color

You can use this field to customize the Icon color of the Breadcrumb active part. 

Admin Panel
Output

Breadcrumb Number Icon Inactive Color

You can use this field to customize the Icon color of the Breadcrumb inactive part. 

Admin Panel
Output

Breadcrumb Title Active Color

You can use this field to customize the Title color of the Breadcrumb active part. 

Admin Panel
Output

Breadcrumb Title Inactive Color

You can use this field to customize the Title color of the Breadcrumb inactive part. 

Admin Panel
Output

Breadcrumb Actions Active Color

You can use this field to customize the Action color of the Breadcrumb active part. 

Admin Panel
Output

Breadcrumb Actions Inactive Color

You can use this field to customize the Action color of the Breadcrumb Inactive part. 

Admin Panel
Output

Breadcrumb Show/Hide Icons

If you enable this field then it will show Breadcrumb Icons on the front-end. Disable it, if you want to hide Breadcrumb Icons from the front-end.  

Hide Border

If you enable this field then it will hide the Breadcrumb border on the front end.

Fixed Navigation Step

Enable this option if you want to keep fixed order of steps’ navigation in pair builder {Learn More} e.g. in the ring builder you may want to show Diamond step always as step number 1 no matter even if the user starts with setting then the user will be loaded to setting step but it will be presented as the second step on UI of your website.

Text for Change Action

Value in this field will change the name of the “change” action of the breadcrumb step’s item.

Admin Panel
Output

Breadcrumb prefix text

Value in this field is used to set prefix words on the breadcrumb, by default ‘Choose a’.

Admin Panel
Output

Wrap title on mobile

If you enable this field then it will automatically wrap the large title in the breadcrumb steps for the mobile view. 

Header Font Family

Value in this field will be used to change the font family of the breadcrumb heading. Be sure to specify the exact font family name.

Admin Panel
Output

Step Number Font size

Value in this field defines the size of the step number in the Breadcrumb Header. It supports Numeric values only.

Admin Panel
Output

Header Font Size 

Value in this field will be used to change the font size of the heading. It supports Numeric values only. 

Admin Panel
Output

Icon Size

Value in this field defines the size of the Icons in the Breadcrumb Header. It supports Numeric values only.

Admin Panel
Output

Was this page helpful?