How to use Breadcrumb Trail

The Breadcrumb Trail element is great to use for membership sites or sites that have a lot of pages organized under “parent/child” page relationships. This will provide an easy way for your site visitors, or members, to navigate back to previous pages so they don’t get lost on your site.

This element is designed to be used on child pages. A child page is a page that is nested under another page (a Parent Page). 

Here is an example of what a Parent/Child page structure looks like when you navigate to the “Pages” area of WordPress: 

In the example above, the “Hub” page is the Parent page for Course 1, and Course 1 is the Parent page for the lesson pages. 

You can make any page on your site a child page by going to the “quick edit” screen from the “pages” area and then selecting the Parent Page:

If we add the Breadcrumb Trail element to one of the lesson pages, the element will link back to the hub page, and the course page, and also link to the lesson page we are currently on. This is an example of what this will look like: 

We recommend putting the Breadcrumb Trail element in a spot where it will be easy to see, such as right below the header and/or further down the page after the main content. This will help reduce confusion by your site visitors or members where they are in the site and show them a path back to where they were. It will certainly improve the user experience to have this.

How to add the Breadcrumb Trail Element to your page: 

To add the Breadcrumb Trail element to your page, you can click the + icon in the page where you want to add the element, or simply click the +Element in the top left of the page (which may also just show as a “+” if you are already editing elements).

You can start typing in the search box to find the element. Once you locate the element, simply drag it over to the spot you want to add it to on the page:

Note: This element does not come with any pre-defined styles like some of our other elements, but we may add them in the future.

How to customize the Breadcrumb Trail Element

Now that we have added the Breadcrumb Trail element to the page, lets take a look at the customization features built into this element.

When you click on any element in the page builder, you’ll see an inline element toolbar. For the Breadcrumb Trail element, you’ll see that it looks like this

customize the icon that shows between the links, click on the first option in the toolbar and you’ll see several options. As you can see in the image below, there are options to choose the icon, icon size, spacing, and position. On the next tab over you can also set the Icon color options.

customize the text options, click the text icon and you’ll see the same options for text as any other text element

customize the Inactive, Active, and Hover colors for the links, you can click on the color icon in the toolbar. The page you are on is the active page, while other links in the element are inactive. Hover color is when you move the mouse pointer over any of the links. 

You can also
customize the background properties for this element. While we do give a lot of options here, please consider not going too wild on the options so your visitors can still actually see the breadcrumb trail 🙂 

As with most elements, you can also customize the Borders and Shadows. Best used when setting a background color. You could make the breadcrumb trail look more like a button this way if you wanted.

Here is an
example of using border radius and shadow styling along with a background color (We also changed the padding from advanced options). This is just one of many ways you can improve the visibility of this element so it can easily be seen:

You can also
customize the alignment and whether the links stack or not which can be useful on mobile and tablet devices. 

move the element to another spot on your page, just use the cross arrows icon to drag the element:

You can also clone the element. This is useful if you created the element the way you want and wish to use it elsewhere in the same page. 

If you should decide that you no longer want the element, or have added too many of them you can also delete the element by clicking the trash icon. 

Clicking on the gear icon will open up additional settings for this element where you can set the space above/below the element, max width of the element, and also the element alignment. This alignment setting is different than the previously mentioned alignment. The previous setting aligns the breadcrumb trail itself within the element. This one actually aligns the element within the column or row that you have it in. This alignment will only work when the element has the max width set less than 100% or less than the width of the column or row that it is within. 

Advanced Options Sidebar

Clicking on “Advanced Options” will open up the left sidebar for this element where you’ll be able to change more settings

Positioning – this is where you can set the padding and margins, and you can also find the same alignment and width options here as well.

Responsive – You can use this to show/hide the element based on the device (desktop, tablet, mobile). The “Show all hidden elements” will show elements hidden by the responsive options in case you need to edit something that you may not see since it might be hidden from desktop or mobile. 

Animation & Delay – This is where you can make the element animate when the page loads, or when scrolling to the element. You can also delay the element from showing till a certain time has passed as well. There are a number of options here to choose from. Here is one example of the settings you could use:

Advanced – These are less commonly used settings that we didn’t include in other element options. You can get the element ID, create a caption for this element, set custom CSS classes, and also change the Z-index (Z-index is used in CSS to layer things on top of each other – giving an item a higher Z-index will bring the item on top of other items that have a lower Z-index). These are advanced and we would not recommend changing those options unless you really know what you are doing. 

Also in the element sidebar you’ll see at the top, a “Hover” tab. You can set the transition duration here in seconds or milliseconds. This can be helpful for some of the other settings.

In conclusion, there are many reasons why someone would want to have a breadcrumb trail element on their site. The Breadcrumb Trail element in OptimizePress is highly customizable just like any other element we offer. Having a wide range of options for this element means that you can make it yours, and match your site branding to make it easy to see which will enhance your site visitors experience while navigating through your site.

If you have any questions about using this element, please reach out to our team and we’ll be happy to guide you further. 

Updated on October 5, 2023

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!
Contact Support