# List group > 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. Group related items in one list. Source: https://docs.tabler.io/ui/components/list-group --- ## 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. ```html
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. ```html ``` ## 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. ```html
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. ```html
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. ```html
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. ```html
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. ```html
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. ```html
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. ```html
  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. ```html
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. ```html
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. ```html

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. ```html

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`. ```html ``` 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. ```html ``` ## 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. ```html ``` ## 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.