Breadcrumbs
Breadcrumbs show the user’s location within an application’s hierarchy and provide links back to higher levels.
|
Note
|
Preview Feature
This is a preview version of Breadcrumbs. You need to enable it with the feature flag |
Basic Usage
A Breadcrumbs component contains an ordered set of items that represent the path from a top-level location to the current page. Each item that has a path renders as a link, while the last item — which has no path — represents the current page and isn’t a link.
|
Note
|
Navigation Disabled in Examples
For technical reasons, actual navigation is disabled in the examples on this page. |
Items
Each item in a Breadcrumbs is a BreadcrumbsItem (Flow) or a <vaadin-breadcrumbs-item> (Lit) / <BreadcrumbsItem> (React). An item’s role depends on whether it has a path:
-
An item with a path renders as a link that navigates to the corresponding location.
-
An item without a path represents the current page. The component automatically marks the last path-less item as current, rendering it as plain, non-interactive text.
Modes
In Flow, the Breadcrumbs component operates in one of two modes, defined by the Breadcrumbs.Mode enum: ROUTER (the default) and MANUAL.
Router Mode
In ROUTER mode — the default — the trail is built automatically from the route hierarchy. On every navigation, the component resolves the chain of routes leading to the current view, adding a linked item for each ancestor route and a non-link item for the current page.
Parent routes are resolved from the @RouteParent annotation or, when routes follow the URL structure, from the URL path. Each item’s label is the route’s page title (set with @PageTitle, HasDynamicTitle, or a PageTitleGenerator), resolved without instantiating the ancestor views. For more, see Route Hierarchy and Page Titles.
Source code
Java
@Route("orders")
@PageTitle("Orders")
public class OrdersView extends VerticalLayout {
}
@Route("order-details")
@RouteParent(OrdersView.class)
@PageTitle("Order Details")
public class OrderDetailsView extends VerticalLayout {
public OrderDetailsView() {
// In ROUTER mode, the trail is built automatically from the route
// hierarchy; no items are added manually.
add(new Breadcrumbs());
}
}|
Note
|
In |
Manual Mode
In MANUAL mode, you build the trail explicitly by adding BreadcrumbsItem instances. This is useful when the breadcrumb structure doesn’t map directly onto the route hierarchy. Switching modes clears the existing trail.
Source code
Java
Breadcrumbs breadcrumbs = new Breadcrumbs(Breadcrumbs.Mode.MANUAL);
BreadcrumbsItem home = new BreadcrumbsItem("Home", "/");
BreadcrumbsItem orders = new BreadcrumbsItem("Orders", "/orders");
BreadcrumbsItem current = new BreadcrumbsItem("Order Details");
breadcrumbs.add(home, orders, current);Overflow
Breadcrumbs adapts responsively to the available width. When the items don’t all fit, the leading items collapse into an overflow menu, accessible through a button at the start of the trail. The last item, representing the current page, never collapses.
Internationalization (i18n)
Breadcrumbs provides an API for localization. Currently, only the accessible label for the overflow menu button (announced by screen readers) can be customized.
Source code
Java
breadcrumbs.setI18n(new Breadcrumbs.BreadcrumbsI18n().setMoreItems("More items"));Java
tsx
tsx
TypeScript
TypeScript
Accessibility
The component renders with the navigation landmark role, so assistive technologies announce it as a navigation region. The current page — the last path-less item — is marked with aria-current="page". Items that have a path are rendered as links and are reachable and operable with the keyboard.