Breadcrumbs

The Breadcrumbs component is used to indicate the current page's location within a navigational hierarchy. It helps users understand their position in the application and navigate to parent levels.

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.Breadcrumbs(
        items=[
          {"label": "Home", "href": "/"},
          {"label": "Category", "href": "/category"},
          {"label": "Current Page"},
        ]
      )
    ])
  ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Props Table

Below are the main props available for the Breadcrumbs component.

Prop	Type	Default	Description
items	array		An array of breadcrumb items. Each item is an object with `label` and optional `href`.
separator	ReactNode / string	"/"	The symbol or component used to separate breadcrumb items.
maxItems	number		The maximum number of items to display. When exceeded, items are collapsed.
children	ReactNode / DashComponent		The content to display within the breadcrumbs.

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI Breadcrumbs Documentation

Props Table​

Props Table