laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
dbd074c33d
reflex/docs/library/chakra/navigation/breadcrumb.md
Lendemor dbd074c33d add docs from reflex-web
2024-02-26 17:18:28 +01:00

998 B
Raw Blame History

components
rx.chakra.Breadcrumb
rx.chakra.BreadcrumbItem
rx.chakra.BreadcrumbLink 
import reflex as rx

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