Breadcrumbs

Before you start, make sure you have added the page(s) you want to have breadcrumbs on to the sitemap. 

If your environment already has an existing breadcrumb menu, please go to step 2. 

Step 1. Creating the breadcrumb menu 

Go to the main left menu pane and choose 'Menus'.

Here you will see a list of existing menus, on the bottom of the list is the button 'Create Menu', click on this.   

You now have an empty menu you can start building a breadcrumb structure from! Remember to give your new menu a fitting name so it is easy for others to find it. 

Step 2. Add your pages to the breadcrumb menu. 

Click on the 'Widgets' bar to the right of your menu to see the different widget options we can use. 

Grab the widget 'Group Widget Options' and drag it to your menu as shown on the screenshot below. 

 
Image 1.1 Adding Group Widget Options to a menu. 

Click on 'edit' ion the Group Widget Option and click on 'Hide the menu item' if this is not done in some cases the menu item will also be present in your main menu. 

Go back to the 'Widgets' bar and drag the 'Page Link' widget to under the 'Group Widget Options' as shown on the screenshot below. 

Image 1.2 Adding Page link to a menu.

In this widget you need to do some changes. 

1. Press the 'Edit the Widget' button (on your widget you have three buttons, edit is the one in the middle). 
2. Under the tab 'General' you will see the field Label, here you have to type in the name of your page, e.g. 'Contact Us'. This is the name of the breadcrumb the user will see, so remember to also change it for different languages if that is an option in your environment.  
3. On the bottom of tab 'General' you have the field Site and Page. Choose the correct site and the correct page. 
4. Click save so you are taken out of the widget editor and back in your breadcrumb menu. 
5. Click 'Create Menu' if you where not working on an existing menu, if you where, click Save. 

Step 3. Add the breadcrumb menu to your page. 

Go to the page you want to add the breadcrumb, and based on the structure of the page, add the widget 'Breadcrumb' to your structure. 

Click on 'Edit the widget', in the tab 'General' you will see the 'Localization Option' with two fields. 

Select the breadcrumb menu you just added your page to. 

You will now see the page you added in the 'Page Link' widget in the menu pop up! If it does not, check that you are on the correct page or go back to your menu and check that you added the correct page. 



Image 1.3 Changing the Localized Options. 

Save your changes and go to your page - you can now look at your first created breadcrumb! 

Image 1.4 Our first breadcrumb.

Step 4. Adding more breadcrumbs and creating a structure.   

Lets say our Contact Us page is a sub-page of our page Sitemap (maybe unlikely, but imagination is important). 

Go to your breadcrumb menu.  

Add a new 'Group Widget Option' between the existing 'Page Link' and 'Group Widget Option' where you want to create a new page in your breadcrumb structure as shown on the image below. 

Image 1.4 Adding more widgets to our structure. 

Click on edit button of the newly added widget and add the label of page you want to add, in this case we add the label 'Sitemap'.  Remember to add the label to all languages. 

While you still have the edit options open, go to the tab 'Breadcrumb Options'. Click on the option 'Want to use this option as a breadcrumb?' and add the site and page, in this example I added the sitemap page. 

Click save in both the edit option and on the menu page.

Now go to your page, and open the breadcrumb widget. Refresh the menu by finding it in the dropdown again, you will now see that two pages pop up under it! 

Image 1.4 Breadcrumb pages automatically updated. 

Go to the URL of your page and check if everything has gone as it should. By making this tutorial I forgot to copy the Localization Options in the breadcrumb widget to all languages, and hence, I had no idea why it did not work for a couple of minutes. 

 
Image 1.4 Our breadcrumb structure.

You know have a small breadcrumb structure!  You can repeat this step and add more group widget options if you want a longer breadcrumb structure. 

Step 5. Styling, change the home icon to text. 

Go to the page you want to edit the breadcrumbs on and localize the breadcrumb widget. 

Click on 'edit the widget'. 

On the button of the general tab you will see a dropdown choice with the headline 'Select the home label type as'. 

Chose 'Label' in the dropdown as shown on the image under. 

Image 1.5 Select label dropdown.

Save and open your page to see the changes! 

Image 1.6 Show label option. 

If you chose 'Show both label and icon' your breadcrumb structure will look like this now: 

 
Image 1.7 Show both label and icon option. 

If you want to change it back to only having the icon you can choose 'Icon' in the dropdown.