Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

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

No component specific 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

Event Triggers

No component specific event triggers

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.

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting