logo logo-dark
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.

Code Example
    <div class="dropdown">
      <a class="btn btn-primary dropdown-toggle" href="#" type="button" data-bs-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-end Add .dropdown-menu-end 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
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
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
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
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
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
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
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.

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.

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
© 2024 DashLite. Template by Softnio