Breadcrumb¶

Breadcrumb shows the path from the site root to the current page. It is Bootstrap 5's breadcrumb (a nav landmark with an inner list). Use it on nested workspaces, documentation trees, and any view where the reader may need to step up one or more levels.

Basic usage¶

Pass items as a list of dicts. Each dict uses label for the visible text, optional href for a link, and active=True for the current page (typically the last crumb, rendered without a link).

breadcrumb_basic example

def demo():
    with bs.scope():
        bs.breadcrumb(
            items=[
                {"label": "Home", "href": "/"},
                {"label": "Projects", "href": "/projects"},
                {"label": "Northwind", "active": True},
            ]
        )

breadcrumb is the snake_case alias for Breadcrumb. The root tag defaults to "nav" so the trail is exposed as a navigation landmark.

Item styling¶

item_class_name and item_style apply to every crumb. Use them for spacing or type tweaks that should not live on the outer nav. Keep per-item meaning in the dicts (label, href, active) rather than trying to encode it in CSS.

breadcrumb_item_styling example

def demo():
    with bs.scope():
        bs.breadcrumb(
            items=[
                {"label": "Home", "href": "/"},
                {"label": "Library", "href": "/library"},
                {"label": "Data", "active": True},
            ],
            item_class_name="small",
            item_style={"fontWeight": "500"},
        )

Omit href on intermediate crumbs if that level is not a real route. Do not mark more than one item active. Shared layout props class_name, style, and id land on the outer element.

Argument reference¶

Property	Type	Default	DBC 2.0.4 name	Support (native)	Support (compat)
id	string	None	id	supported	supported
items	list of dicts	None	items	supported	supported
style	unknown	None	style	supported	supported
item_style	dict	None	item_style	supported	supported
class_name	string	None	className	supported	supported
item_class_name	string	None	item_class_name	supported	supported
key	string	None	key	unsupported	unsupported
class_name	string	None	className	supported	supported
itemClassName	string	None	itemClassName	supported	supported
tag	dict	None	tag	supported	supported

Notes¶

Breadcrumbs are a trail, not a primary menu — keep Nav / Navbar for the main information architecture. Item dict keys follow the dash-bootstrap-components shape (label, href, active) so ports from DBC stay mechanical. See the compatibility page for surface differences.