Add breadcrumbs to your site

The Breadcrumbs block displays a clickable navigation path from child pages to the parent pages on your site. In this guide, you will learn how to set up the Breadcrumbs block.

Breadcrumbs are a row of links showing the path from a parent page to the current page. For example, a visitor reading a page called “Return Policy” under “Customer Service” would see:

Home / Customer Service / Return Policy

Each item in the path is clickable, so visitors can jump back to any level. Breadcrumbs help visitors:

• Understand where they are on your site.
• Navigate to parent pages without using the back button.
• Discover related content in the same section.

Pages use the parent page to create the breadcrumb navigation in the Breadcrumbs block.

Posts use the post category in the Breadcrumbs block.

The Breadcrumbs block works best when added to a template (like your pages or single posts templates) or template part (like a header or footer), so it appears automatically on all pages of that type.

To add the Breadcrumbs block to a template or template part, follow these steps:

1. Go to Appearance → Editor in your site’s dashboard.
2. Select Templates or Patterns from the sidebar.
3. Choose the template or template part where you want breadcrumbs to appear.
4. Click the + block inserter and search for breadcrumbs.
5. Click the Breadcrumbs block icon to add it to your template.

You can also add the Breadcrumbs block to individual pages or posts, though adding it to a template is more efficient for site-wide navigation.

For more information, visit our detailed instructions on adding blocks.

To configure how the breadcrumbs work on your template, follow these steps:

1. Select the Breadcrumbs block in the editor.
2. Open the block settings sidebar.
3. Under Settings, choose from the following options:
   • Show home breadcrumb: Display a link to your home page as the first breadcrumb.
   • Show current breadcrumb: Show the name of the page or post the visitor is currently on.
   • Separator: Enter the character that appears between breadcrumb items (for example, → or /).

Under Advanced, you’ll find two additional options:

• Show on homepage: Enable this to display breadcrumbs when the block appears on your homepage. For example, if you use the same template part across your entire site and want to display the breadcrumbs on your home page, check this box. When off, the breadcrumb trail is hidden on the homepage even if the block is present.
• Prefer taxonomy terms: By default, breadcrumbs on pages show the parent page path. Enable this to show the category or tag path instead. This only applies to pages that have categories or tags assigned (like a WooCommerce product page).

Change the positioning (none, wide, full width) of the Breadcrumbs block by clicking the Align icon in the toolbar that appears when you select the block.

Apply color, change the typography, and adjust the dimensions and border settings in the Styles section of the block settings sidebar.