ComboStrap UI - Hierarchical Breadcrumb

Undraw My Documents


A Hierarchical Breadcrumb is a breadcrumb that shows where the page is located in the page system tree in hierarchical order.

The label shown is the page name.

Combostrap offers two types of hierarchical breadcrumbs:

  • navigation: the full breadcrumb that should appear once on a page
  • typographical: a text that can be used in a iterator fragment to show the page categories


A navigational hierarchical breadcrumb:

Illustration: Breadcrumbs are often placed horizontally before a page's main content (in the main header). You will find it on this page at this location:

Combostrap Hierarchical Breadcrumb

You can add a navigational hierarchical breadcrumb with the following syntax.


The output for this page is:


A typographical hierarchical breadcrumb permits to print the parent's pages as text.

This breadcrumb type can be used in a iterator fragment to print the page category as a subtitle.

The depth attribute represents the number of levels that should be printed backward


Depth of 1 will print the parent page

  • Markup
<breadcrumb typo depth=1 color="muted"/>
  • Output


Depth of 2 will print the parent and grandparent page

  • Markup
<breadcrumb typo depth=2 color="muted"/>
  • Output:


Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.

Recommended Pages
Undraw My Documents
Breadcrumbs support by Combostrap

A breadcrumb is a navigational component that shows a list of pages.
Layout Element
ComboStrap - Main Template Element

In a template layout, main is the element where the content of your page is rendered. In a template, the main element may have a: * header, located at its top * and footer, located at its...
Main Header Slot Manager
Main Header Slot

The main header slot is a slot that will replace the default main header of your template. Below is an example of main header. where: breadcrumb is the hiearchical breadcrumb box is a box with...
Undraw My Documents
Page System

The page system is a system that organize the pages in a hierarchical fashion. With the page path :foo:bar:world its name is the default page name world its container is the namespace :foo:bar:...
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion
Undraw Building Websites I78t
The variables that can be used anywhere

This page describes which variables you can use in your content.
Undraw My Documents
What are the Navigational components in Combostrap?

How to improve the navigation of your website with the navigational components
Undraw My Documents
What is the Category of a Page ?

The page category is the name of the parent page on the page system.

Task Runner