{"id":16367660,"date":"2026-05-20T12:00:00","date_gmt":"2026-05-20T12:00:00","guid":{"rendered":"https:\/\/wordpress.org\/documentation\/?post_type=helphub_article&p=16367660"},"modified":"2026-05-20T16:10:13","modified_gmt":"2026-05-20T16:10:13","slug":"breadcrumbs-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/breadcrumbs-block\/","title":{"rendered":"Breadcrumbs block"},"content":{"rendered":"\n

Go back to the list of Blocks<\/a><\/p>\n\n\n\n

The Breadcrumbs block shows visitors where they are on your website by displaying a trail of links from the homepage to the current page. This makes it easy for people to understand the site structure and move back to higher\u2011level pages without using the browser\u2019s back button.<\/p>\n\n\n\n

You can add the Breadcrumbs block to an individual post or page, or place it in a template using the Site Editor so it automatically appears across your site.<\/p>\n\n\n\n

Breadcrumbs on Posts<\/h3>\n\n\n\n

Posts don\u2019t have parent pages, so breadcrumbs use categories or tags instead. For example:<\/p>\n\n\n\n

Home \/ Technology \/ Your Post Title<\/code><\/p>\n\n\n\n

If a post belongs to more than one category or tag, only one term is displayed in the breadcrumbs for each level in the parent\u2011child structure. When multiple categories are at the same level in the parent\u2011child structure, the one that appears first in the list is shown.<\/p>\n\n\n\n

\"Post<\/figure>\n\n\n\n

Other types of template-driven pages<\/h3>\n\n\n\n

The Breadcrumbs block also works on other common pages, including:<\/p>\n\n\n\n

    \n
  1. Category, tag, author, and date archives<\/li>\n\n\n\n
  2. Search results pages<\/li>\n\n\n\n
  3. 404 (page not found) pages<\/li>\n\n\n\n
  4. Custom Post Types, where the post type archive is included in the trail<\/li>\n<\/ol>\n\n\n\n

    Add a Breadcrumbs block<\/h2>\n\n\n\n

    To add a Breadcrumbs block, open the Block Inserter tool by clicking the Block Inserter + icon in the top toolbar. Look for the Breadcrumbs block by using the search bar to find the right block to add. Then, click the icon to insert the Breadcrumbs block into the editor.<\/p>\n\n\n\n

    Alternatively, click the Block Inserter (+) icon in the editor, then choose the Breadcrumbs block after searching for it in the pop-up window.<\/p>\n\n\n\n

    You can also use a (\/) slash command by typing \/breadcrumbs<\/code> in the editor.<\/p>\n\n\n\n

    \"Adding<\/figure>\n\n\n\n

    Read detailed instructions on adding blocks.<\/a><\/p>\n\n\n\n

    Add a Breadcrumbs block to a template or template part<\/h3>\n\n\n\n

    The Breadcrumbs block can be added to an individual post or page or by using the Site Editor to edit a template or template part used throughout the site. <\/p>\n\n\n\n

    Learn more about the Site Editor.<\/a><\/p>\n\n\n\n

    Block toolbar<\/h2>\n\n\n\n

    Each block has its own block-specific controls that allow you to manipulate the block right in the editor. If you hover over the buttons, tooltips will tell you what is behind the buttons.<\/p>\n\n\n\n

    \"Breadcrumbs<\/figure>\n\n\n\n

    Transform to <\/h3>\n\n\n\n
    \"Breadcrumbs<\/figure>\n\n\n\n

    Click on the Transform button to convert the Breadcrumbs block into a Columns, Details, or Group block. <\/p>\n\n\n\n

    Block moving tools<\/h3>\n\n\n\n
    \"Breadcrumbs<\/figure>\n\n\n\n

    The block-moving tools allow you to move the block in the editor. Use the six dots icon to drag and drop the block and place it anywhere on the page. Alternatively, click on the up and down arrows to move the block up or down.<\/p>\n\n\n\n

    Get more information about moving a block within the editor.<\/a><\/p>\n\n\n\n

    Align<\/h3>\n\n\n\n
    \"Breadcrumbs<\/figure>\n\n\n\n

    Use the change alignment tool to align the breadcrumbs block. Choose one of the following options:<\/p>\n\n\n\n