Do you know the latest update of 2019? A overview of our is now available on YouTube

Components

## List Style for Dropdown

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. Our exclusive link list style for dropdown that give you more power.

##### Dropdown Style

Use `.link-check` class on `ul` to get styles shown in card below.

- Dropdown button
- Dropup Button
- Dropright Button

###### Code Example

      <div class="dropdown">
        <a class="btn btn-primary dropdown-toggle" href="#" type="button" data-toggle="dropdown">Dropdown button</a>
        <div class="dropdown-menu">
          <ul class="link-list-opt">
            <li><a href="#"><span>Profile Settings</span></a></li>
            <li><a href="#"><span>Notification</span></a></li>
            <li><a href="#"></em><span>Another action</span></a></li>
            <li><a href="#"></em><span>Something else here</span></a></li>
          </ul>
        </div>
      </div>

Class Reference | Details
--- | ---
`.dropup` | Trigger dropdown menus above elements by adding `.dropup` to the parent element.
`.dropright`, `.dropleft` | Trigger dropdown menus at the right/left of the elements by adding `.dropright|.dropleft` to the parent element.
`.dropdown-menu-right` | Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu. Note: By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent.
`.dropdown-menu-{size}` | Use `{size}` as `xl, lg, md, sm, xs, xxs` to `.dropdown-menu` for controling the width.

##### Example 1 - Option Style

Use `.link-list-opt` class on `ul` to get styles shown in card below.

###### With Border

- Default
- Selected / Actived
- With Icon
- Preview
  - Click Here

###### Code Example

      <ul class="link-list-opt">
          <li><a href="#"><em class="icon ni ni-setting"></em><span>List Action</span></a></li>
          <li><a href="#"><em class="icon ni ni-notify"></em><span>Another Action</span></a></li>
          <li><a href="#"><em class="icon ni ni-activity-alt"></em><span>More Action</span></a></li>
      </ul>

###### Without Border

- Default
- Selected / Actived
- With Icon
- Preview
  - Click Here

###### Code Example

      <ul class="link-list-opt no-bdr">
          <li><a href="#"><em class="icon ni ni-setting"></em><span>List Action</span></a></li>
          <li><a href="#"><em class="icon ni ni-notify"></em><span>Another Action</span></a></li>
          <li><a href="#"><em class="icon ni ni-activity-alt"></em><span>More Action</span></a></li>
      </ul>

###### With Separator

- Default
- Selected / Actived
- With Icon
- Preview
  - Click Here

###### Code Example

      <ul class="link-list-opt no-bdr">
          <li><a href="#"><em class="icon ni ni-setting"></em><span>Action Settings</span></a></li>
          <li><a href="#"><em class="icon ni ni-notify"></em><span>Push Notification</span></a></li>
          <li class="divider"></li>
          <li><a href="#"><em class="icon ni ni-activity-alt"></em><span>Login Activity</span></a></li>
      </ul>

Class Reference | Details
--- | ---
`.active` | Use `active` class with `a` tag for active style
`.no-bdr` | Use `no-bdr` class with `ul` tag for borderless list style
`.divider` | Use `divider` class with blank `li` tag to get a divider.

##### Example 2 - Plain Style

Use `.link-list-plain` class on `ul` to get styles shown in card below.

###### With Border

- Default
- With Icon
- Compact / Small
- Preview
  - Click Here

###### Code Example

      <ul class="link-list-plain">
          <li><a href="#"><em class="icon ni ni-setting"></em><span>Action Settings</span></a></li>
          <li><a href="#"><em class="icon ni ni-notify"></em><span>Push Notification</span></a></li>
          <li><a href="#"><em class="icon ni ni-activity-alt"></em><span>Login Activity</span></a></li>
      </ul>

###### Without Border

- Default
- With Icon
- Compact / Small
- Preview
  - Click Here

###### Code Example

      <ul class="link-list-plain no-bdr">
          <li><a href="#"><em class="icon ni ni-setting"></em><span>Action Settings</span></a></li>
          <li><a href="#"><em class="icon ni ni-notify"></em><span>Push Notification</span></a></li>
          <li><a href="#"><em class="icon ni ni-activity-alt"></em><span>Login Activity</span></a></li>
      </ul>

###### With Separator

- Default
- With Icon
- Mix Uses
- Preview
  - Click Here

###### Code Example

      <ul class="link-list-plain no-bdr">
          <li><a href="#"><em class="icon ni ni-setting"></em><span>Profile Settings</span></a></li>
          <li><a href="#"><em class="icon ni ni-notify"></em><span>Notification</span></a></li>
          <li class="divider"></li>
          <li><a href="#"><em class="icon ni ni-activity-alt"></em><span>Log out</span></a></li>
      </ul>

###### Multiple Column

- 3 Column
- 4 Column
- Preview
  - Click Here

###### Code Example

      <ul class="link-list-plain li-col3x text-center">
          <li><a href="#">Jan</a></li>
          <li><a href="#">Feb</a></li>
          <li><a href="#">Mar</a></li>
          <li><a href="#">Apr</a></li>
          <li><a href="#">May</a></li>
          <li><a href="#">Jun</a></li>
      </ul>

Class Reference | Details
--- | ---
`.no-bdr` | Use `no-bdr` class with `ul.link-list-plain` tag for borderless list style. Note: This class will not work for `.li-{col}` styling.
`.divider` | Use `divider` class with blank `li` tag to get a divider.
`.sm` | Use `sm` class with `ul.link-list-plain` for compact style.
`.li-{col}` | Use `{col}` as `col2x, col3x, col4x` with `ul.link-list-plain` list for column based list.

##### Example 3 - Tidy Style

Use `.link-tidy` class on `ul` to get styles shown in card below.

- Default
- Without Border
- Compact / Small
- Preview
  - Click Here

###### Code Example

      <ul class="link-tidy">
          <li>
              <div class="custom-control custom-control-sm custom-checkbox">
                  <input type="checkbox" class="custom-control-input" checked="" id="cdp1-bl">
                  <label class="custom-control-label" for="cdp1-bl">Balance</label>
              </div>
          </li>
      </ul>

Class Reference | Details
--- | ---
`.no-bdr` | Use `no-bdr` class with `ul.link-tidy` tag for borderless list style.
`.sm` | Use `sm` class with `ul.link-tidy` for compact style.

##### Example 4 - Menu Style

Use `.link-list-menu` class on `ul` to get styles shown in card below.

- Default
- Active Link
- With Divider
- Preview
  - Click Here

###### Code Example

      <ul class="link-list-menu">
          <li class="active"><a href="#"><span>Account Settings</span></a></li>
          <li><a href="#"><span>My Account</span></a></li>
          <li><a href="#"><span>Sign out</span></a></li>
      </ul>

Class Reference | Details
--- | ---
`.active` | Use `active` class with `li` tag for active style.
`.divider` | Use `divider` class with blank `li` tag to get a divider.

##### Example 5 - with Heading

Use `.link-check` class on `ul` to get styles shown in card below.

- Default
- Selected
- With Icon
- Preview
  - Click Here

###### Code Example

      <ul class="link-check">
          <li><span>Show</span></li>
          <li class="active"><a href="#">10 Items</a></li>
          <li><a href="#">20 Items</a></li>
          <li><a href="#">50 Items</a></li>
      </ul>
      <ul class="link-check">
          <li><span>Order By</span></li>
          <li class="active"><a href="#">DESC</a></li>
          <li><a href="#">ASC</a></li>
      </ul>

Class Reference | Details
--- | ---
`.active` | Use `active` class with `li` tag for active style
`.divider` | Use `divider` class with blank `li` tag to get a divider. Alernately you can use two `ul` set with `.link-check` class