Salesforce Docs Portal

Adding Breadcrumb Navigation to Pages

Add a Breadcrumb page element to your page to help users navigate through your site and show the page’s location in the site hierarchy.

Required Editions

Available in: Salesforce Classic

Available for purchase in: Enterprise, Performance, and Unlimited Editions

Available (with limitations) in: Developer Edition

User Permissions Needed
To build, edit, and manage Site.com sites:

Site.com Publisher User field enabled on the user detail page

AND

Site administrator or designer role assigned at the site level

Breadcrumb navigation is based on the pages and links in the site map and usually supplements menu navigation. You can hide a page in menus, breadcrumbs, and the site map by selecting the Hide Page checkbox found on the Properties pane for each page. This setting also prevents website visitors from accessing the page’s direct URL. By default, all pages are visible.

Tip
Tip To save time and effort, add a Breadcrumb page element to a page template to automatically include it on every template-based site page. The breadcrumb on each derived page dynamically updates based on its location in your site map.
  1. Open the page or page template that you want to add the breadcrumb element to.
  2. Drag a Breadcrumb from the Page Elements pane onto the page.
  3. In the Properties pane, under Root, specify a custom root node for the breadcrumb. By default, the root value is set to None, which builds the breadcrumb structure based on the page’s location in the site map.
    • Select Home Page to set the site’s home page as the first item in the breadcrumb. To find out how to set a site’s home page, see Configuring Site Properties.
    • Select a specific site page to set it as the first item in the breadcrumb.
    Note
    Note You can’t set a site map link as a custom root node in a breadcrumb.
  4. In the Properties pane, under Separator, you can customize the separator used between breadcrumb nodes.
    By default, the separator is >. However, you can change it to another text symbol or insert HTML code for an image in your site, such as <img src='/separatorimage.jpg'/>.
  5. To style the breadcrumb:
    1. Click the Style pane and ensure Class is selected.
    2. Choose an option from the Style drop-down list.
    3. Adjust the values in the Visual tab as desired.

See Also