Implement Path Navigation bar (Breadcrumb bar) control

Question

I want to generate an UI where someone can navigate through the path of a tree structure. Here is an example of what I want, taken from JavaFX Scene Builder.

Depending on the actual position in an TreeView, this UI is updated. By clicking on individual items the tree is updated.

My question: What Nodes/Controls are best used for this approach? (no full code required. Just mention the name of the controls).

My first idea is to generate a row of buttons closely to each other, but maybe there are better ideas.

Thanks.

This question is probably too broad, simply because there are so many different ways you could do this. I assume you mean `TreeView`, not `TableView` here? I would probably try with `ToggleButton`s in a single `ToggleGroup`. You can register a listener with the `ToggleGroup`'s `selectedToggleProperty` to update the selection in the tree, and register a listener with the tree's selection model to select a particular `ToggleButton`. — James_D, Nov 17 '16 at 15:18
Thank you. You are right, i meant `TreeView`. I'll have a look at `ToggleButton`. — BerndGit, Nov 17 '16 at 15:20

Omid · Accepted Answer · 2021-01-17T22:41:13.960

You can use ControlsFx's BreadCrumbBar

Pane root = ...
Label selectedCrumbLbl = new Label();

BreadCrumbBar<String> sampleBreadCrumbBar = new BreadCrumbBar<>();
root.getChildren().addAll(sampleBreadCrumbBar, selectedCrumbLbl);

TreeItem<String> model = BreadCrumbBar.buildTreeModel("Hello", "World", "This", "is", "cool");
sampleBreadCrumbBar.setSelectedCrumb(model);

sampleBreadCrumbBar.setOnCrumbAction(new EventHandler<BreadCrumbBar.BreadCrumbActionEvent<String>>() {
        @Override public void handle(BreadCrumbActionEvent<String> bae) {
            selectedCrumbLbl.setText("You just clicked on '" + bae.getSelectedCrumb() + "'!");
        }
});

https://github.com/controlsfx/controlsfx/blob/master/controlsfx-samples/src/main/java/org/controlsfx/samples/button/HelloBreadCrumbBar.java

score 0 · Answer 2 · answered Feb 27 '20 at 21:17

The chosen solution did not work for me. I had to listen to the selectedCrumbProperty.

TreeItem<String> helloView = new TreeItem("Hello");
TreeItem<String> worldView = new TreeItem("World");
hellowView.getChildren().add(worldView);
TreeItem<String> thisView = new TreeItem("This");
worldView.getChildren().add(thisView);
TreeItem<String> isView = new TreeItem("is");
thisView.getChildren().add(isView);
BreadCrumbBar<String> sampleBreadCrumbBar = new BreadCrumbBar<>(helloView);
sampleBreadCrumbBar.setSelectedCrumb(helloView);

sampleBreadCrumbBar.selectedCrumbProperty().addListener((observable, oldValue, newValue) -> { 
    System.out.println(newValue);
    if (newValue == worldView) {
        //load this view
    }
});

I typed this directly into the answer. There may be errors. Leave a note.

Implement Path Navigation bar (Breadcrumb bar) control

2 Answers2