Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

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

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. 

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. 

1.1 Group Widget OptionImage Removed 


For now we will we not do any modifications on the Group Widget Option. 1.1 Group Widget OptionImage Added 
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. 

Image Added


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 Removed

Image Added
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 go are taken out of the widget editor and are back in your breadcrumb menu. 
  5. Click 'create menuCreate Menu' if you where not working on an existing menu, if you where, click Save. 

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. 

...

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 Removed


Image Added
Image 1.3 Changing the Localized Options. 


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

Image Added
Image 1.4 Our first breadcrumb.

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 Added
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 Removed
 

Image Added
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 Added 
Image 1.4 Our breadcrumb structure.

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

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 Added
Image 1.5 Select label dropdown.


Save and open your page to see the changes! (star)

Image Added
Image 1.6 Show label option. 


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

Image Added 
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.