# Breadcrumb

## What is Breadcrumb

Breadcrumb is one of the web parts designed by intranet.ai to help companies **create a corporate knowledge base** in SharePoint Online. Creating a corporate knowledge base provides numerous benefits, such as **quick access to information**, **reduced time waste**, **standardized information**, **knowledge retention**, and **more effective collaboration**.

The Breadcrumb web part **helps users navigate the knowledge base** by displaying the **hierarchical path of the current page**. It works like traditional breadcrumb navigation, showing **links to parent pages for easy backtracking**.

**Breadcrumb** is essential for creating a well-organized knowledge base on SharePoint Online. For additional tools to enhance your knowledge base, refer to the manuals for [**Pages Menu**](https://docs.intranet.ai/sharepoint-intranet/components/pages-menu), [**In This Page**](https://docs.intranet.ai/sharepoint-intranet/components/in-this-page), and [**Contributors**](https://docs.intranet.ai/sharepoint-intranet/components/contributors).

{% hint style="info" %}
Explore the **advantages** of intranet.ai **Breadcrumb** by [**clicking here**](https://intranet.ai/features/breadcrumb/) to learn more.
{% endhint %}

***

## Add the Breadcrumb web part to a SharePoint page

* If your page is not already in edit mode, click on **Edit** at the top right of the page.
* Hover your mouse above or below an existing web part. You will see a line with a circled +, like this: <img src="https://docs.intranet.ai/~gitbook/image?url=https%3A%2F%2F2718234637-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FriXlnuemuParrCf7Uotu%252Fuploads%252FccHplKgXfibd4tktmhas%252Fadvanced-search-2.png%3Falt%3Dmedia%26token%3D7d703967-c3f7-4125-834b-f695362bf90b&#x26;width=40&#x26;dpr=4&#x26;quality=100&#x26;sign=34b00d6f&#x26;sv=2" alt="" data-size="line">.
* Click on it and, in the web part search box, enter **Breadcrumb** to quickly find and select the Breadcrumb web part, which is named "IAI - Breadcrumb".

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FXdUs3KpFd5OgMN5XJB3T%2FAdd.png?alt=media&#x26;token=b5382ef4-a86f-4e5a-913e-f306a33db539" alt=""><figcaption></figcaption></figure></div>

* Click the **Edit properties** <img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FXip3tSxdvc9d8A8IhD8F%2Fimage.png?alt=media&#x26;token=e55c340d-de0c-48ce-92ff-6dcc321507a7" alt="" data-size="line"> button on the left of the web part to open the property pane, which consists of one section: General settings. See below for more information on this section.

***

## Configuration

1. [View settings](#view-settings)
2. [General settings](#general-settings)
3. [Filters section](#filters-section)

### View settings

The view settings allows you to customize the appearance of your application by adjusting various layout settings.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FmbrRNhP3ozzxmG0VScuy%2Fimage.png?alt=media&#x26;token=3ebee6be-d95d-475d-b2aa-97d156c174d6" alt=""><figcaption></figcaption></figure></div>

By opening this first configuration, you will see the following options:

* **Do you want to hide the background?**\
  You can choose to hide or display the webpart background The default setting is “No”. This means that, by default, the webpart is characterized by a white background. If you enable this option, the white card background will be completely removed, allowing the content appear directly on the page. As a result, the webpart will be transparent, showing either the selected background image or the chosen SharePoint page color.
* **Do you want to hide the background shadow?**\
  You can choose whether to show or hide the background shadow. The default setting is “No”. This means that, by default, the webpart is characterized by a subtle depth effect that can make the webpart stand out more against the rest of the page. If you enable this option, the shadow behind the background will be removed, giving the web part a flatter, cleaner look without any depth.
* **Select the type of background shadow**\
  If you decide to set the background shadow, a further configuration will appear and you can select the style from High Contrast, Light, or Dark options.
  * If you select **High contrast**, this option creates a strong, bold shadow effect that provides a high level of contrast between the background and the content.
  * By choosing the **Light background** shadow, it will create a soft and subtle effect, giving a more delicate and gentle depth to the background.
  * Finally, the **Dark background** shadow style provides a darker, more intense effect, adding depth and emphasizing the background even more.
* **Enter the application title**\
  Thanks to this configuration, you can customize the application title. If you keep it blank, SharePoint will show the default title “Breadcrumb” at the top left angle of the webpart.
* **Do you want to hide the title?**\
  Here you can select whether to show the webpart title or hide it. If set to visible, the web part title will appear on the left side.

### General settings

The web part property pane includes the following settings:

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FhOAvKb7kS2nCljsUmgEA%2FGeneralSettings.png?alt=media&#x26;token=e20a905e-4bbc-4cfb-995a-9c07e96373ec" alt=""><figcaption></figcaption></figure></div>

* **Enter the breadcrumb cutting path**: you can enter a cutting path to display only a part of the path. The first level (“Home”), corresponding to the home page of the site, is always shown.

> For example: <https://intranetai.sharepoint.com/sites/my-hub/KB/SitePages/SystemPages>

* **Enter the display name for the Home**: you can customize the name of the first level of the path. If you leave this field empty, the name will be “Home”.
* **Do you want to show the name or title of the pages?** You can choose to display the name or the title of pages.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2Fx9atwNHi2NoQ9N9559qJ%2Fimage.png?alt=media&#x26;token=3a1f2d22-b42a-4826-841c-49224b7fb44f" alt=""><figcaption></figcaption></figure></div>

* **Do you want to show the name or title of the folders?** Choose whether to display the **name** or the **title** of the folders you select.
* **Do you want to open the Homepage of the site collection** (if you are in a subsite): If you are currently in a subsite, select whether to open the **subsite homepage** or the **site collection homepage**.
* **Do you want to open the homepages in a new page?** Select **Yes** if you want the homepage to open in a new browser tab or window. Select **No** if you want the homepage to open in the current page.

### Filters section

In this section, you need to enter the folders you want to hide from the web part.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2Fnw9f2UkRZwiv2OToBLpq%2Fimage.png?alt=media&#x26;token=5d5a43e2-9141-4f0b-8b18-574421c08c38" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FkWrE5R6JOq1jVS5g7zKU%2Fimage.png?alt=media&#x26;token=bd0efef9-087b-47bf-8495-0c238fe3de11" alt=""><figcaption></figcaption></figure>

Below is an example of how Breadcrumb is displayed within a SharePoint page:

<figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FKXrfr9rid3mbpHr7FLlr%2FBreadcrumb.png?alt=media&#x26;token=c1a9a06f-a78b-487d-861c-208439b17b5e" alt=""><figcaption></figcaption></figure>

**Please note**: **to activate the breadcrumb navigation links, a page named "Home" must be created at every level of the path**. For example, in the **Policies and Guidelines** subfolder, a page named "Home" must be created in order to activate the corresponding link.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FLIgadQp6unBAR8WYUbuf%2FHome.png?alt=media&#x26;token=5ba7d3de-a21f-499c-b183-b95d2321fd84" alt=""><figcaption></figcaption></figure></div>

While the page **name** must be "Home", the page **title** can be different.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2Fb4uNg2Ego9A8boGRtMn2%2FNameVSTitle1.png?alt=media&#x26;token=c4986352-9a84-4e7c-9fad-2c695d02b832" alt=""><figcaption></figcaption></figure></div>

Each "Home" page can include the Breadcrumb web part to enable backward navigation, along with a descriptive text about the section and relevant links. The following screenshots show an example of a four-tier navigation path moving back from a specific article to the home page of the site:

**Tier 4**: a specific article within the **Policies and Guidelines** subsection.

<figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FUqNEBBtYWhDS7JM1wn6N%2FLevel4.png?alt=media&#x26;token=7cf20280-81eb-48f4-bc64-9b520ccfeb49" alt=""><figcaption></figcaption></figure>

**Tier 3**: the **Policies and Guidelines** subsection, containing articles about key policies and corporate guidelines.

<figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FB06lSxA2sl5ZhlyzvSlL%2FLevel3.png?alt=media&#x26;token=4c9bc413-b76e-4aab-abe2-dfdfe2c5cf7e" alt=""><figcaption></figcaption></figure>

**Please note** that while the name of this page is "Home", its title is "Policies and Guidelines".

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2Fg55qu1WcRFHq2NKpajPC%2FNameVSTitle2.png?alt=media&#x26;token=56c608cb-db01-45dd-8bf1-d40871b0c8dc" alt=""><figcaption></figcaption></figure></div>

**Tier 2**: the **Documents** section, a collection of categorized resources.

<figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2Flsdnxc0veVFhErkjBZCY%2FLevel2.png?alt=media&#x26;token=2852f941-1cc8-4979-8d27-5dd28afe1114" alt=""><figcaption></figcaption></figure>

**Tier 1** is the **home page** of the knowledge base.

{% embed url="<https://intranet.ai/>" %}