Contact us Create app

Add-on Directory

← Back

Breadcrumb Component

Component providing an easy way to display breadcrumb on web pages

Author

Contributors

Rating

Links

Popularity

400+

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"));

Compatibility

(Loading compatibility data...)

Last updated: 2025-03-06

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Update web-component version to 2.1.1. This new web-component version contains fix to show focus ring without clipping.

Released
2025-03-06
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 24.5
Vaadin 24.6
Vaadin 14 in 2.0.1
Vaadin 14+ in 2.0.0
Vaadin 10+ in 1.2.0
Browser
N/A

Tabs Extension - Vaadin Add-on Directory

Tab sheet extension Tabs Extension - Vaadin Add-on Directory
# Tab sheet Extension This addon extends the Vaadin 10 Tabs with a few additional features. This features may deprecate in future if the core provides similar functions. ## Development instructions ### Creating a common filter The extension allows you to set a list of filterable components for a `Tabs` instance that should not fire a selection change event. With this feature you may add components, that the user can interact with and let them handle the selection manually. ``` String[] arrayOfTagNames = new String[] {"vaadin-button", "vaadin-text-field", ...}; TabsExtension.createFilterForTabs(tabs, arrayOfTagNames); ``` ### Disable tab selection via keyboard This method is needed when you add writable components (like a text field) as part of you tabs or as a tab sheet component. Otherwise the tab sheet will select text matching tabs when you "type" the respective key. ``` TabsExtension.disableKeySelectionOfTabs(tabs); ``` ### Removing a modification All TabExtension methods will return a Registration with that you may remove the changes from your element. ``` Registration registration = TabsExtension.createFilterForTabs(tabs, ...); // filter activated registration.remove(); // after that call the filter will be deactivated ``` ### Closable tabs The extension comes also with a implementation for closeable tabs. You may use them like other tabs, the only difference is, that the tab shows a close button, that will remove the tab from the tab sheet and handle the selection of a new tab. You may style the tab as wanted. To style the button, just use the `getButton()` method of the tab. ``` CloseableTab closeableTab = new CloseableTab("Label"); closeableTab.addClassName("my-closeable-tab"); closeableTab.getButton().addClassName("my-closeable-button"); ```
Source code (GitHub)
Demo (closeable tabs)

Tabs Extension version 0.0.1

Tabs Extension version 0.0.3
- fix for re-selecting tabs when the last tab is currently selected and closed (CloseableTab) - updated demo event output - updated readme

Tabs Extension version 0.0.4
- changed the visibility of the close method in CloseableTab to protected for extension.

Tabs Extension version 0.0.7

Online