Get Started

Breadcrumb

5 min read

0:00 5:05

The Breadcrumb Block displays a navigation trail that helps visitors understand their current location within your website. You can customize the home icon and text, separator symbol, category path, current page title, alignment, typography, colors, borders, and spacing.

How to Add a Breadcrumb Block

Follow these steps to add the Breadcrumb Block to your page or post.

Step 1: Add the Breadcrumb Block

  1. Open the page or post where you want to add the Breadcrumb Block.
  2. Click the + (Add Block) button.
  3. Search for Breadcrumb in the block search field.
  4. Select the Breadcrumb block from the ShapeBlock category.
  5. The block will be added to your editor.
  6. Select the block to access its customization options in the sidebar.

Step 2: Configure the Breadcrumb Block

The Breadcrumb Block includes four tabs for customization:

  • Settings: Configure the category path, current page, home icon and text, and separator symbol.
  • Layout: Set the breadcrumb alignment for desktop, tablet, and mobile devices.
  • Style: Customize the container, home icon, breadcrumb links, separator, and current page appearance.
  • Advanced: Adjust the spacing and background of the entire block.

Settings Tab

The Settings tab contains the following panels.

1. Content

  • Show Category Path: Display the post’s category and parent categories before the post title.
  • Show Current Page: Display the title of the current page as the last breadcrumb item.

2. Home

  • Show Home Icon: Enable or disable the home icon at the beginning of the breadcrumb trail.
  • Home Icon: Choose the icon displayed for the home link. This option appears when Show Home Icon is enabled.
  • Show Home Text: Enable or disable the home text beside the home icon.
  • Home Text: Customize the text displayed for the home link. This option appears when Show Home Text is enabled.

3. Separator Symbol

  • Separator Type: Choose how to display the separator between breadcrumb items.
    • Text / character: Use a text character as the separator.
    • Icon: Use an icon as the separator.
  • Separator Text: Enter the separator character or symbol, such as /, », ›, or -. This option appears when Text / character is selected.
  • Separator Icon: Choose the icon displayed between breadcrumb items. This option appears when Icon is selected.

Layout Tab

The Layout tab contains the following panel.

1. Alignment

  • Alignment: Set the alignment of the breadcrumb trail separately for desktop, tablet, and mobile devices.
    • Default: Use the default alignment.
    • Left: Align the breadcrumb trail to the left.
    • Center: Center the breadcrumb trail.
    • Right: Align the breadcrumb trail to the right.

You can also adjust the alignment using the block toolbar in the editor.

Style Tab

The Style tab contains panels for customizing the breadcrumb container, home icon, links, separator, and current page. The Home Icon panel appears only when Show Home Icon is enabled in the Settings tab.

1. Container

  • Background: Set a background color or gradient for the breadcrumb container.
  • Border: Customize the container border.
  • Border Radius: Adjust the corner radius of the container.
  • Padding: Adjust the inner spacing of the container. Responsive settings are available for desktop, tablet, and mobile devices.

2. Home Icon

This panel appears when Show Home Icon is enabled in the Settings tab.

  • Normal / Hover: Switch between normal and hover appearance settings.
  • Icon Color: Customize the home icon color for the selected state.
  • Background: Set the home icon background color or gradient in the normal state.
  • Border Radius: Adjust the corner radius of the home icon background.
  • Size (px): Set the home icon size.
  • Space Between Icon and Text (px): Adjust the space between the home icon and its text.
  • Padding: Adjust the inner spacing around the home icon. Responsive settings are available for desktop, tablet, and mobile devices.
  • Vertical Offset (px): Adjust the vertical position of the home icon.
  • Horizontal Offset (px): Adjust the horizontal position of the home icon.

3. Text

  • Typography: Customize the typography of the breadcrumb text.
  • Normal / Hover: Switch between normal and hover appearance settings.
  • Link Color: Set the breadcrumb link text color for the selected state.
  • Link Background: Set a background color or gradient for the breadcrumb links in the selected state.
  • Link Border Radius: Adjust the corner radius of the breadcrumb links.
  • Padding (Links): Adjust the inner spacing around the breadcrumb links. Responsive settings are available for desktop, tablet, and mobile devices.

4. Separator

  • Separator / Icon Color: Customize the separator character or icon color.
  • Background: Set a background color or gradient for the separator.
  • Border Radius: Adjust the corner radius of the separator background.
  • Size (px): Set the separator or icon size.
  • Space Around (Margin): Adjust the space around the separator. Responsive settings are available for desktop, tablet, and mobile devices.
  • Padding: Adjust the inner spacing around the separator. Responsive settings are available for desktop, tablet, and mobile devices.
  • Vertical Offset (px): Adjust the vertical position of the separator.
  • Horizontal Offset (px): Adjust the horizontal position of the separator.

5. Current Page

  • Text Color: Customize the text color of the current page item.
  • Background: Set a background color or gradient for the current page item.
  • Border Radius: Adjust the corner radius of the current page item.
  • Padding (Current Page): Adjust the inner spacing around the current page item. Responsive settings are available for desktop, tablet, and mobile devices.

Advanced Tab

The Advanced tab contains settings that apply to the entire Breadcrumb Block, not to individual breadcrumb items.

1. Spacing

  • Padding: Adjust the inner spacing around the entire block. Responsive settings are available for desktop, tablet, and mobile devices.
  • Margin: Adjust the outer spacing around the entire block. Responsive settings are available for desktop, tablet, and mobile devices.

2. Background

  • Background: Set a background color or gradient for the entire block.

Updated on October 17, 2026

What are your feelings

  • Happy
  • Normal
  • Sad
Table Of Contents

Download Now & Design Without Limits!

Bring your Gutenberg designs to life with ShapeBlock create stunning, animated websites effortlessly. No code. No limits. Just motion made easy.

Get Started Free
Buy Now
FAQ

Frequently
Asked Questions

Common questions answered, if you still have any
questions
feel free to ask.

What is ShapeBlock?
ShapeBlock is a block library for the WordPress block editor. It adds 33 native blocks sliders, carousels, grids, tabs, counters, filters and more each with Settings, Layout and Style tabs (plus a shared Advanced tab) and a live preview on the canvas.
No. The blocks are native to the block editor, so there is no page-builder layer and no shortcode is needed for normal use. ShapeBlock does not depend on any other plugin.
Upload the plugin via WordPress Dashboard or FTP and activate it.
WordPress 6.6 or newer and PHP 7.4 or newer.
ShapeBlock is built to stay light. A block’s styles are added only to pages that contain that block, small stylesheets are printed inline instead of as extra requests, and nothing relies on jQuery. Blocks you switch off are never registered at all.
Yes. The ShapeBlock dashboard lists every block with a switch. A disabled block is not registered, so it adds nothing to the editor or to your pages.
Yes. Most spacing, size, alignment and typography controls take a separate value for Desktop, Tablet (up to 1024px) and Mobile (up to 767px). Leave a device empty and it follows the larger screen.
Yes. Blocks render the same in both, and their styles are printed in the page head rather than whenever the theme happens to run.
Not by default. Google Fonts is optional and stays off until you enable it in ShapeBlock → Settings. Video blocks only load YouTube or Vimeo when you add a video link, and share buttons are plain links that do nothing until a visitor clicks them.
Yes. The Theme Builder lets you build headers and footers with blocks and choose where each one appears with display conditions. Reusable templates can be placed anywhere with the shortcode.
Yes. ShapeBlock → Settings can export and import your block settings, colours, layout, templates and Theme Builder templates as a file, so a second site can start from the same setup.

Our core value is regularity, responsiveness, and innovation. This is why people love us With the qualified dedicated support.

Follow our Socials

Useful Link

Supports

News Letter

Subscribe to our newsletter

© All Rights Reserved – shapeblock by ShapeKode.