## Breadcrumbs  
Breadcrumbs is a navigation component that is used to indicate current page's location within a navigational hierarchy.  
Category: Navigation  

### Simple Example

Breadcrumbs accept any react nodes as children and places given separator (defaults to `/`) between them.

```python
import dash_mantine_components as dmc
from dash import dcc, html

component = html.Div(
    [
        # default separator
        dmc.Breadcrumbs(
            children=[
                dcc.Link("Home", href="/"),
                dcc.Link("Dash Mantine Components", href="/"),
                dcc.Link("Breadcrumbs", href="/components/breadcrumbs"),
            ],
        ),
        dmc.Space(h=20),
        # separator provided
        dmc.Breadcrumbs(
            separator="→",
            children=[
                dmc.Anchor("Home", href="/", underline=False),
                dmc.Anchor("Dash Mantine Components", href="/", underline=False),
                dmc.Anchor(
                    "Breadcrumbs", href="/components/breadcrumbs", underline=False
                ),
            ],
        ),
    ]
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name       | Static selector                 | Description                |
|:-----------|:--------------------------------|:---------------------------|
| root       | .mantine-Breadcrumbs-root       | Root element               |
| breadcrumb | .mantine-Breadcrumbs-breadcrumb | Breadcrumb item wrapper    |
| separator  | .mantine-Breadcrumbs-separator  | Separator between children |


### Keyword Arguments
#### Breadcrumbs

- children (a list of or a singular dash component, string or number; required):
    React nodes that should be separated with `separator`.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- separator (a list of or a singular dash component, string or number; optional):
    Separator between children, `'/'` by default.

- separatorMargin (string | number; optional):
    Controls spacing between separator and breadcrumb, `'xs'` by
    default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.