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

Installation

Copy the following code into your app directory.

uv run buridan add component breadcrumb

Anatomy

Use the following composition to build a Breadcrumb component.

breadcrumb.root(
    breadcrumb.list(
        breadcrumb.item(
            breadcrumb.link(),
        ),
        breadcrumb.separator(),
        breadcrumb.item(
            breadcrumb.page(),
        ),
    ),
)

Examples

Basic

A basic breadcrumb with a home link and a components link.

import reflex as rx

from components.ui.breadcrumb import breadcrumb


def breadcrumb_basic() -> rx.Component:
    return breadcrumb.root(
        breadcrumb.list(
            breadcrumb.item(
                breadcrumb.link("Home", href="#"),
            ),
            breadcrumb.separator(),
            breadcrumb.item(
                breadcrumb.link("Components", href="#"),
            ),
            breadcrumb.separator(),
            breadcrumb.item(
                breadcrumb.page("Breadcrumb"),
            ),
        )
    )

Custom Separator

Use a custom component as children for breadcrumb.separator to create a custom separator.

import reflex as rx

from components.icons.hugeicon import hi
from components.ui.breadcrumb import breadcrumb


def breadcrumb_custom_separator() -> rx.Component:
    return breadcrumb.root(
        breadcrumb.list(
            breadcrumb.item(
                breadcrumb.link("Home", href="#"),
            ),
            breadcrumb.separator(hi("LinerIcon")),
            breadcrumb.item(
                breadcrumb.link("Components", href="#"),
            ),
            breadcrumb.separator(hi("LinerIcon")),
            breadcrumb.item(
                breadcrumb.page("Breadcrumb"),
            ),
        )
    )

You can compose breadcrumb.item with a menu.root to create a dropdown in the breadcrumb.

import reflex as rx

from components.icons.hugeicon import hi
from components.ui.breadcrumb import breadcrumb
from components.ui.button import button
from components.ui.menu import menu


def breadcrumb_dropdown_demo() -> rx.Component:
    return breadcrumb.root(
        breadcrumb.list(
            breadcrumb.item(
                breadcrumb.link("Home", href="#"),
            ),
            breadcrumb.separator(hi("LinerIcon")),
            breadcrumb.item(
                menu.root(
                    menu.trigger(
                        render_=rx.el.button(
                            "Components",
                            hi(
                                "ArrowDown01Icon",
                                custom_attrs={"data-icon": "inline-end"},
                                class_name="size-4",
                            ),
                            class_name="flex flex-row items-center gap-x-2",
                        )
                    ),
                    menu.portal(
                        menu.positioner(
                            menu.popup(
                                menu.group(
                                    menu.item("Documentation"),
                                    menu.item("Themes"),
                                    menu.item("GitHub"),
                                ),
                                align="start",
                            )
                        ),
                    ),
                ),
            ),
            breadcrumb.separator(hi("LinerIcon")),
            breadcrumb.item(
                breadcrumb.page("Breadcrumb"),
            ),
        )
    )

Collapsed

We provide a breadcrumb.ellipsis component to show a collapsed state when the breadcrumb is too long.

import reflex as rx

from components.ui.breadcrumb import breadcrumb


def breadcrumb_ellipsis() -> rx.Component:
    return breadcrumb.root(
        breadcrumb.list(
            breadcrumb.item(
                breadcrumb.link("Home", href="#"),
            ),
            breadcrumb.separator(),
            breadcrumb.item(
                breadcrumb.ellipsis(),
            ),
            breadcrumb.separator(),
            breadcrumb.item(
                breadcrumb.link("Components", href="#"),
            ),
            breadcrumb.separator(),
            breadcrumb.item(
                breadcrumb.page("Breadcrumb"),
            ),
        )
    )

API Reference

The breadcrumb.root component is the root navigation element that wraps all breadcrumb components.

Prop	Type	Default
class_name	string	-

The breadcrumb.list component displays the ordered list of breadcrumb items.

Prop	Type	Default
class_name	string	-

The breadcrumb.item component wraps individual breadcrumb items.

Prop	Type	Default
class_name	string	-

The breadcrumb.link component displays a clickable link in the breadcrumb.

Prop	Type	Default
class_name	string	-

The breadcrumb.page component displays the current page in the breadcrumb (non-clickable).

Prop	Type	Default
class_name	string	-

The breadcrumb.separator component displays a separator between breadcrumb items. You can pass custom children to override the default separator icon.

Prop	Type	Default
children	rx.Component	-
class_name	string	-

The breadcrumb.ellipsis component displays an ellipsis indicator for collapsed breadcrumb items.

Prop	Type	Default
class_name	string	-

External Tools

︲

Agent Resources

llms.txt

On This Page