Breadcrumb Component

Component providing an easy way to display breadcrumb on web pages

View larger

Close

View larger

Close

Usage

Component providing an easy way to display breadcrumb on web pages. Breadcrumbs will be separated by ">" symbol. Clicking on any breadcrumb(except last one) will navigate user to page which is represented by this breadcrumb. It's possible to hide some of breadcrumbs on smaller viewports.

Updates since version 3.0.0

• Web component part (version 2.0.0) is now Lit based.
• The first item in the breadcrumb is always shown in full.
• The items can be collapsed when space runs out. This is configurable by using the attribute collapse. When availabe space is not enough to display the full label, then the label is shown with ellipsis.
• If space is even more limited, and some breadcrumbs have the collapse attribute:
  • Consecutive collapsed items are grouped into ranges.
  • Each range is hidden when necessary and replaced with an ellipsis element.
• shift attribute from previous version was removed. Responsive behavior is now given by the collapse attribute implementation.

For example:

Breadcrumbs breadcrumbs = new Breadcrumbs();
breadcrumbs.add(
    new Breadcrumb("Home","breadcrumbs/#"),
    new Breadcrumb("Directory","breadcrumbs/#"),
    new Breadcrumb("Components", "breadcrumbs/#", true),
    new Breadcrumb("VCF Components", "breadcrumbs/#", true),
    new Breadcrumb("Breadcrumbs"));

Breadcrumb "Components" & "VCF Components" will collapse and show ellipsis when space available for display is not enough.

Since version 3.1.0

• New feature to display a popover when clicking on the ellipsis element, to show the hidden breadcrumbs items .

Client-side implementation

This is the server-side (Java) API for Vaadin Platform for the vcf-breadcrumb component. Looking for the client-side version? It can be found here.

Vaadin platform version

• Support for Vaadin 14+ is starting from version 2.0.0.
• Support for Vaadin 24.5+ starts from version 3.0.0.

License & Author

This Add-on is distributed under Apache 2.0

Component Factory Breadcrumb is written by Vaadin Ltd.

Sponsored development

Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: Support and Pricing

Sample code

Breadcrumbs breadcrumbs = new Breadcrumbs();
breadcrumbs.add(
    new Breadcrumb("Home","breadcrumbs/#", true),
    new Breadcrumb("Components", "breadcrumbs/#", true),
    new Breadcrumb("VCF Components", "breadcrumbs/#"),
    new Breadcrumb("Breadcrumbs"));

Links

• View on GitHub
• Online Demo
• Web-component
• Edit

Compatibility