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 ReferenceDetails
.dropupTrigger dropdown menus above elements by adding .dropup to the parent element.
.dropright, .dropleftTrigger dropdown menus at the right/left of the elements by adding .dropright|.dropleft to the parent element.
.dropdown-menu-endAdd .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.

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>  
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>  
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 ReferenceDetails
.activeUse active class with a tag for active style
.no-bdrUse no-bdr class with ul tag for borderless list style
.dividerUse 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.

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>  
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>  
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>  
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 ReferenceDetails
.no-bdrUse no-bdr class with ul.link-list-plain tag for borderless list style.
Note: This class will not work for .li-{col} styling.
.dividerUse divider class with blank li tag to get a divider.
.smUse 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
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 ReferenceDetails
.no-bdrUse no-bdr class with ul.link-tidy tag for borderless list style.
.smUse 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 ReferenceDetails
.activeUse active class with li tag for active style.
.dividerUse 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 ReferenceDetails
.activeUse active class with li tag for active style
.dividerUse divider class with blank li tag to get a divider.
Alernately you can use two ul set with .link-check class
Switch Demo Layout
Use Case Concept
Preview Settings
Direction Change
LTR Mode
RTL Mode
Main UI Style
Default
Bordered
Sidebar Style
White
Dark
Theme
Primary Skin
Default
Blue Light
Egyptian
Purple
Green
Red
Skin Mode
Light Skin
Dark Skin
Looking for functional script for Investment Platform? Check out
Investorm
Looking for Advanced
Investment Platform?