dropdowns.mdx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. ---
  2. title: Dropdowns
  3. description: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
  4. bootstrapLink: components/dropdowns
  5. ---
  6. ## Default dropdown
  7. With small markup changes, you can turn any `.btn` into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.
  8. ```html example code height="16rem"
  9. <div class="dropdown">
  10. <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  11. <div class="dropdown-menu">
  12. <a class="dropdown-item" href="#">Action</a>
  13. <a class="dropdown-item" href="#">Another action</a>
  14. <a class="dropdown-item" href="#">Third action</a>
  15. </div>
  16. </div>
  17. ```
  18. ## Dropdown divider
  19. Use dropdown dividers to separate groups of dropdown items for greater clarity.
  20. ```html example code height="16rem"
  21. <div class="dropdown">
  22. <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  23. <div class="dropdown-menu">
  24. <a class="dropdown-item" href="#">
  25. Action
  26. </a>
  27. <a class="dropdown-item" href="#">
  28. Another action
  29. </a>
  30. <div class="dropdown-divider"></div>
  31. <a class="dropdown-item" href="#">Separated link</a>
  32. </div>
  33. </div>
  34. ```
  35. ## Active state
  36. Make a dropdown item look active, so that it highlights when a user hovers over a given option.
  37. ```html example code height="16rem"
  38. <div class="dropdown">
  39. <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  40. <div class="dropdown-menu">
  41. <a class="dropdown-item" href="#">
  42. Action
  43. </a>
  44. <a class="dropdown-item" href="#">
  45. Another action
  46. </a>
  47. <a class="dropdown-item active" href="#">Active action</a>
  48. </div>
  49. </div>
  50. ```
  51. ## Disabled state
  52. Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.
  53. ```html code example height="16rem"
  54. <div class="dropdown">
  55. <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  56. <div class="dropdown-menu">
  57. <a class="dropdown-item" href="#">
  58. Action
  59. </a>
  60. <a class="dropdown-item" href="#">
  61. Another action
  62. </a>
  63. <a class="dropdown-item disabled" href="#">Disabled action</a>
  64. </div>
  65. </div>
  66. ```
  67. ## Dropdown header
  68. Add a dropdown header to group dropdown items into sections and name them accordingly.
  69. ```html code example height="16rem"
  70. <div class="dropdown">
  71. <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  72. <div class="dropdown-menu">
  73. <span class="dropdown-header">Dropdown header</span>
  74. <a class="dropdown-item" href="#">
  75. Action
  76. </a>
  77. <a class="dropdown-item" href="#">
  78. Another action
  79. </a>
  80. </div>
  81. </div>
  82. ```
  83. ## Dropdown with icons
  84. Use icons in your dropdowns to add more visual content and make the options easy to identify for users.
  85. ```html code example height="16rem"
  86. <div class="dropdown">
  87. <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  88. <div class="dropdown-menu">
  89. <span class="dropdown-header">Dropdown header</span>
  90. <a class="dropdown-item" href="#">
  91. <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon icon-tabler icon-tabler-settings" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  92. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  93. <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path>
  94. <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
  95. </svg>
  96. Action
  97. </a>
  98. <a class="dropdown-item" href="#">
  99. <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon icon-tabler icon-tabler-pencil" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  100. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  101. <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
  102. <path d="M13.5 6.5l4 4"></path>
  103. </svg>
  104. Another action
  105. </a>
  106. </div>
  107. </div>
  108. ```
  109. ## Dropdown with arrow
  110. Add an arrow that points at the dropdown button.
  111. ```html code example height="16rem"
  112. <div class="dropdown">
  113. <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  114. <div class="dropdown-menu dropdown-menu-arrow">
  115. <a class="dropdown-item" href="#">
  116. Action
  117. </a>
  118. <a class="dropdown-item" href="#">
  119. Another action
  120. </a>
  121. </div>
  122. </div>
  123. ```
  124. ## Dropdown with badge
  125. Add a badge to your dropdown items to show additional information related to an item or distinguish it from other elements.
  126. ```html code example height="16rem"
  127. <div class="dropdown">
  128. <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  129. <div class="dropdown-menu">
  130. <a class="dropdown-item" href="#">
  131. Action
  132. <span class="badge bg-primary ms-auto">12</span>
  133. </a>
  134. <a class="dropdown-item" href="#">
  135. Another action
  136. <span class="badge bg-green ms-auto"></span>
  137. </a>
  138. </div>
  139. </div>
  140. ```
  141. ## Dropdown with checkboxes
  142. Use dropdowns with checkboxes to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.
  143. ```html code example height="16rem"
  144. <div class="dropdown">
  145. <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  146. <div class="dropdown-menu">
  147. <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 1</label>
  148. <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 2</label>
  149. <label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 3</label>
  150. </div>
  151. </div>
  152. ```
  153. ## Dark dropdown
  154. Make your dropdown suit the dark mode of your website or software.
  155. ```html code example height="16rem"
  156. <div class="dropdown">
  157. <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  158. <div class="dropdown-menu dropdown-menu-arrow bg-dark text-white">
  159. <span class="dropdown-header">Dropdown header</span>
  160. <a class="dropdown-item" href="#">
  161. <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  162. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  163. <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
  164. <circle cx="12" cy="12" r="3" />
  165. </svg>
  166. Action
  167. </a>
  168. <a class="dropdown-item" href="#">
  169. <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  170. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  171. <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
  172. <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
  173. <path d="M16 5l3 3" />
  174. </svg>
  175. Another action
  176. </a>
  177. </div>
  178. </div>
  179. ```
  180. ## Dropdown with card content
  181. Use a dropdown with card content to make it easy for users to get more information on a given subject and avoid ovewhelming them with too much content at once.
  182. ```html example height="35rem"
  183. <div class="dropdown">
  184. <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
  185. <div class="dropdown-menu dropdown-menu-card" style="max-width: 16rem;">
  186. <div class="card d-flex flex-column">
  187. <a href="#">
  188. <img class="card-img-top" src="/samples/photos/friends-at-a-restaurant-drinking-wine.jpg" alt="How do you know she is a witch?" />
  189. </a>
  190. <div class="card-body d-flex flex-column">
  191. <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
  192. <div class="text-secondary">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
  193. <div class="d-flex align-items-center pt-4 mt-auto">
  194. <span class="avatar" style="background-image: url(/samples/avatars/013m.jpg)"></span>
  195. <div class="ms-3">
  196. <a href="#" class="text-body">Maryjo Lebarree</a>
  197. <div class="text-secondary">3 days ago</div>
  198. </div>
  199. <div class="ms-auto">
  200. <a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary">
  201. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  202. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  203. <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
  204. </svg>
  205. </a>
  206. </div>
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. ```