[V6] Breadcrumb Element

What is a Breadcrumb?

A Breadcrumb is a navigation path often located at the top of a page indicating where the user is on the website. It also helps to improve user experience since, rather than using the browser’s “Back” button or the website’s principal navigation, customers may now return to a higher-level page with fewer clicks.

Add the Breadcrumbs element to GemPages Editor

Before we start, you may need to add the Breadcrumbs element from the library to your Editor. Kindly follow the steps below.

Step 1: From your GemPages Dashboard, select the preferred template and enter the Editor.

Step 2: After that, access the Library on the left side of the top bar.

Step 3: Next, go to the Element tab and search for Breadcrumb.

Step 4:  Click on the Breadcrumb element, then “Add element’’.

After that, the Breadcrumbs element is located on the left sidebar of the Editor, under the Module section. Drag & drop it to your chosen position.

Click on the element to view its configurations in the left sidebar, including the Settings and Design tabs.

Configure the Settings Tab

Typography

You can determine the display of the breadcrumb at this point.

• Font Weight: Select your preferred font weight from the dropdown.
• Font Size: Use the slider or input your preferred size in pixels.
• Font: Choose the font for your text label from the drop-down menu. Click on “Open Font manager” to explore more fonts available on GemPages. If you want to use a custom font, kindly take a look at this article.
• Text Color: Pick a color or enter the hex code for the text color.

Spacing with Symbol

Use the slider or input the number into the field to adjust the spacing between the location and the slash icon in pixel.

Current page

In case you want to differentiate the current location page, you can customize it in this section:

• Font Weight: Select your preferred font weight from the dropdown.
• Font Size: Use the slider or input your preferred size in pixels.
• Color: Pick a color or enter the hex code for the text color.

Alignment

This parameter allows you to determine how the element is positioned on your page. There are three options to choose from left-aligned, centered, and right-aligned.

Extra Class

If you wish to further customize the element with coding, please use this field to add a class name and refer to it in the CSS file.

Configure the Design tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article.

That’s it! Click Save and Publish when everything is set up.