---
title: "How to Add Breadcrumbs in WordPress?"
url: https://nexterwp.com/docs/add-breadcrumbs-in-wordpress/
date: 2024-11-28
modified: 2026-04-14
author: "Aditya Sharma"
description: "An organized navigation structure can improve the user experience on your WordPress website. Using breadcrumbs can help improve your navigation on your website. Breadcrumbs are like a trail of links..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-Breadcrumbs-in-WordPress_-1024x519.jpg
word_count: 818
---

# How to Add Breadcrumbs in WordPress?

## Key Takeaways

- Nexter Blocks includes a Breadcrumbs block that allows users to add breadcrumbs to their WordPress website.
- Breadcrumbs block offers two unique styles for customization, including a fullwidth option.
- Users can set a custom URL for the home link in the Breadcrumbs block.
- The Breadcrumbs block includes an SEO option to enable Schema Markup for better search engine visibility.

An organized navigation structure can improve the user experience on your WordPress website. Using breadcrumbs can help improve your navigation on your website. Breadcrumbs are like a trail of links that show you where you are on a website and let you go back to the pages you were on before. They're super handy, especially on websites with many pages and sections, because they help you get around more easily. 

With the Breadcrumbs block from Nexter Blocks, you can easily add beautiful breadcrumbs to your WordPress website.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-breadcrumb-bar/)

## Required Setup

- Make sure the default WordPress Block editor is active. 

- You need to have the [Nexter Blocks](https://wordpress.org/plugins/the-plus-addons-for-block-editor/) plugin installed and activated.

- Make sure the Breadcrumbs block is activated. To verify this, visit Nexter → Blocks → and search for Breadcrumbs and activate.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=ADwYy5zB9xc&pp=0gcJCc0JAYcqIYzv

## How to activate the Breadcrumbs Block?

Go to 

- **Nexter **→ **Blocks **

- **Search **the block name and** turn**** on the toggle**.

![](https://nexterwp.com/wp-content/uploads/2024/11/Nexter-Blocks-Breadcrumbs-Activation.png)

## Key Features

- **Two Styles** - You can choose from two unique breadcrumb styles.

- **Fullwidth Breadcrumb** - You can easily make a fullwidth breadcrumb. 

- **Home Title/Icon** - You can easily add an icon or title to the home link.

- **Custom Home URL** - You can easily set a custom URL to the home link.

- **Visibility** - You can easily show or hide the home page, [parent page](https://nexterwp.com/docs/add-breadcrumbs-with-parent-page-in-wordpress/) or the current page from the breadcrumb trail.

## How to Use the Breadcrumbs Block?

To add a breadcrumb to your WordPress website, you should add the Breadcrumbs block to the header template so it can be accessible throughout the website.

To create the header template, you can use the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/).

Add the Breadcrumbs block.

Then click on the **Design from Scratch** button to design the layout from scratch.

![](https://nexterwp.com/wp-content/uploads/2024/11/breadcrumbs-design-type-1024x190.png)

> *Note: By clicking on the Import Pre-Designed Template button, you can [import a preset template](https://nexterwp.com/docs/import-templates-in-nexter/#Import-Preset-Designs-for-Specific-Blocks-in-Nexter) and customize it as per your requirements.*

### Breadcrumbs Bar

In the **Style** section, you’ll find two pre-defined style options, you can select the suitable option.

![](https://nexterwp.com/wp-content/uploads/2024/11/breadcrumbs-layout-style-new.png)

If you select the Simple style you’ll see the **Breadcrumbs Full Width** toggle, with this, you can make a fullwidth breadcrumb bar.

Then, from the **Alignment** section, you can manage the breadcrumb links alignment for different devices.

### Home Title/Icon

From the **Home Title** field, you can change the home text of the breadcrumb.

Then, from the **Icon Type**, you can add an icon or image to the home text in the breadcrumb. 

When enabled, from** ****Icon / Image**, you can add an icon or image to the home text in the breadcrumb.

Depending on the selection, you’ll get different options to add the image or icon to the home text in the breadcrumb.

In the **Custom Home Url** field, you can add a custom link to the home link of the breadcrumb.

![](https://nexterwp.com/wp-content/uploads/2024/11/breadcrumbs-home-title-icon-new.png)

### Separator Icon

From the **Select Icon** dropdown, you can add an icon or image as a separator in the breadcrumb.

When enabled, from** ****Icon / Image**, you can add an icon or image. 

Depending on the selection, you’ll get different options to add the image or icon. 

![](https://nexterwp.com/wp-content/uploads/2024/11/breadcrumbs-seperator-icon-new.png)

### Visibility

In the Visibility tab, you’ll find four options - 

**Home** - From here, you can show or hide the home link from the breadcrumb.

**Parent** - From here, you can show or hide the parent page link from the breadcrumb.

By enabling the **Parent** toggle, you can also adjust the limit of the parent title by words.

**Show Terms** - From here, you can show parent and child taxonomy on a single post template.

When enabled, you can select a taxonomy (normal taxonomy and custom taxonomy) from the **Select Taxonomy** dropdown.

By enabling the **Show Parent Category** toggle, you can show the parent taxonomy.

Then, by enabling the **Show Child Category** toggle, you can show the direct child of the parent taxonomy.

**Current** - From here, you can show or hide the current page link from the breadcrumb.

By enabling the **Current** toggle, you can adjust the limit of the current title by words.

![](https://nexterwp.com/wp-content/uploads/2024/11/breadcrumbs-visibility-new1.png)

### SEO Option

From the **Enable Schema Markup** toggle, you can make your breadcrumb SEO friendly by adding Google Schema to it.

![](https://nexterwp.com/wp-content/uploads/2024/11/breadcrumbs-seo-options-new.png)

## How to Style the Breadcrumbs Block?

To style the Breadcrumbs block, you’ll find all the styling options under the **Style** tab.

**Common Breadcrumbs **- From here, you can manage the breadcrumb typography, color and border.

![](https://nexterwp.com/wp-content/uploads/2024/11/breadcrumbs-style-new.png)

**Home Icon / Image **- From here, you can manage the home icon padding, size, color, and border-radius.

**Separator **- From here, you can manage the separator icon padding, size, and color.

**Separate Background **- From here, you can manage the breadcrumb item padding, border radius, and background color separately.

**Content Background **- This option is only available for the Simple style. From here, you can manage the breadcrumb bar background, border, box shadow, etc. 

Advanced options remain common for all our blocks, you can explore all it options from here.

[View Advanced tab tutorial.](https://nexterwp.com/docs/add-advanced-tab-in-wordpress/)

## Frequently Asked Questions

**Q: What should I do if the Breadcrumbs block is not showing up?**
A: If the Breadcrumbs block is not appearing, ensure that the Nexter Blocks plugin is installed and activated. You can verify this by navigating to Nexter u2192 Blocks and checking if the Breadcrumbs block is activated. If itu2019s not, simply turn on the toggle to enable it.

**Q: How do I add a custom URL to the home link in the Breadcrumbs block?**
A: To add a custom URL to the home link, go to the Home Title/Icon settings within the Breadcrumbs block. There, you can enter your desired URL in the Custom Home URL field. This feature allows you to link to a different homepage or a specific landing page, improving navigation.

**Q: What are the SEO benefits of using the Breadcrumbs block?**
A: Using the Breadcrumbs block can enhance your site's SEO by providing clear navigation paths for users and search engines. By enabling the Schema Markup toggle, you can add Google Schema to your breadcrumbs, which helps search engines understand your site's structure better, potentially improving your search rankings.

**Q: What visibility options are available for the Breadcrumbs block?**
A: The Breadcrumbs block offers several visibility options. You can choose to show or hide the home link, parent page, and current page links. Additionally, you can manage the display of parent and child taxonomies, giving you control over what appears in the breadcrumb trail, which can simplify navigation for users.