#### Components - Navs

Statistics Invoices Schedule

##### List group component

List group is a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content. The most basic list group is simply an unordered list with list items, and the proper classes. To use linked list group items, add anchor tags instead of list items (that also means a parent `<div>` instead of an `<ul>`). If list group is used in sidebar, card or any other container with borders, add `.list-group-flush` class to list group container to remove vertical borders.

Basic list group
With unordered list markup

- Sheared coasted so concurrent
- Goodness instead gull vulture
- Relentless ouch essentially
- Devilish yellow unsafe jerkily

Item states
Active and disabled item states

- Sheared coasted so concurrent
- Goodness instead gull vulture
- Relentless ouch essentially
- Devilish yellow unsafe jerkily

Item divider
Separate groups of related items

- Sheared coasted so concurrent
- Goodness instead gull vulture
- Relentless ouch essentially
- Devilish yellow unsafe jerkily

Group headers
Use available text styles for group headers

- List header
- Sheared coasted so concurrent
- Goodness instead gull vulture
- Relentless ouch essentially
- Another list header
- Devilish yellow unsafe jerkily

Custom background color
Custom colors from color system are also supported

- List header
- Sheared coasted so concurrent
- Goodness instead gull vulture
- Relentless ouch essentially
- Devilish yellow unsafe jerkily

Bordered items
Display horizontal borders in items

- Sheared coasted so concurrent
- Goodness instead gull vulture
- Relentless ouch essentially
- Devilish yellow unsafe jerkily

Options of bordered items
Same options can be applied to any group style

- List header
- Sheared coasted so concurrent
- Goodness instead gull vulture
- Relentless ouch essentially
- Devilish yellow unsafe jerkily

Custom background color
Custom colors from color system are also supported

- List header
- Sheared coasted so concurrent
- Goodness instead gull vulture
- Relentless ouch essentially
- Devilish yellow unsafe jerkily

Linked actions
With group of links inside `div` element
And hello exotic staunch That and well ecstatically Amid ruefully hello sped Burst circa less contritely
Action item states
Active and disabled link states
And hello exotic staunch That and well ecstatically Amid ruefully hello sped Burst circa less contritely
Action item divider
Separate groups of related links
And hello exotic staunch That and well ecstatically Amid ruefully hello sped
Burst circa less contritely
Action group headers
Use available text styles for group headers
List header
And hello exotic staunch That and well ecstatically Amid ruefully hello sped
Another list header
Burst circa less contritely
Custom background color
Custom colors from color system are also supported
List header
And hello exotic staunch That and well ecstatically
Amid ruefully hello sped Burst circa less contritely
Bordered action items
Display horizontal borders in links
And hello exotic staunch That and well ecstatically Amid ruefully hello sped Burst circa less contritely
Options of bordered action items
Same options can be applied to any group style
List header
And hello exotic staunch That and well ecstatically Amid ruefully hello sped Burst circa less contritely
Custom background color
Custom colors from color system are also supported
List header
And hello exotic staunch That and well ecstatically Amid ruefully hello sped Burst circa less contritely

##### Horizontal direction

List group component supports 2 directions - vertical and horizontal. Simply add `.list-group-horizontal` class to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl}` to make a list group horizontal starting at that breakpoint’s `min-width`.

Basic list group
With unordered list markup

- Sheared coasted
- Goodness instead
- Relentless ouch
- Devilish yellow

Item states
Active and disabled item states

- Sheared coasted
- Goodness instead
- Relentless ouch
- Devilish yellow

Justified list
Fills up all available width

- Sheared coasted
- Goodness instead
- Relentless ouch
- Devilish yellow

Linked actions
With group of links inside `div` element

Sheared coasted Goodness instead Relentless ouch Devilish yellow

Action item states
ctive and disabled link states

Sheared coasted Goodness instead Relentless ouch Devilish yellow

Justified linked list
Fills up all available width

Sheared coasted Goodness instead Relentless ouch Devilish yellow

##### Contextual classes

Example of list items `contextual` classes. Depending on the context, you can highlight a specific list group item using available contextual classes: `primary`, `secondary`, `danger`, `success`, `warning` and `info`. To use, add `.list-group-item-*` class to the base `.list-group-item` class. Also you can add `.active` class to highlight active list item. Custom colors are also supported.

List item colors
6 default or custom contextual colors

- Primary context
- But I must explain to you how all this mistaken
- Secondary context
- I will give you a complete account of the system
- Success context
- Nor again is there anyone who loves or pursues
- Danger context
- But who has any right to find fault with a man
- Warning context
- On the other hand, we denounce with righteous
- Info context
- These cases are perfectly simple to distinguish

Linked list item colors
6 default or custom contextual colors
Primary context
But I must explain to you how all this mistaken
Secondary context
I will give you a complete account of the system
Success context
Nor again is there anyone who loves or pursues
Danger context
But who has any right to find fault with a man
Warning context
On the other hand, we denounce with righteous
Info context
These cases are perfectly simple to distinguish

##### List group elements

Examples of group list `elements`. You can add badges, badge pills and icons to any list group item. Depending on a placement of the component, it will appear `before`, `after` or will be positioned on the `right` of the list item. To use right positioned element, simply add `.ml-auto` helper class to group item. Dropdown menus are also supported.

Icons in list group

- Group header
- And hello exotic staunch
- That and well ecstatically
- Sheared coasted so concurrent
- Into darn intrepid belated

Badges in list group

- Group header 37
- 93 And hello exotic staunch
- 73 That and well ecstatically
- Sheared coasted so concurrent New
- Into darn intrepid belated Resolved

Icons in linked list group

Group header
And hello exotic staunch That and well ecstatically Sheared coasted so concurrent Into darn intrepid belated

Badges in linked list group

Group header Fixes
93 And hello exotic staunch 73 That and well ecstatically Sheared coasted so concurrent New Into darn intrepid belated Resolved

##### Custom content

Simple example of a `custom` content in the list group component. You can add nearly any HTML markup, add images, custom elements and colors to the list group item. Example below demonstrates a simple content with icons, titles, right annotations and text body. Also some empty list items for extra spacing. For proper content styling, flexbox utilities must be used.

Custom content

- ###### Leapt so heedlessly

  2 days ago
  Haltered disconsolate cocky grizzly rode said oh outgrew patiently wild empirically near this and a alas some more

- ###### Black where yikes

  3 days ago
  This and shivered wow boa yikes additional much one lavish gasped outside amongst jeez scurrilously and octopus

- ###### Gecko preparatory

  4 days ago
  Insincere dipped flauntingly yikes therefore or more clenched but beneath krill before dear however

- ###### Parrot slid wow

  5 days ago
  Gosh plankton thus egotistically alas satisfactorily flatly towards and far therefore oh drove convenient less

Custom linked content

###### Leapt so heedlessly

2 days ago
Haltered disconsolate cocky grizzly rode said oh outgrew patiently wild empirically near this and a alas some more

###### Black where yikes

3 days ago
This and shivered wow boa yikes additional much one lavish gasped outside amongst jeez scurrilously and octopus

###### Gecko preparatory

4 days ago
Insincere dipped flauntingly yikes therefore or more clenched but beneath krill before dear however

###### Parrot slid wow

5 days ago
Gosh plankton thus egotistically alas satisfactorily flatly towards and far therefore oh drove convenient less