1. Domino UI
  2. Components
  3. Breadcrumbs
Top Basic Background Alignment Docs

Breadcrumbs

A component to represent the navigation path the user took to reach the current view or page

This component displays locations with the ability to navigate between them and highlighting the current one, each location can have text and icon with a click listener.

See also :

A component used within Breadcrumb and represent a navigation path taken to reach a specific page and view.

Clicking a BreadcrumbItem would trigger change listeners defined on the Breadcrumb, the library user can use them to navigate the user to different views or pages.

See also :

Anatomy

breadcrumbs-anatomy.
  1. Breadcrumb consist of several links represents the navigation path.
  2. Each link in the breadcrumb represent a point in the navigation path and can have an icon in addition to the path text.
  3. Breadcrumb links can be programmed to navigate back to that point in the path
  4. Last breadcrumb path is the current active page, so it is not clickable by default.

Examples

Basic breadcrumbs Breadcrumbs with text and icons.

Breadcrumbs with backgrounds Breadcrumbs can have a background to match the application design.

Breadcrumbs alignment Breadcrumbs can have different alignment.

API Docs: Breadcrumb

Constructors

public void Breadcrumb()
Creates an empty breadcrumb instance

Static methods

public static Breadcrumb create()
Factory method to create new empty breadcrumb instance

Returns:

new breadcrumb instance

Public methods

public Breadcrumb appendChild(String text, EventListener onClick)
Adds new location with text and onClick listener

text

the label of the location

onClick

EventListener that will be called when the location is clicked



Returns:

same breadcrumb instance

public Breadcrumb appendChild(Icon<?> icon, String text, EventListener onClick)
Creates a new BreadcrumbItem with the provided icon , text , and click listener and add it to the current breadcrumb instance

icon

the Icon of the location

text

the label of the location

onClick

EventListener that will be called when the location is clicked



Returns:

same breadcrumb instance

public Breadcrumb appendChild(BreadcrumbItem[] items)
Adds provided BreadcrumbItem s to the current Breadcrumb instance

items

the BreadcrumbItem s to be added



Returns:

same breadcrumb instance

public Breadcrumb appendChild(boolean silent, BreadcrumbItem[] items)
Adds the provided BreadcrumbItem s then activate the last item and checks the silent flag to decide on calling the change listeners.

silent

boolean, if true to ignore the change listeners, otherwise change listeners will be triggered.

items

the BreadcrumbItem s to be added



Returns:

same breadcrumb instance

public Breadcrumb appendChild(BreadcrumbItem item)
Adds the provided BreadcrumbItem to the current breadcrumb instance

item

the BreadcrumbItem to be added



Returns:

same breadcrumb instance

public Breadcrumb removeChildFrom(int itemFromIndex, boolean silent)
Remove all breadcrumb items starting from the provided index inclusive.

itemFromIndex

the starting index from of the breadcrumb items to be removed

silent

boolean, if true dont trigger change listeners



Returns:

same breadcrumb instance

public Breadcrumb setActiveItem(BreadcrumbItem item)
Set a given item as the active item of the breadcrumb and trigger the change listeners.

item

The item be set as active one



Returns:

same breadcrumb instance

public Breadcrumb setActiveItem(BreadcrumbItem item, boolean silent)
Set the active breadcrumb item and ignore the change listeners if the silent flag is true .

item

The item be set as active one

silent

boolean, if true dont trigger change handlers



Returns:

same breadcrumb instance

public Breadcrumb setRemoveActiveTailItem(boolean removeTail)
If true, then activating a breadcrumb item will remove the tailing ones.

Default to false

Example:

  • Given removeTail is true and having 4 locations as follows:

    A -> B -> C -> D

    when selecting location B , then the new locations will be as follows:

    A -> B

  • Given removeTail is false and having 4 locations as follows:

    A -> B -> C -> D

    when selecting location B , then the new locations will be as follows:

    A -> B -> C -> D

removeTail

true to enable remove tail on item activation, false to disable it.



Returns:

same breadcrumb instance

public Breadcrumb removeAll()
Removes all breadcrumb items from the breadcrumb

Returns:

same breadcrumb instance

public BreadcrumbItem getActiveItem()


Returns:

a current active BreadcrumbItem

public List<BreadcrumbItem> getItems()


Returns:

a List of all breadcrumb items currently available in the breadcrumb instance.

API Docs: BreadcrumbItem

Constructors

public void BreadcrumbItem(String text)
Creates a BreadcrumbItem with a text

text

The label text for the BreadcrumbItem

public void BreadcrumbItem(String text, Icon<?> icon)
Creates a BreadcrumbItem with a text and icon

text

The label text for the BreadcrumbItem

icon

An Icon that prefix the BreadcrumbItem labels

public void BreadcrumbItem(Icon<?> icon, String text)
Creates a BreadcrumbItem with a text and icon

icon

An Icon that prefix the BreadcrumbItem labels

text

The label text for the BreadcrumbItem

Static methods

public static BreadcrumbItem create(String text)
Factory method to create a BreadcrumbItem with a text

text

The label text for the BreadcrumbItem



Returns:

new BreadcrumbItem instance

public static BreadcrumbItem create(Icon<?> icon, String text)
Factory method to create a BreadcrumbItem with a text and icon

icon

An Icon that prefix the BreadcrumbItem labels

text

The label text for the BreadcrumbItem



Returns:

new BreadcrumbItem instance

Public methods

public HTMLAnchorElement getClickableElement()


Returns:

the element instance within this component that would receive the clicks when we register a click event listener directly to the BreadcrumbItem

public Text getTextElement()


Returns:

a Text node for this BreadcrumbItem label text

public Icon<?> getIcon()


Returns:

The Icon of this BreadcrumbItem instance if present or null.

public boolean isActive()


Returns:

true if the item is active, false otherwise.

public BreadcrumbItem withAnchor(ChildHandler<BreadcrumbItem, AnchorElement> handler)
Use to customize the AnchorElement of this BreadcrumbItem instance without breaking the fluent API chain.

handler

A ChildHandler that will apply the desired customization, holds a reference to both the BreadcrumbItem and the AnchorElement



Returns:

same BreadcrumbItem instance

We are a group of passionate people who love what we do

Donate & Support Us