What is the Breadcrumb element in GemPages?
A breadcrumb is a navigational element that helps users understand their current location within a website or application. It typically appears as a trail of clickable links at the top of a webpage or interface, showing the hierarchy of pages or sections the user has navigated through to arrive at the current page.
We will go over all the settings for the Breadcrumb element in GemPages Editor Version 7 in the section below.
How to add and configure the Breadcrumb element?
Step 1: Go to GemPages Dashboard > Preferences > Store settings. Under the Other settings section, turn on “Include the collection handle in the URL path for products accessed from a collection.“
Step 2: Go back to the Pages section and locate your target page to open the editor.
Step 3: From the left sidebar, enter Breadcrumb in the search bar, then drag and drop the element to the top of your page.
Configure the Settings tab
The Settings tab of the Breadcrumb element helps you fine-tune the appearance, layout, and interactive behavior of the navigation trail.
Separator Icon
Customize the separator between breadcrumb items (e.g., /, >, →):
- Icon: Choose an icon or character. You can also upload your own .SVG icon.
- Color: Select icon color via HEX or color picker.
- Size: Adjust icon size using +/– buttons.
Text Style
Style the breadcrumb text with full typography controls:
| Option | Description |
| Styles | Choose a predefined text style (e.g. Paragraph 1, Heading 3, etc.) |
| Font | Select a font family from the available options (e.g. Ui-sans-serif) |
| Size | Adjust the font size using +/– buttons |
| Formatting | Enable formatting options: Bold, Italic, or Underline |
| Color | Pick a custom color using HEX or a color picker |
| Font Weight | Choose between weight levels: Normal, Medium, Bold, etc. |
| Line Height | Set the vertical spacing between lines (e.g., 160%) |
| Letter Spacing | Define spacing between characters (e.g., 0.6) |
| Transform | Choose text transformation: AA (uppercase), Aa (capitalize), aa (lowercase) |
Item spacing, Size, and Background
Gap: Adjust the horizontal spacing between breadcrumb items by dragging the slider or entering a specific value manually.
Padding: Adjust the inner spacing of the breadcrumb container (top, right, bottom, left) to create breathing room or align the element with your layout.
Background color: Set a background color for the breadcrumb bar using the color picker or by entering a HEX code for precise control.
Shape
You can give the breadcrumb container a distinctive look:
- Border: Set color, thickness, and stroke style.
- Corner: Define border-radius to round corners (e.g., 8px).
- Shadow: Add subtle or bold shadows, then modify type, direction, color, distance, blur, and size.
Effect
- Hover: Enable hover styles when users interact with breadcrumb links.
- Active: Highlight the current (active) breadcrumb item differently from the rest.
Display options
Hide active page:
- Yes: Hide the current page (last breadcrumb item, e.g., Happy Dog Snack).
- No: Show the complete breadcrumb trail.
Align
This parameter allows you to determine how the element is positioned on your page. You have three options: left-aligned, centered, and right-aligned.
Configure the Advanced tab
For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.
You can also find more helpful tips and video tutorials at GemPages Academy.
Thank you for your comments