Versions Compared

Key

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

...

If your environment already have 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 Removed1.1 Group Widget OptionImage Added 
Image 1.1 Adding Group Widget Options to a menu. 


For now we will we not do any modifications on the Group Widget Option. 

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 Breadcrump 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. 


Next: Breadcrumb styling.