List Group

By Harry Manchanda

lists group nav menu sidebar off-canvas navigation

How do I use This?

List Group Component that helps you display a set of content with specific list items. Great for sidebars, off-canvas, or mobile menus.

HTML

<ul class="list-group">
  <li class="list-group-item active">List Group Item 1 (Active)</li>
  <li class="list-group-item">List Group Item 2</li>
  <li class="list-group-item">List Group Item 3</li>
  <li class="list-group-item disabled">List Group Item 4 (Disabled)</li>
</ul>

$list-group-background: $white;
$list-group-active-background: $primary-color;
$list-group-hover-background: $light-gray;
$list-group-disabled-background: $white;
$list-group-font-color: $body-font-color;
$list-group-font-disabled-color: $dark-gray;
$list-group-font-active-color: $white;
$list-group-border: 1px solid $light-gray;
$list-group-active-border: 1px solid $primary-color;
$list-group-shadow: none;
$list-group-border-radius: $global-radius;
$list-group-padding: $global-padding;
$list-group-margin: $global-margin;

.list-group {
  margin-bottom: $list-group-margin;
  border: $list-group-border;
  border-radius: $list-group-border-radius;
  background: $list-group-background;
  box-shadow: $list-group-shadow;
  overflow: hidden;
  color: $list-group-font-color;

  & > :last-child {
    margin-bottom: 0;
  }
}

.list-group-item {
  padding: $list-group-padding;
  border-bottom: $list-group-border;

  & > :last-child {
    margin-bottom: 0;
    border-bottom: none;
  }

  &.active {
    color: $list-group-font-active-color;
    background-color: $list-group-active-background;
    border-color: $list-group-active-border;
  }

  &:hover, &:focus {
    background-color: $list-group-hover-background;
    &.active {
      background-color: $list-group-active-background;
    }
  }

  &.disabled,
  &[disabled] {
    &,
    &:hover, &:focus {
      color: $list-group-font-disabled-color;
      cursor: not-allowed;
      background-color: $list-group-disabled-background;
    }
  }
}

.list-group {
  margin-bottom: 1rem;
  border: 1px solid #e6e6e6;
  border-radius: 0;
  background: #fefefe;
  box-shadow: none;
  overflow: hidden;
  color: #0a0a0a;
}

.list-group > :last-child {
  margin-bottom: 0;
}

.list-group-item {
  padding: 1rem;
  border-bottom: 1px solid #e6e6e6;
}

.list-group-item > :last-child {
  margin-bottom: 0;
  border-bottom: none;
}

.list-group-item.active {
  color: #fefefe;
  background-color: #1779ba;
  border-color: 1px solid #1779ba;
}

.list-group-item:hover, .list-group-item:focus {
  background-color: #e6e6e6;
}

.list-group-item:hover.active, .list-group-item:focus.active {
  background-color: #1779ba;
}

.list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus, .list-group-item[disabled], .list-group-item[disabled]:hover, .list-group-item[disabled]:focus {
  color: #8a8a8a;
  cursor: not-allowed;
  background-color: #fefefe;
}

List Group

By Harry Manchanda

Breadcrumb Nav with Counter

Dashboard Nav Card

Portfolio Hero Header With Logo

List Group

By Harry Manchanda

Similar Building Blocks

Breadcrumb Nav with Counter

Dashboard Nav Card

Portfolio Hero Header With Logo