Skip to main content

Breadcrumb

A Shadcn breadcrumb: the path to the current page, as a row of links.

Example:

shad.Breadcrumb(
    items=[
        shad.BreadcrumbItem("Home", on_click=go_home),
        shad.BreadcrumbItem("Components", on_click=go_components),
        shad.BreadcrumbItem("Breadcrumb"),
    ]
)
Breadcrumb
Breadcrumb

Inherits: LayoutControl

Properties

Example​

Shadcn Breadcrumb​

play_arrowTry Online
import flet_shadcn_ui as shad

import flet as ft


def main(page: ft.Page):
    page.title = "Shadcn Breadcrumb"

    def handle_click(e: ft.Event[shad.BreadcrumbItem]):
        message.value = f"Navigate to: {e.control.content}"

    message = ft.Text("Click a link")

    page.add(
        ft.SafeArea(
            content=ft.Column(
                spacing=20,
                controls=[
                    shad.Breadcrumb(
                        items=[
                            shad.BreadcrumbItem("Home", on_click=handle_click),
                            shad.BreadcrumbEllipsis(),
                            shad.BreadcrumbItem("Components", on_click=handle_click),
                            shad.BreadcrumbItem("Breadcrumb"),
                        ]
                    ),
                    shad.Breadcrumb(
                        separator=ft.Text("/"),
                        items=[
                            shad.BreadcrumbItem("Docs", on_click=handle_click),
                            shad.BreadcrumbItem("Controls", on_click=handle_click),
                            shad.BreadcrumbItem("Shadcn"),
                        ],
                    ),
                    message,
                ],
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)
breadcrumb
After clicking Components

Properties​

itemsclass-attributeinstance-attribute​

items: list[Control] = field(default_factory=list)

The steps of the path, usually BreadcrumbItem and BreadcrumbEllipsis controls.

The last item is highlighted as the current page.

separatorclass-attributeinstance-attribute​

separator: IconDataOrControl | None = None

The icon or control shown between items.

If None, a chevron is shown.

spacingclass-attributeinstance-attribute​

spacing: Number | None = None

The space on each side of separator, and between wrapped lines.

If None, defaults to 10.