# Breadcrumbs

The **Breadcrumbs Widget** is used to display the links that let your visitors navigate through the hierarchical structure of your site.

### Using Breadcrumbs widget

Go to your site and start editing the page with Elementor.

### Step 1:

Select the **Breadcrumbs** widget from the menu bar on the left-hand side of your screen then drag and drop it in the selected area.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FFHAVWtaPghFTUq9c6FOF%2FCompanion%20-%20breadcrumbs%20add.png?alt=media\&token=47e5e0ac-539d-422b-b1c4-f398657cae54)

### Step 2:

You will get a window with the basic setting options under the **Content** tab for different screen resolutions:

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FXSEptqbf6Bph2xkayW6M%2FCompanion%20-%20breadcrumbs%20content.png?alt=media\&token=8443e103-99dc-4f35-90b5-1fd64249a95a)

### Step 2:

If you want to add motion effects, background, or make the page responsive, click on ‘Advanced**’** to explore those options. This **‘Advanced’** tab is a default feature of Elementor. Give a read to [this Document](https://docs.elementor.com/article/571-advanced-tab) to know more about Advanced features and their uses.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FA3J0TpljFt6KmNP4oAub%2FCompanion%20-%20breadcrumbs%20adv.png?alt=media\&token=34e10d40-3980-4252-acd5-d9570ffc4978)

Finally, after completing all the customization click on ‘Publish’ to see your work live.

![](https://1186712708-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fe1Jo7DkgxZUy8C30NAXD%2Fuploads%2FBHi2r8fgA3n8Gyz3eCEC%2FCompanion%20-%20breadcrumbs%20final.png?alt=media\&token=2740ed2b-d774-4eeb-95e9-7c85e5c6c7d1)

Great job! You have done it successfully.