Breadcrumb element

When generating a breadcrumb an <ol> element containing all necessary menu items is written to the output.

Element and builder

The BreadcrumbNavComponentBuilder is provided to easily build breadcrumbs. A builder can be created using

BreadcrumbNavComponentBuilder attributes

Attribute Description Default


Set the number of levels (breadcrumb segments) for which the icon will be rendered if there is one.

By default all items will have their icons rendered.


Set the number of levels (breadcrumb segments) that will be rendered as just the icon if NavComponentBuilder#ATTR_ICON_ONLY}` is true.

By default all segments might be rendered this way.

Breadcrumb items

The first step in building a breadcrumb is determining the menu items that will be used. When a menu item is disabled or filtered out, it will not be used to render the breadcrumb items. All menuItems that should be visible as breadcrumb items in the breadcrumb are build and the last item will be set active.

Table 1. MenuItem attributes
Attribute Description Default


When set a ViewElement or ViewElementBuilder will be added before the item text.

Not set by default


If set to true and a NavComponentBuilder.ATTR_ICON is set, only the icon element will be rendered if the menu item is at the top level. Note that the actual title will still be added wrapped in a span with class nav-item-title.

Not set by default

For all the attributes consult the javadoc of NavComponentBuilder.


Creating a simple breadcrumb navigation

Menu menu = new PathBasedMenuBuilder()
        .item( "components", "Components" ).and()
        .item( "components/breadcrumb", "Breadcrumb example" ).and().build(); MenuSelector.byTitle( "Breadcrumb example" ) );
menu.setTitle( "Bootstrap UI Module" );

NodeViewElement breadcrumbNav = menu ).build();

Creating a breadcrumb navigation with icons

Menu menu = new PathBasedMenuBuilder()
    .item( "components", "Components" )
    .attribute( NavComponentBuilder.ATTR_ICON, new GlyphIcon( GlyphIcon.HOME ) )
    .attribute( NavComponentBuilder.ATTR_ICON_ONLY, true ).and()
    .item( "components/breadcrumb", "Breadcrumb example" )
    .attribute( NavComponentBuilder.ATTR_ICON, new GlyphIcon( GlyphIcon.HOURGLASS ) )
    .and().build(); MenuSelector.byTitle( "Breadcrumb example" ) );
menu.setTitle( "Bootstrap Ui Module" );

NodeViewElement breadcrumbNav = menu ).build();