Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Navigation

/

Breadcrumb

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.

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

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

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

The parent container for breadcrumbs.

PropTypeDescriptionValues
separatorstr

The visual separator between each breadcrumb item

separator_marginstr

The left and right margin applied to the separator

Event Triggers

See the full list of default event triggers

Individual breadcrumb element containing a link and a divider.

PropTypeDescriptionValues
is_current_pagebool

Is the current page of the breadcrumb.

is_last_childbool

Is the last child of the breadcrumb.

separatorstr

The visual separator between each breadcrumb item

spacingstr

The left and right margin applied to the separator

The breadcrumb link.

PropTypeDescriptionValues
is_current_pagebool

Is the current page of the breadcrumb.

relstr

The rel.

hrefstr

The page to link to.

textstr

The text to display.

as_str

What the link renders to.

is_externalbool

If true, the link will open in new tab.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting