Breadcrumb

Fission

Product

▾

Setup

›

Navigation and overlays

›

Breadcrumb

Breadcrumb is the path trail for hierarchical navigation.

Use it when users move through folders, nested collections, settings sections, or other tree-like structures and need a clear answer to "where am I right now?" A breadcrumb is not a global site navigation bar. It is a location summary with optional step-back navigation.

Example

use fission::prelude::*;

let widget: Widget = Breadcrumb {
    items: vec![
        BreadcrumbItem {
            label: "Workspace".into(),
            on_click: Some(open_workspace_action),
        },
        BreadcrumbItem {
            label: "Docs".into(),
            on_click: Some(open_docs_folder_action),
        },
        BreadcrumbItem {
            label: "Architecture.md".into(),
            on_click: None,
        },
    ],
}
.into();

In this pattern the last item marks the current location, while earlier items let the user move upward.

Field table

Field	Type	Meaning	Notes / default behavior
items	Vec<BreadcrumbItem>	Path steps shown from left to right.	Defaults to an empty list.

Layout and behavior

The checked-in renderer inserts chevrons between items, renders clickable steps as ghost buttons, and shows the last step as primary text. Non-final items without on_click are shown as secondary text.

Because the underlying layout is a single row, long breadcrumb trails can become cramped on narrow screens. On mobile or very dense headers, it is often better to shorten the path or move part of the hierarchy into a separate back action.

Specific advice

Breadcrumbs should move upward in a hierarchy, not trigger unrelated actions. If an item does something surprising, the trail stops feeling trustworthy.

Production checklist

For Breadcrumb, review the fields that change behavior before treating the widget as finished: items. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

When child widgets are generated from data, give reordered or filtered rows an explicit WidgetId so retained local state and scroll behavior do not drift between items.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Breadcrumb setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

BreadcrumbItem, Link, TreeView, and Tabs.