Skip to main content

JBreadcrumb

Breadcrumb navigation component for showing the current page location.

Basic Usage

JBreadcrumb breadcrumb = new JBreadcrumb();
breadcrumb.addItem("Home", () -> navigate("/home"));
breadcrumb.addItem("Products", () -> navigate("/products"));
breadcrumb.addItem("Laptops"); // Current page (no action)

With Icons

JBreadcrumb breadcrumb = new JBreadcrumb();
breadcrumb.addItem("Dashboard", JIcon.HOME.view(), () -> navigate("/"));
breadcrumb.addItem("Settings", JIcon.SETTINGS.view(), () -> navigate("/settings"));
breadcrumb.addItem("Profile"); // Active item

Custom Separator

JBreadcrumb breadcrumb = new JBreadcrumb();
breadcrumb.setSeparator(">");
// or
breadcrumb.setSeparator("•");

breadcrumb.addItem("Docs", () -> navigate("/docs"));
breadcrumb.addItem("Components", () -> navigate("/docs/components"));
breadcrumb.addItem("Breadcrumb");

Active Color

JBreadcrumb breadcrumb = new JBreadcrumb();
breadcrumb.setActiveColor("primary"); // primary, success, danger, warning, info

breadcrumb.addItem("Home", () -> navigate("/"));
breadcrumb.addItem("Current Page");

Dynamic Path

JBreadcrumb breadcrumb = new JBreadcrumb();
breadcrumb.setPath("Home", "Products", "Electronics", "Laptops");

// Update dynamically
breadcrumb.clear();
breadcrumb.setPath("Home", "Services", "Consulting");

API Reference

addItem(String, Runnable)
JBreadcrumb
Add a clickable breadcrumb item
addItem(String)
JBreadcrumb
Add the active/current item (non-clickable)
addItem(String, Node, Runnable)
JBreadcrumb
Add item with icon and action
setSeparator(String)
JBreadcrumb
Set separator character (default: ”/”)
setActiveColor(String)
JBreadcrumb
Set color variant for active item
clear()
JBreadcrumb
Remove all items
setPath(String...)
JBreadcrumb
Set all breadcrumb items at once

JPagination

Pagination control for navigating through pages.

Basic Usage

JPagination pagination = new JPagination();
pagination.totalPagesProperty().set(10);
pagination.currentPageProperty().set(1);

pagination.setOnPageChange(() -> {
    int currentPage = pagination.currentPageProperty().get();
    System.out.println("Page: " + currentPage);
    loadPage(currentPage);
});

With Table

JTable<Item> table = new JTable<>();
JPagination pagination = table.getPagination();

// Pagination is automatically managed by JTable
table.setItemsPerPage(25);
table.setItems(data);

Custom Page Range

JPagination pagination = new JPagination();

// Automatically shows ellipsis for large page counts
pagination.totalPagesProperty().set(100);
pagination.currentPageProperty().set(50);

// Shows: < 1 ... 49 50 51 ... 100 >

API Reference

currentPageProperty()
IntegerProperty
Current page number (1-indexed)
totalPagesProperty()
IntegerProperty
Total number of pages
setOnPageChange(Runnable)
void
Callback when page changes

JTabs

Tabbed navigation with multiple styles and positions.

Basic Usage

JTabs tabs = new JTabs();

JTab tab1 = new JTab("Profile", new VBox(new Label("Profile Content")));
JTab tab2 = new JTab("Settings", new VBox(new Label("Settings Content")));
JTab tab3 = new JTab("Notifications", new VBox(new Label("Notifications")));

tabs.getTabs().addAll(tab1, tab2, tab3);

Tab Styles

JTabs tabs = new JTabs();

// Line style (default)
tabs.setTabStyle(JTabs.TabStyle.LINE);

// Pills style
tabs.setTabStyle(JTabs.TabStyle.PILLS);

tabs.getTabs().addAll(tab1, tab2, tab3);

Tab Positions

JTabs tabs = new JTabs();

// Position tabs
tabs.setSide(Side.TOP);    // Default
tabs.setSide(Side.BOTTOM);
tabs.setSide(Side.LEFT);
tabs.setSide(Side.RIGHT);

tabs.getTabs().addAll(tab1, tab2, tab3);

Tabs with Descriptions

JTab tab1 = new JTab();
tab1.setTitle("Overview");
tab1.setDescription("General information");
tab1.setContent(overviewContent);

JTab tab2 = new JTab();
tab2.setTitle("Analytics");
tab2.setDescription("Performance metrics");
tab2.setContent(analyticsContent);

JTabs tabs = new JTabs();
tabs.getTabs().addAll(tab1, tab2);

Tabs with Icons

JTab tab1 = new JTab("Home", homeContent);
tab1.setGraphic(JIcon.HOME.view());

JTab tab2 = new JTab("Profile", profileContent);
tab2.setGraphic(JIcon.USER.view());

JTab tab3 = new JTab("Settings", settingsContent);
tab3.setGraphic(JIcon.SETTINGS.view());

JTabs tabs = new JTabs();
tabs.getTabs().addAll(tab1, tab2, tab3);

Programmatic Selection

JTabs tabs = new JTabs();
JTab profileTab = new JTab("Profile", profileContent);
JTab settingsTab = new JTab("Settings", settingsContent);

tabs.getTabs().addAll(profileTab, settingsTab);

// Select a specific tab
tabs.selectTab(settingsTab);

Disabled Tabs

JTab tab1 = new JTab("Active", content1);

JTab tab2 = new JTab("Disabled", content2);
tab2.setDisable(true);

tabs.getTabs().addAll(tab1, tab2);

API Reference - JTabs

getTabs()
ObservableList<JTab>
List of tab items
setTabStyle(TabStyle)
void
Set tab style: LINE or PILLS
setSide(Side)
void
Set tab position: TOP, BOTTOM, LEFT, RIGHT
selectTab(JTab)
void
Programmatically select a tab

API Reference - JTab

setTitle(String)
void
Set tab title
setDescription(String)
void
Set tab description (subtitle)
setContent(Node)
void
Set tab content panel
setGraphic(Node)
void
Set tab icon
setDisable(Boolean)
void
Enable or disable the tab

JSidebar

Collapsible sidebar navigation with header, items, and footer.

Basic Usage

JSidebar sidebar = new JSidebar();

JSidebarItem home = new JSidebarItem("Home", JIcon.HOME.view());
home.setAction(() -> navigate("/home"));

JSidebarItem projects = new JSidebarItem("Projects", JIcon.FOLDER.view());
projects.setAction(() -> navigate("/projects"));

JSidebarItem settings = new JSidebarItem("Settings", JIcon.SETTINGS.view());
settings.setAction(() -> navigate("/settings"));

sidebar.getItems().addAll(home, projects, settings);

Active State

JSidebarItem home = new JSidebarItem("Home", JIcon.HOME.view());
JSidebarItem profile = new JSidebarItem("Profile", JIcon.USER.view());

home.setActive(true); // Highlight as active

sidebar.getItems().addAll(home, profile);

With Header

JSidebar sidebar = new JSidebar();

// Custom header
VBox header = new VBox(10);
header.setAlignment(Pos.CENTER);
header.setPadding(new Insets(20));

Label logo = new Label("MyApp");
logo.setStyle("-fx-font-size: 20px; -fx-font-weight: bold;");
header.getChildren().add(logo);

sidebar.setHeader(header);
sidebar.getItems().addAll(item1, item2, item3);
JSidebar sidebar = new JSidebar();

// Footer with user profile
HBox footer = new HBox(10);
footer.setAlignment(Pos.CENTER_LEFT);
footer.setPadding(new Insets(15));

JAvatar avatar = new JAvatar("JD");
Label userName = new Label("John Doe");
footer.getChildren().addAll(avatar, userName);

sidebar.setFooter(footer);

Collapse Modes

JSidebar sidebar = new JSidebar();

// Compact mode: Shows only icons when collapsed
sidebar.setCollapseMode(JSidebar.CollapseMode.COMPACT);

// Hidden mode: Completely hides sidebar when collapsed
sidebar.setCollapseMode(JSidebar.CollapseMode.HIDDEN);

// Toggle collapsed state
sidebar.setExpanded(false);

Variants

JSidebar sidebar = new JSidebar();

// Dark variant (default)
sidebar.setVariant(JSidebar.SidebarVariant.DEFAULT);

// Light variant
sidebar.setVariant(JSidebar.SidebarVariant.LIGHT);

Programmatic Control

JSidebar sidebar = new JSidebar();

// Expand/collapse
sidebar.setExpanded(false);

// Bind to property
CheckBox toggle = new CheckBox("Expand Sidebar");
toggle.selectedProperty().bindBidirectional(sidebar.expandedProperty());

API Reference - JSidebar

getItems()
ObservableList<Node>
List of sidebar items
setHeader(Node)
void
Set custom header content
Set custom footer content
setExpanded(boolean)
void
Expand or collapse sidebar
setCollapseMode(CollapseMode)
void
Set collapse behavior: COMPACT or HIDDEN
setVariant(SidebarVariant)
void
Set color theme: DEFAULT or LIGHT
expandedProperty()
BooleanProperty
Sidebar expanded state property

API Reference - JSidebarItem

setAction(Runnable)
void
Set click action handler
setActive(boolean)
void
Set active/selected state
setIcon(Node)
void
Set item icon
activeProperty()
BooleanProperty
Active state property

Build docs developers (and LLMs) love