Learn

Components

Recipes

API Reference

Onboarding

Getting Started

Tutorial

Hosting

Reflex Deploy

Self 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)",
)

API Reference

The parent container for breadcrumbs.

Prop	Type	Default Value	Values
`separator`	str
`separator_margin`	str

Event Triggers

See the full list of default event triggers

BreadcrumbItem

Individual breadcrumb element containing a link and a divider.

Prop	Type	Default Value	Values
`is_current_page`	bool
`is_last_child`	bool
`separator`	str
`spacing`	str

Event Triggers

See the full list of default event triggers

BreadcrumbLink

The breadcrumb link.

Prop	Type	Default Value
`is_current_page`	bool
`rel`	str
`href`	str
`text`	str
`as_`	str	BaseVar.create( value="{NextLink}", _var_is_local=False, _var_is_string=False )
`is_external`	bool

Event Triggers

See the full list of default event triggers

Did you find this useful?

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Breadcrumb

API Reference

Breadcrumb

BreadcrumbItem

BreadcrumbLink