ListGroup¶

ListGroup is Bootstrap 5's list group: a vertical list of related rows for navigation, settings, or compact results. Use it when each child is a peer item rather than a paragraph of copy or a grid cell.

Basic usage¶

Fill the group with ListGroupItem children. Text-only items are fine; wrap richer rows in the same item component so spacing and borders stay consistent.

list_group_basic example

def demo():
    with bs.scope(), bs.list_group():
        bs.list_group_item("Inbox")
        bs.list_group_item("Drafts")
        bs.list_group_item("Sent")

Options¶

flush¶

flush=True drops the outer border and radius so the list can sit flush against a card body, a sidebar, or the edge of a column. The items keep their separators; only the group's chrome goes away.

list_group_flush example

def demo():
    with bs.scope(), bs.list_group(flush=True):
        bs.list_group_item("Profile")
        bs.list_group_item("Billing")
        bs.list_group_item("Sign out")

numbered¶

numbered=True renders an ordered list group. Bootstrap draws the index; you still pass ListGroupItem children, not raw strings at the group level. Use this for ranked results or step summaries where the order is the point.

list_group_numbered example

def demo():
    with bs.scope(), bs.list_group(numbered=True):
        bs.list_group_item("Create a project")
        bs.list_group_item("Invite the team")
        bs.list_group_item("Ship the first build")

flush and numbered combine when you want ordered rows inside a card.

ListGroupItem¶

Each row is a ListGroupItem. Keep one idea per item. Nest labels, badges, or short buttons inside the item when the row needs more than a line of text, but do not place a ListGroup inside another ListGroup — nest a new group in a column instead.

Notes¶

ListGroup is structural. Item-level clicks, if you add them, belong on buttons or links inside the item and use NiceGUI on_click callables rather than an n_clicks counter on the group.

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
numbered	boolean	False	numbered	supported	supported
horizontal	boolean \| string	None	horizontal	supported	supported
flush	boolean	None	flush	supported	supported
style	unknown	None	style	supported	supported
class_name	string	None	className	supported	supported
tag	string	'ul'	tag	supported	supported
key	string	None	key	unsupported	unsupported
class_name	string	None	className	supported	supported