ui.breadcrumb

Breadcrumb

The trail from the top of the app to the current page — each parent a link, the last segment where you are.

A trail from a list

Dicts, (label, href) tuples or plain strings. The last segment is always the current page.

def trail() -> None:
    ui.breadcrumb([
        {"label": "Workspace", "href": "#workspace"},
        {"label": "Projects", "href": "#projects"},
        {"label": "Website redesign"},
    ])

With icons

ui.breadcrumb_item when a segment needs more than text.

def with_icons() -> None:
    with ui.breadcrumb():
        ui.breadcrumb_item("Home", icon="house", href="#home")
        ui.breadcrumb_item("Customers", icon="building-2", href="#customers")
        ui.breadcrumb_item("Northwind Traders", icon="briefcase", href="#northwind")
        ui.breadcrumb_item("Invoice INV-2041", icon="receipt")

Separators

An icon name, or any literal text.

def separators() -> None:
    with ui.vstack(gap="md", align="center"):
        for separator in ("chevron-right", "/", "·"):
            ui.breadcrumb([("Docs", "#docs"), ("Components", "#components"),
                           "Breadcrumb"], separator=separator)

Sizes and colour

The trail inherits the text colour; color= gives it an accent.

def sizes_and_colors() -> None:
    with ui.vstack(gap="md", align="center"):
        for size in ("xs", "sm", "md", "lg"):
            ui.breadcrumb([("Settings", "#settings"), ("Team", "#team"),
                           "Permissions"], size=size)
        ui.breadcrumb([("Settings", "#settings"), ("Team", "#team"),
                       "Permissions"], color="primary")

Above a page title

Contracts

3 active · renewal due in 42 days

def page_heading() -> None:
    with ui.vstack(gap="sm", classes="w-full"):
        with ui.breadcrumb():
            ui.breadcrumb_item("Accounts", icon="building-2", href="#accounts")
            ui.breadcrumb_item("Atlas Freight", href="#atlas")
            ui.breadcrumb_item("Contracts")
        with ui.hstack(gap="md", justify="between", wrap=True):
            with ui.vstack(gap="none"):
                ui.heading("Contracts", level=2, size="2xl")
                ui.text("3 active · renewal due in 42 days", color="muted")
            with ui.hstack(gap="sm"):
                ui.button("Export", variant="outline", icon_left="download")
                ui.button("New contract", icon_left="plus")