︲

︲

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Installation

Copy the following code into your app directory.

uv

buridan add component breadcrumb
Anatomy

Use the following composition to build a Breadcrumb

breadcrumb( breadcrumb_list( breadcrumb_item( breadcrumb_link(), ), breadcrumb_separator(), breadcrumb_item( breadcrumb_page(), ), ), )
Examples

Below are examples demonstrating how the component can be used.

Basic Demo

A basic breadcrumb showing the default navigation structure.

import reflex as rx
from components.ui.breadcrumb import (
    breadcrumb,
    breadcrumb_ellipsis,
    breadcrumb_item,
    breadcrumb_link,
    breadcrumb_list,
    breadcrumb_page,
    breadcrumb_separator,
)


def breadcrumb_basic_demo():
    return rx.el.div(
        breadcrumb(
            breadcrumb_list(
                breadcrumb_item(
                    breadcrumb_link("Home", href="#"),
                ),
                breadcrumb_separator(),
                breadcrumb_item(
                    rx.menu.root(
                        rx.menu.trigger(
                            rx.box(
                                breadcrumb_ellipsis(class_name="size-4"),
                                rx.el.span("Toggle menu", class_name="sr-only"),
                                class_name="flex items-center gap-1",
                            ),
                        ),
                        rx.menu.content(
                            rx.menu.item("Documentation"),
                            rx.menu.item("Themes"),
                            rx.menu.item("GitHub"),
                            class_name="min-w-[8rem]",
                        ),
                    ),
                ),
                breadcrumb_separator(),
                breadcrumb_item(
                    breadcrumb_link("Components", href="#"),
                ),
                breadcrumb_separator(),
                breadcrumb_item(
                    breadcrumb_page("Breadcrumb"),
                ),
            ),
        ),
        class_name="p-8",
    )
Simple Breadcrumb

A minimal breadcrumb with plain text links.

import reflex as rx
from components.ui.breadcrumb import (
    breadcrumb,
    breadcrumb_item,
    breadcrumb_link,
    breadcrumb_list,
    breadcrumb_page,
    breadcrumb_separator,
)


def breadcrumb_simple_breadcrumb():
    return rx.box(
        breadcrumb(
            breadcrumb_list(
                breadcrumb_item(
                    breadcrumb_link("Home", href="#"),
                ),
                breadcrumb_separator(),
                breadcrumb_item(
                    breadcrumb_link("Products", href="#"),
                ),
                breadcrumb_separator(),
                breadcrumb_item(
                    breadcrumb_link("Electronics", href="#"),
                ),
                breadcrumb_separator(),
                breadcrumb_item(
                    breadcrumb_page("Laptop"),
                ),
            ),
        ),
        class_name="p-8",
    )
Icon Breadcrumb

A breadcrumb that includes icons alongside link labels.

import reflex as rx
from components.ui.breadcrumb import (
    breadcrumb,
    breadcrumb_item,
    breadcrumb_link,
    breadcrumb_list,
    breadcrumb_page,
    breadcrumb_separator,
)


def breadcrumb_icon_breadcrumb():
    return rx.el.div(
        breadcrumb(
            breadcrumb_list(
                breadcrumb_item(
                    breadcrumb_link(
                        rx.icon(tag="home", size=14),
                        "Home",
                        href="#",
                        class_name="flex flex-row gap-x-1 items-center",
                    ),
                ),
                breadcrumb_separator(),
                breadcrumb_item(
                    breadcrumb_link(
                        rx.icon(tag="folder", size=14),
                        "Documents",
                        href="#",
                        class_name="flex flex-row gap-x-1 items-center",
                    ),
                ),
                breadcrumb_separator(),
                breadcrumb_item(
                    breadcrumb_page(
                        rx.icon(tag="file-text", size=14),
                        "README.md",
                        class_name="flex flex-row gap-x-1 items-center",
                    ),
                ),
            ),
        ),
        class_name="p-8",
    )
Custom Separator

A breadcrumb with a customized separator between items.

import reflex as rx
from components.ui.breadcrumb import (
    breadcrumb,
    breadcrumb_item,
    breadcrumb_link,
    breadcrumb_list,
    breadcrumb_page,
    breadcrumb_separator,
)


def breadcrumb_custom_separator():
    return rx.el.div(
        breadcrumb(
            breadcrumb_list(
                breadcrumb_item(
                    breadcrumb_link("Home", href="#"),
                ),
                breadcrumb_separator(
                    rx.text("/", class_name="text-[var(--muted-foreground)]")
                ),
                breadcrumb_item(
                    breadcrumb_link("Blog", href="#"),
                ),
                breadcrumb_separator(
                    rx.text("/", class_name="text-[var(--muted-foreground)]")
                ),
                breadcrumb_item(
                    breadcrumb_page("Article"),
                ),
            ),
        ),
        class_name="p-8",
    )