---
title: "Adding Kadence Breadcrumbs To Hooked Elements"
source: "https://docs.nexcess.com/software/kadence/theme/add-breadcrumbs-to-hooked-elements/"
description: "If you're creating a Hooked Element and want to display the Breadcrumbs, you can do so using a shortcode. Simply add a Shortcode block in the Gutenberg editor w…"
vertical: "Software"
area: "Kadence Theme"
date: "2025-05-01"
last_modified: "2026-07-02"
---

# Adding Kadence Breadcrumbs To Hooked Elements

If you’re creating a **Hooked** **Element** and want to display the **Breadcrumbs**, you can do so using a shortcode. Simply add a Shortcode block in the *Gutenberg* *editor* where you’d like the Breadcrumbs to appear, then paste this shortcode into the block:

\[kadence\_breadcrumbs\] **Hooked** **Elements** can be unlocked with [Kadence Theme Kit Pro](https://www.kadencewp.com/kadence-theme/theme-kit-pro/).

![Breadcrumbs Shortcode](https://docs.nexcess.com/wp-content/uploads/2026/06/Breadcrumbs-Shortcode-scaled-1.jpg)

This will result in the Kadence Breadcrumbs being displayed on the front end, as shown below.

![Front End breadcrumbs](https://docs.nexcess.com/wp-content/uploads/2026/06/Front-End-breadcrumbs-scaled-1.jpg)

***Note:** The shortcode method does not automatically inherit the Breadcrumbs styling from the Customizer.*  
  
To control placement and styling, place the Shortcode block inside a Section block.

- You can then use the **Section Block Settings → General** tab to position the Breadcrumbs as needed.
- For styling, go to the **Section Block Settings → Style** tab and adjust the link-related **Text Color Settings** to override the default breadcrumb link colors.

![Style Breadcrumbs](https://docs.nexcess.com/wp-content/uploads/2026/06/Style-Breadcrumbs.gif)![Customized Results](https://docs.nexcess.com/wp-content/uploads/2026/06/Customized-Results.jpg)