ListGroup stacks related navigational or action items vertically inside panels—settings sidebars, overflow panels, and mobile-friendly pickers. Consistent spacing and interactive affordances help operators scan faster than ad hoc FlexBox stacks.
- Six or fewer related destinations or actions that belong to one category.
- Supplementary navigation in drawers or inspector panels (not the global app sidebar).
- Touch-friendly lists where row height meets target guidelines.
- Tabular data with sortable columns—use Table or Data table.
- Heterogeneous widgets mixed with arbitrary layout—use bespoke layouts.
- Very deep hierarchies—use tree or nested menu patterns.
Dividers, section labels, and icons should follow the same patterns as Menu items for cognitive consistency.
Vertical stack of items; each item is link-like or button-like but not both inconsistently within one list.
- Parallel phrasing (“User profile”, “Notification settings”) with
formatMessage.
- Keep one concept per row; defer secondary text to subtitles if supported.
- Entire row hit targets should match menu row expectations; disabled rows show rationale via tooltip when needed.
- Do keep one interactive pattern per list (all navigation or all actions) for predictable keyboard treatment.
- Do align icons and text columns across rows for scanning.
- Don’t embed complex forms inside list rows—open a detail screen or modal.
- Don’t overload list groups with primary global navigation—use
Sidebar.
- Lists should expose correct roles (list/listitem or navigation landmarks) per implementation.
- Keyboard: arrow key conventions should match other list UIs in the product.
- List item for individual row behavior.
- Menu for dropdown action sets.
- Sidebar for app-level navigation.
