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
- Default
- Selected / Actived
- With Icon
- Preview
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
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
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
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
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
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
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
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
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
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 |
