---
schema_version: "1"
id: ffc53c99ed854f0a198e20429e75afb8bea402651e89d769946eb4bd92ffc4a4
title: Adding Breadcrumb Navigation to Pages
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_breadcrumb_add.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_breadcrumb_add.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 148a727e77ab6f7b0b7fc87aca44801318c277323d262b71a022f652923561cc
description: 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.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# 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

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition">
        <colgroup>
          <col>
        </colgroup>
        <tbody>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">Available in: Salesforce Classic</td>

          </tr>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">
              <p>Available for purchase in: <strong>Enterprise</strong>, <strong>Performance</strong>,
                and <strong>Unlimited</strong> Editions</p>
              <p style="margin-bottom:0;">Available (with limitations) in:
                <strong>Developer</strong> Edition
              </p>
            </td>

          </tr>
        </tbody>
      </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d163450e74">User
              Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d163450e74 ">To build, edit, and manage Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d163450e74 ">
              <p><samp class="parmname">Site.com Publisher User</samp> field enabled on the
                user detail page</p>
              <p>AND</p>
              <p style="margin-bottom:0;">Site administrator or designer role
                assigned at the site level</p>
            </td>

          </tr>
        </tbody>
      </table>

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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_tip.png)

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](https://help.salesforce.com/s/articleView?id=platform.siteforce_website_properties.htm&release=264.0.0&type=5 "Set properties for the site, such as the home page, site name, and error page, and create an anonymous preview URL that allows other users to review the site before it goes live. The URL is always valid (unless you disable it) and shows the latest work in progress. It's only available to the people you send it to, and can't be found by search engines.").
    - Select a specific site page to set it as the first item in the breadcrumb.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_note.png)
    
    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](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_tab_properties.htm&release=264.0.0&type=5 "The Style pane is a visual CSS editor that lets you modify style properties, such as the background color, font size, and border style, as you work with pages and page elements.") as desired.

#### See Also

- [Add a Navigation Menu](https://help.salesforce.com/s/articleView?id=platform.siteforce_menu_add.htm&release=264.0.0&type=5 "By default, when you create a menu, it's generated from the pages and site map links in the Site Map folder in the Site Pages view. However, you can also create a menu that's generated from the pages in the Landing Pages folder or from the child or sibling pages of a site page.")
- [Edit and Work with Site.com Page Elements](https://help.salesforce.com/s/articleView?id=platform.siteforce_objects_working_with.htm&release=264.0.0&type=5 "The Page Structure pane displays the hierarchy of all elements on the page and is a very useful way of selecting, moving, and reordering elements, particularly for more complicated page designs.")