Handbooks and documentation
Show the chapter path above each page.
Content / widget · Elementor module
Page Hierarchy Depth Widget Plugin for Elementor
Show where the current page sits under its parents, as a number, a level or the path of parent titles, without leaking private titles.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Page hierarchy depthProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
This page's place
These are the actual published outputs of the widget on this page.
02 / Inside WordPress
Page hierarchy depth controls in Elementor
Content sets whether to show the number, the level or the path, the level text, a text for top-level pages, the path separator and ending, text before and after, a fallback text, the HTML tag and an optional icon. The Style tab covers typography, colour, surface, alignment, padding, radius and the icon.
03 / Website use cases
Where to use page hierarchy depth
Large sites with nested pages, such as handbooks, documentation and school sites, leave readers unsure how deep they are. Page hierarchy depth shows the page's place in the structure as a number, a level or the path of parent titles, and hides itself when a parent page is not public so private titles never appear.
Course structures
Show the module and lesson level.
Large page trees
Help editors see where a page sits.
04 / Installation and setup
How to show a page's depth in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable Page hierarchy depth in the Complementor library.
Add the widget to a page template or a page.
Choose the number, level or path.
Adjust the texts and separator.
Style it and open a sub-page.
05 / Content and style controls
Customize page hierarchy depth in Elementor
Configure the settings available for this module to suit the page you are building.
Number of parent levels.
“Level 3” with editable text.
Path of parent titles.
Own text for top-level pages.
Hidden when a parent is private.
Works for hierarchical custom types.
06 / Choose the right approach
Page hierarchy depth and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
Breadcrumbs
Usually need an SEO plugin and show links rather than a level.
Typing the path by hand
Breaks when pages move.
07 / Requirements and compatibility
Page hierarchy depth compatibility with Elementor
- Requires Elementor.
- Hierarchical post types only.
- Plain text path; not a linked breadcrumb.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot page hierarchy depth
Check these settings if the published page behaves differently from the editor.
Why is nothing shown?
This is not a page of a hierarchical type, or one of its parent pages is not public.
Why 0?
A top-level page has no parents. Set a text for top-level pages if you prefer.
Why are titles not links?
The path is plain text; use a breadcrumb widget for links.
Can I change the arrow?
Yes. Change the path separator.
Page hierarchy depth plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Where does it get its information?
From the parent pages of the page being viewed.
Where should I place it?
In a single post, page or product template, or directly on a page. It reads the post being viewed.
Why does nothing show in some cases?
Drafts, private and password-protected posts show nothing. In the editor a short note explains why, and a fallback text can be set.
Does it work for posts?
No. Posts have no parents; it works for pages and hierarchical custom types.
10 / Annual All Access subscription
Get page hierarchy depth with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.