Collapse

Collapse shows and hides a block with a height or width transition. It is Bootstrap 5's collapse (including the navbar-collapsible variant). Use it for disclosure panels, “read more” sections, and the collapsing region of a responsive navbar — not for mutually exclusive chapters (Accordion handles that).

Basic usage

is_open defaults to False. Put the revealed content in a with-block (or pass child elements). Pair the panel with a Button whose handler toggles open state in your page logic.

def demo():
    with bs.scope(), bs.collapse(is_open=True):
        ui.label("This panel is visible on first render.")
        ui.label("Put any grouping content inside the collapse.")

collapse is the snake_case alias for Collapse.

Dimension and navbar

dimension defaults to "height" (the usual vertical disclosure). Set dimension="width" for a horizontal reveal. navbar=True applies the navbar collapse classes so the panel can sit inside a responsive bar and open as a block below the toggler on small viewports.

def demo():
    with bs.scope():
        with bs.collapse(is_open=True, dimension="width"):
            ui.label("Revealed along the width axis.")

        with bs.collapse(is_open=True, navbar=True, id="main-nav-collapse"):
            ui.label("Navbar links go here.")

on_show, on_shown, on_hide, and on_hidden are Python hooks for the start and end of each transition. Register them in the constructor. Shared layout props class_name, style, and id apply to the collapsing element; give the panel an id when a navbar toggler needs a public target.

Argument reference

Property	Type	Default	DBC 2.0.4 name	Support (native)	Support (compat)
children	a list of or a singular dash component, string or number	None	children	supported	supported
id	string	None	id	supported	supported
is_open	boolean	None	isOpen	supported	supported
dimension	a value equal to: 'height', 'width'	'height'	dimension	supported	supported
navbar	boolean	None	navbar	supported	supported
style	unknown	None	style	supported	supported
class_name	string	None	className	supported	supported
tag	string	None	tag	supported	supported
key	string	None	key	unsupported	unsupported
class_name	string	None	className	supported	supported

Notes

Collapse is a single panel. If several panels should open independently or as an exclusive set, use Accordion with always_open rather than coordinating many Collapse widgets by hand. See the compatibility page for how overlay lifecycle callbacks are adapted from Dash-style props to NiceGUI.