Breadcrumbs, or a breadcrumb navigation, can help enhance how users navigate to previous page levels of a website.

This is userful for websites with a lot of pages.

rc.breadcrumb(
    rc.breadcrumb_item(
        rc.breadcrumb_link("Home", href="#")
    ),
    rc.breadcrumb_item(
        rc.breadcrumb_link("Docs", href="#")
    ),
    rc.breadcrumb_item(
        rc.breadcrumb_link("Breadcrumb", href="#")
    ),
)

The separator prop can be used to change the default separator.

rc.breadcrumb(
    rc.breadcrumb_item(
        rc.breadcrumb_link("Home", href="#")
    ),
    rc.breadcrumb_item(
        rc.breadcrumb_link("Docs", href="#")
    ),
    rc.breadcrumb_item(
        rc.breadcrumb_link("Breadcrumb", href="#")
    ),
    separator=">",
    color="rgb(107,99,246)",
)

rc.Breadcrumb

The parent container for breadcrumbs.

PropType | ValuesDefault
separator
str
separator_margin
str

Event Triggers

See the full list of default event triggers

rc.BreadcrumbItem

Individual breadcrumb element containing a link and a divider.

PropType | ValuesDefault
is_current_page
bool
is_last_child
bool
separator
str
spacing
str

rc.BreadcrumbLink

The breadcrumb link.

PropType | ValuesDefault
is_current_page
bool
rel
str
href
str
text
str
as_
Component
is_external
bool