The breadcrumb is a chain of links that facilitates orientation within the website, especially if it’s an ecommerce website or a website with multiple pages (categories & subcategories).
To add this component into your website, go to the Customizer, and click on the + icon to open the list of components.
Search for the breadcrumb component and use drag-and-drop to add it to your web page.
Click on the component in the page, and open the panel with the corresponding customization settings.
Under the Content tab, you will adjust the breadcrumb properties, as follows:
Alignment – you can align the breadcrumb links to the left, at the center or to the right of the page.
In the example below, the breadcrumb is centred:
Separator – this option lets you fill in the blank space with the symbol you want to choose for separating the links in the breadcrumb.
In the example below, the symbol we used is “-”:
Use prefix – this option allows you to place some text in front of the breadcrumb and the succession of links. Enable this option to explicitly show users what page they are viewing, within the website.
Prefix text – from here, you can change the default text with the specific text you want to place in front of the breadcrumb links.
In this case, the text is “You are here:”
Show home as icon – if you enable this option, you’ll add an icon that’s suggestive of the homepage and serves to better orient readers for getting back to the homepage.
Icon – you can choose the icon from the icons library, by clicking on Change and searching for the best alternative:
Under the Style tab, you can further adjust the appearance of the breadcrumb:
Prefix text color – from here, you can change the color of the prefix text, so it should be visible enough and integrate well into the overall color scheme.
Prefix spacing – select a value on the slider, to place the prefix text at a longer or shorter distance from the breadcrumb links. Larger values mean a longer distance from the breadcrumb links.
Icon size – set the dimensions of the icon representative of the homepage. Larger values mean a larger icon showing next to the homepage link.
Path and icon color – this is the color you give to the items that are present in the breadcrumb: color of the links text, and color of the icon corresponding to the homepage.
Hover color – this option refers to the color of the links as they appear when users hover with their mouse over them.
Active color – this refers to the color of the text corresponding to the active item (the page users are currently viewing).
Separator color – this is the color of the symbols that separate links in the breadcrumb. Click on the color picker and choose the color that you want. It should be visible enough for the breadcrumb to meet its purpose.
Typography – click on the pencil icon to open the panel with customization options for the typography of the breadcrumb text.
You can select:
- The font family
- The weight of the font
- The dimensions of the font
- You can turn the text to uppercase, lowercase, capitalize it, etc.
- You can set the height of the line of text
- You can select the distance between the letters of the text corresponding to the breadcrumb links
For advanced customizations related to the breadcrumb component, please use the settings under the Advanced tab.