Components

Breadcrumbs

Help users with orientation and enhance SEO effortlessly.

The Breadcrumbs component is a powerful navigation aid that helps users understand their current position within your site’s hierarchy. It provides clickable path links, automatically generated based on your site’s routing, making navigation intuitive and improving user experience.

Beyond usability, Breadcrumbs also contribute to better SEO by generating structured data that helps search engines interpret your content hierarchy. With complete control over appearance and behavior, you can adapt the Breadcrumbs experience to match your design and performance goals.

Better UX & Clarity

  1. Choose full or shortened breadcrumb trails.
    Tailor the display depth to avoid visual clutter.

  2. Route-Aware Navigation.
    Updates dynamically as users navigate.

  3. Add branded, multilingual home elements.
    Customizable for global audiences.

SEO-Boosting Built In

  1. Schema markup added automatically.
    Boosts discoverability in search results.

  2. Control styling for all breadcrumb parts.
    Separator, active/inactive styles, and more.

  3. Theme-Friendly by Default.
    Supports full theming across all elements.

Use Cases

Breadcrumbs are especially useful for:

  • Content-heavy sites with multiple levels (e.g., blogs, shops, directories)

  • Product detail pages or nested category structures

  • Enhancing SEO with automated structured data

  • Improving user orientation and reducing bounce rates

  • Offering quick navigation back up the page tree

  • Customized visual designs where brand consistency matters

Whether you want a minimalist navigation trail or a branded, structured guide, Breadcrumbs provides your users with the clarity they need and your site with the SEO benefits it deserves.

Configuration Options & Features

With Breadcrumbs, you enable intuitive user journeys, reduce bounce rates, and increase site comprehension, all while improving technical SEO through structured markup. Fully themeable, dynamic, and innovative, they’re the silent UX and SEO hero every project needs.

Display Type

Defines how much of the route is displayed:

  • Full Path – shows every part of the current route (e.g. Home > Products > Shoes > Sneakers)

  • Parent > Current – simplifies the trail by showing only the immediate parent and current page

Helpful in balancing visual clarity with usability, especially on deeply nested pages.

Origin Route Level

Sets the starting depth of the breadcrumbs (default is 0, meaning the root).

You can adjust this to start breadcrumbs from a deeper level, ideal for use cases such as product pages (e.g.,/product-x) or shops (e.g.,/shop).

Origin Element

Let's you define a custom starting point, typically your homepage, brand logo, or a specific product branding.

Fully translatable and customizable with other components, it allows for branded or multilingual breadcrumb origins beyond just "Home".

Separator

Visual separator between breadcrumb items.

Can be a text symbol (e.g., “/”), SVG, or image.

Supports full styling and customization.

Component Theme

Applies to the entire wrapper of the breadcrumb component.

Controls outer spacing, borders, and background if needed.

Content Theme

The theme is applied to the list container of breadcrumb links.

Sets layout, spacing, and internal container behavior.

Element Theme

Applied to each breadcrumb link item, used to maintain a consistent visual design throughout the path.

Active Element Theme

Style for the current route item in the breadcrumb trail.

Use to highlight or turn it off, depending on your design.

Inactive Element Theme

Theme for all inactive breadcrumb links.

Usually styled as underlined or muted compared to the active element.