---
title: "How to Add Breadcrumbs in WordPress?"
url: https://nexterwp.com/docs/add-breadcrumbs-in-wordpress/
date: 2024-11-28
modified: 2026-09-13
lang: en
author: "Aditya Sharma"
description: "Breadcrumbs are the small trail of links at the top of a page, such as Home › Services › Web Design. They show visitors where they are and take them..."
image: https://nexterwp.com/wp-content/uploads/2024/11/How-to-Add-Breadcrumbs-in-WordPress_-1024x519.jpg
word_count: 738
---

# How to Add Breadcrumbs in WordPress?

## Key Takeaways

- Nexter Blocks ofrece un bloque gratuito de Breadcrumbs que crea la ruta para páginas, entradas, categorías, productos de WooCommerce y resultados de búsqueda.
- Activa Breadcrumbs en Nexter > Blocks y añádelo en una plantilla de cabecera, una plantilla individual o una página para mostrar la ruta en todo el sitio o en un tipo de contenido.
- Breadcrumbs Bar incluye los estilos Simple y Modern, alineación izquierda, centro o derecha, y opciones como Home Title / Icon, Separator Icon y Full Width solo en estilo Simple.
- Visibility controla qué migas se muestran y cuántos caracteres admiten; por defecto Home está activado, Parent y Current usan 20 caracteres, Show Terms está desactivado y Enable Schema Markup añade BreadcrumbList.

Breadcrumbs are the small trail of links at the top of a page, such as Home › Services › Web Design. They show visitors where they are and take them back up a level in one click.

The free Breadcrumbs block in Nexter Blocks builds that trail for pages, posts, categories, WooCommerce products and search results.

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

## Before You Start

- **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Breadcrumbs, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Where to add it:** in a header template to show the trail on every page, or in a single template or page for one type of content.

## Learn via Video Tutorial

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

## Steps

- Go to **Nexter > Blocks**, search for **Breadcrumbs** and turn it on.

![The Nexter Blocks settings page filtered to the Breadcrumbs block](https://nexterwp.com/wp-content/uploads/2026/09/breadcrumbs-admin-enable.webp)

- Open your header template, single template or page, add the **Breadcrumbs** block and click **Design from Scratch**.

- In **Breadcrumbs Bar**, pick a **Style** and set the **Alignment**.

![The Breadcrumbs Bar panel with the Simple and Modern styles and Alignment](https://nexterwp.com/wp-content/uploads/2026/09/breadcrumbs-style.webp)

- Open **Visibility** to choose which crumbs show and how long titles may be.

![The Visibility panel with the Home, Parent, Show Terms and Current settings](https://nexterwp.com/wp-content/uploads/2026/09/breadcrumbs-vis-parent.webp)

- Save, then open the page on your site. The editor shows a sample trail, not your real pages.

![A published breadcrumb trail: Home, two parent pages, a shortened parent title and the current page](https://nexterwp.com/wp-content/uploads/2026/09/breadcrumbs-result-default.webp)

## Layout Settings

| Panel | Setting | What it does | Default |
| ----- | ------- | ------------ | ------- |
| Breadcrumbs Bar | Style | **Simple** (plain links) or **Modern** (arrow-shaped tabs) | Simple |
| Breadcrumbs Bar | Full Width | Stretches the bar across its container. Simple style only | Off |
| Breadcrumbs Bar | Alignment | Left, center or right, set per device | — |
| Home Title / Icon | Home Title | Text of the first crumb | Home |
| Home Title / Icon | Icon Type, Icon / Image, Icon Library | Adds an icon or image before the home text | Home icon |
| Home Title / Icon | Custom Home URL | Where the Home crumb links to | Your site's home page |
| Separator Icon | Icon Type, Icon / Image, Icon Library | The icon or image between crumbs | Right angle icon |
| Visibility | Home | Shows or hides the Home crumb | On |
| Visibility | Parent (switch and number) | Shows or hides parent crumbs, and cuts each parent title to this many characters (0–100) | On, 20 |
| Visibility | Show Terms | Adds taxonomy terms on single posts, with Select Taxonomy, Show Parent Category and Show Child Category | Off |
| Visibility | Current (switch and number) | Shows or hides the current page, and cuts its title to this many characters | On, 20 |
| SEO Option | Enable Schema Markup | Adds BreadcrumbList structured data for search engines | Off |

## Style Settings

| Panel | Settings | Notes |
| ----- | -------- | ----- |
| **Common Breadcrumbs** | Typography, Text Normal Color, Border | With Modern also: Gap, Padding |
| **Home Icon / Image** | Padding, Size, Normal Color, Hover Color | |
| **Separator** | Padding, Size, Normal Color, Hover Color | |
| **Separate Background** | Padding, Margin, Border Radius, All, Home, Active | |
| **Content Background** | Padding, Background, Background Color, Border, Border Radius, Box Shadow | Simple style only |

The **Advanced** tab holds the options shared by all Nexter Blocks. With Nexter Blocks Pro it also shows Background Filter, Custom CSS, Event Tracking, GSAP Scroll Interaction, CSS Filters and the Nexter Extras effects (3D Tilt, Advanced Border Radius, Content Hover Effect, Continuous Animation, Magic Scroll, Mouse Parallax and Tooltip).

## How It Behaves

| Where the visitor is | Trail |
| -------------------- | ----- |
| A page with parents | Home › each parent page › current page |
| A blog post | Home › the post's first category and its parents › post title |
| A category archive | Home › parent categories › Archive by “Category” |
| A WooCommerce product | Home › product categories › product name |
| A product category | Home › parent product categories › category |
| Search results | Home › Search Results for “term” |
| A custom post type item | Home › post type name › item title |

- The current page is plain text; every other crumb is a link.- Titles are cut to 20 characters by default, without “…”.- It works the same in the free plugin and with Nexter Blocks Pro, on the Nexter theme and on block themes.

## Limitations

- **Title limits count characters, not words**, although the help text says “word limit”.- **Do not set a limit to 0.** It empties the crumbs. Use 100 to show full titles.- **Show Terms repeats a child category** on posts that already show their category path. Leave it off for normal categories.- **On custom post types, the post type crumb links to your home page** instead of the post type archive.- **Full Width** and **Content Background** only apply to the Simple style.

## Troubleshooting

### I cannot find the Breadcrumbs block

It is switched off. Go to **Nexter > Blocks**, search for Breadcrumbs and turn it on.

### The editor shows Parent Page and Sample Page

That is a preview. The real trail appears on the published page.

### The breadcrumb links are empty

A **Parent** or **Current** limit is set to 0. Set it above 0, such as 100.

### The post type crumb opens the home page

This is a known issue on custom post types. Turn off the first **Parent** switch on that template to remove the crumb.

## Related Docs

- [Show parent pages in breadcrumbs](https://nexterwp.com/docs/add-breadcrumbs-with-parent-page-in-wordpress/)- [Add breadcrumbs to blog posts](https://nexterwp.com/docs/add-breadcrumbs-on-blog-post-single-page-in-wordpress/)- [Add breadcrumbs to WooCommerce products](https://nexterwp.com/docs/add-breadcrumbs-on-woocommerce-product-single-page-in-wordpress/)- [Add breadcrumbs to category pages](https://nexterwp.com/docs/add-breadcrumbs-to-wordpress-category-page/)- [Create a header template in WordPress](https://nexterwp.com/docs/create-header-template-in-wordpress/)