--- title: List group summary: A list group shows a series of related items in one block. Use it for simple lists, navigation, settings, and lists of records inside a card. description: Group related items in one list. source: core/scss/ui/_lists.scss css-vars: list-group classnames: component: - class: list-group desc: Container element part: - class: list-group-item desc: One entry - class: list-group-header desc: Section label between entries - class: list-group-item-media desc: Slot for an icon, an avatar or an input on the leading edge of an entry - class: list-group-item-content desc: Main slot of an entry; its presence turns the entry into a row of slots - class: list-group-item-title desc: First line of the content, cut with an ellipsis - class: list-group-item-description desc: Second line of the content, in the secondary color - class: list-group-item-meta desc: Slot for a time, a count or a badge after the content - class: list-group-item-actions desc: Slot for controls on the trailing edge of an entry - class: list-group-selectable-check desc: Checkbox or radio that marks its entry when checked - class: list-group-nested desc: Block of indented entries under a parent entry, usually a collapse - class: list-group-item-toggle desc: Chevron of a parent entry, turned over while its nested entries are open size: - class: list-group-sm desc: Compact entries - class: list-group-lg desc: Roomy entries style: - class: list-group-flush desc: Removes the outer border, to sit flush in a card - class: list-group-transparent desc: Removes the background and the borders - class: list-group-numbered desc: Numbers the entries - class: list-separated desc: Spaces the entries apart instead of joining them with borders behavior: - class: list-group-hoverable desc: Highlights the entry under the cursor - class: list-group-item-action desc: Marks an entry as a link or a button - class: list-group-selectable desc: Gives an entry with a checked input the active look direction: - class: list-group-horizontal desc: Lays the entries out in a row; -{breakpoint} only above that width color: - class: list-group-item-{color} desc: Tints one entry, for example list-group-item-success --- import Example from '@components/Example.astro'; import Icon from '@ui/Icon.astro'; ## Overview Use the `list-group` class on the container and `list-group-item` on each row. Items share one border and stack on top of each other.
First item
Second item
Third item
 The container can be any element. Use `ul` with `li` items for a real list, or `nav` with `a` items for navigation. ## Item layout An item can hold more than one line of text. Put a `list-group-item-content` element in the item and it becomes a row of slots: - `list-group-item-media` - an icon, an avatar or an input before the content, - `list-group-item-content` - the main part, with `list-group-item-title` and `list-group-item-description`, - `list-group-item-meta` - a time, a count or a badge after the content, - `list-group-item-actions` - buttons and other controls at the end. Only the content slot is required. The title and the description are cut with an ellipsis when they do not fit.
Paweł Kuna
UI Designer
2 h
Alice Marlin
Frontend developer
3 d
 The item itself can be a link or a `label`. Use a `label` with a checkbox, a radio or a switch inside, so a click on the whole row changes the input.
### Longer text The slots are centered and the description stays on one line. For longer text add the `align-items-start` utility to the item and `text-wrap` to the description.
Paweł Kuna
The new list layout works well on the dashboard. Can we use the same slots for the search results?
2 h
 ## Sizes Add `list-group-sm` for compact items or `list-group-lg` for items with more room. The classes change the vertical padding of the items and the gap between the slots.
Small item
Small item
Default item
Default item
Large item
Large item
 ## Variants ### Flush Add `list-group-flush` to remove the outer border and the rounded corners. Use it when the list sits inside another element, for example a card.
First item
Second item
Third item
 ### Links and buttons Add `list-group-item-action` to items that the user can click. It adds a hover and focus state. Use it on `a` or `button` elements only.
Profile Billing Notifications
### Active and disabled Mark the current item with `active`. Tabler shows it with a thicker border on the start side. Use `disabled` for an item the user cannot pick.
Active item Normal item Disabled item
### Selectable items Add `list-group-selectable` to the container and `list-group-selectable-check` to the checkbox or radio in each item. A checked input gives its item the same look as `active`, with no JavaScript. Use a `label` as the item, so a click on the whole row changes the input.
### Nested items Put the child items in a `list-group-nested` element right after their parent item. The nested items are indented and have no borders between them. Make the element a `collapse` and the parent item its toggle to open and close the group. Add `list-group-item-toggle` to the chevron, and it turns over while the group is open.
Settings
The indent is the `--tblr-list-group-nested-indent` variable. Its default matches an icon in the media slot. ### Section header Use `list-group-header` to split a long list into groups. The header is a small uppercase label with its own background.
Today
Report generated
New comment
Yesterday
Invoice paid
 ### Hoverable items with actions Add `list-group-hoverable` to the container to highlight the row under the pointer. Inside an item, put extra controls in a `list-group-item-actions` element. They stay hidden and appear on hover. Add the `show` class to keep an action always visible.
Change deprecated html tags
Fix spacing in the navbar
 ### Transparent Add `list-group-transparent` to drop the background and the borders. Icons inside the items turn gray. This variant works well as a side menu.
Account Settings Notifications
### Numbered Use an `ol` element with `list-group-numbered` to number the items. The numbers come from CSS, so you do not write them in the markup.
  1. Create an account
  2. Confirm your email
  3. Invite your team
 ### Horizontal Add `list-group-horizontal` to place the items in a row. Use a breakpoint, for example `list-group-horizontal-md`, to switch from a column to a row on wider screens.
First
Second
Third
 ### Contextual colors Use `list-group-item-*` with a theme color to give one item a background. See the [full list of available colors](/ui/base/colors) for more details.
Primary item
Success item
Warning item
Danger item
 ## Examples ### List group in a card Add `card-list-group` to the list inside a card. The items then use the card padding, and the borders on the sides are removed. A border is added between the card body and the list.

Team

Paweł Kuna
UI Designer
Alice Marlin
Frontend developer
 ### Notifications list This pattern joins several variants: a flush list inside a card, hoverable rows, and an action that shows on hover.

Notifications

Build failed
The last deploy did not finish
New comment
Alice replied in the design thread
 ## Inline list `list-inline` is a separate, simpler pattern for a row of items - for example a footer or a page header with a few links. It is not a `list-group`: items have no border or background, only spacing between them. Use `list-inline` on a `ul` and `list-inline-item` on each `li`. Add `list-inline-dots` to separate items with a centered dot instead of relying on spacing alone. Tabler uses this pattern in its own footer. ## Separated list `list-separated` stacks its children with a gap between them instead of a border. Use it when each item is a block of its own - a card, a media object, a row of details - rather than a row in a bordered list. ## Accessibility - Pick the right element. Use `ul` or `ol` with `li` for a list of items, `nav` with `a` for navigation, and `button` for actions on the page. - Mark the current item with `aria-current="true"` next to the `active` class. The color alone is not enough. - A `disabled` class does not block clicks on a link. Remove the `href`, add `aria-disabled="true"`, and set `tabindex="-1"`. - Actions in `list-group-item-actions` appear on hover only. They stay in the tab order, but they are invisible while focused, so do not put the only way to do something there. Add the `show` class when an action must always be visible.