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

bootstrap-for-vaadin - Vaadin Add-on Directory

Bootstrap for Vaadin bootstrap-for-vaadin - Vaadin Add-on Directory
This add-on helps the developer to use Bootstrap components in a Vaadin project. It contains Java wrappers for: * Alerts * Badge * Breadcrumbs * Buttons * Button Group * Card * Collapse * NavBar * Listgroup * Form Layout * Responsive Grid Layout Some common classes for layout: * Color * Spacing * Display * Borders The add-on does not import any Bootstrap theme. You need to import a Bootstrap 4 theme in your Vaadin project to use the component. This will allow you to use the vanilla bootstrap theme or your own bootstrap theme. The demo contains a "translation" of the official bootstrap documentation. It's still incomplete. ## How to start You can find a documentation to import your theme here: https://github.com/jcgueriaud1/vaadin-bootstrap/blob/master/docs/IMPORT_CSS_JS.md And a minimal example with Spring Boot and Bootstrap 4.5 can be found here: https://github.com/jcgueriaud1/springboot-bootstrap-example Limitations: * The Vaadin components are not styled. I recommend to use Lumo and change the default variables (like primary color,...). It's a long work to make a Vaadin theme that will work for all bootstrap theme. * The default input components don't have any Java API. Use Vaadin input instead. * This add-on does not provide anything related to Bootstrap add-on. * You can't use the Bootstrap CSS classes inside shadow DOM. Recommendations: * This add-on is great if you already have an application that already use bootstrap and you want the same layout. * You can use this add-on for layout (menubar, top, footer, responsive grid layout) * I don't recommend to use this add-on if you're not familiar with bootstrap or if you start a brand new application without specific requirements for the theme.
Online Demo
Issue tracker
View on GitHub

bootstrap-for-vaadin version 1.0.0

Online