Breadcrumbs

Download this notebook from GitHub (right-click to download).

---

import panel as pn
import panel_material_ui as pmui

pn.extension()

The Breadcrumbs component is part of the Menu family of components. Menu components provide a structured way for users to navigate or choose between a series of defined items. In the case of Breadcrumbs, these items represent navigation steps or levels in a hierarchy.

Each item in the Breadcrumbs list is defined by a dictionary with several supported keys:

Item Structure

Each item can include the following keys:

• label (str, required): The text displayed for the breadcrumb item.

• href (str, optional): A URL to link to. If provided, the breadcrumb becomes a link.

• icon (str, optional): An icon to display next to the label.

• avatar (str, optional): An avatar or image to show beside the label.

These dictionaries are passed to the component via the items parameter as a list. When one of the items is selected it will be available on the value parameter.

Since only the allowed keys are synced with the frontend, other information can be stored in the item dictionaries.

Parameters:

Core

• active (boolean): Whether the dialog is visible.

• items (list): List of menu items.

• value (dict): The currently selected item.

Display

• color (str): The color of the bar, one of ‘default’, ‘primary’, ‘secondary’, ‘success’, ‘info’, ‘warning’, ‘danger’, ‘light’ or ‘dark’.

• separator (str): The separator displayed between breadcrumb items.

Styling

• sx (dict): Component level styling API.

• theme_config (dict): Theming API.

---

Breadcrumbs allow selecting between a number of items:

breadcrumbs = pmui.Breadcrumbs(items=[
    {'label': 'Documentation', 'icon': 'article'},
    {'label': 'Reference Gallery', 'icon': 'category'},
    {'label': 'Menus', 'icon': 'menu'},
    {'label': 'Breadcrumbs', 'icon': 'grain'},
], active=3)

breadcrumbs

Clicking on a particular item will highlight it and set both active and value parameters:

breadcrumbs.value

{'label': 'Breadcrumbs', 'icon': 'grain'}

Like all menus the items only sync the allowed keys. This means you can easily store other information in the items, e.g. you can use it to easily select between different views to be displayed:

breadcrumbs = pmui.Breadcrumbs(
    items=[
        {'label': '🏰 Kingdom', 'view': pmui.Typography('# 🏰 Welcome to the Kingdom')},
        {'label': '🌲 Enchanted Forest', 'view': pmui.Typography('# 🌲 You enter the Enchanted Forest...')},
        {'label': '🐉 Dragon\'s Lair', 'view': pmui.Typography('# 🐉 Beware! You approach the Dragon\'s Lair.')},
        {'label': '💎 Treasure Room', 'view': pmui .Typography('# 💎 Congratulations! You found the Treasure.')},
    ],
    active=0,  # Start at the beginning of the journey
    color='warning'
)

pn.Column(
    breadcrumbs,
    breadcrumbs.rx()['view']
)

In the above example we take advantage of the fact that Widget.rx() returns a reactive reference to the value parameter and then access the view on that item. Rendering this expression allows us to control the current view with the menu.

Controls

The Breadcrumbs menu exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:

pn.Row(breadcrumbs.controls(jslink=True), breadcrumbs)

---

Download this notebook from GitHub (right-click to download).