--- 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-actions desc: Slot for controls on the trailing edge of an entry 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 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. ## 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
### 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.