---json
{
    "page_id": "l5zqx172jszwz3bhwln9t"
}
---
====== ComboStrap UI - Dropdown ======

===== About =====
''dropdown'' is a [[docs:component|component]] that shows a ''dropdown menu''.

It must be placed inside a [[docs:menubar:group|group]] element of the [[docs:menubar:menubar|menubar]] that you will find at the top of your page in a [[docs:theme:slot:header_slot|header slot]]

This component accepts as entry a series of link. If the linked page does not exist, it will be rendered in red.
===== Example =====

  * Markup:
<webcode name="dropdown">
<code dw>
<menubar>
    <group>
       <dropdown name="Navbar component">
[[dropdown|dropdown]]
[[group|group]]
[[search|search]]
       </dropdown>
   </group>
</menubar>
</code>
  * Output:
</webcode>

===== How to hide a dropdown conditionally =====

If you want to hide a dropdown if the size of the screen is too low, you can use the [[https://getbootstrap.com/docs/4.1/utilities/display/|Bootstrap conditional display class]]

Example: show the dropdown above the ''lg'' screen width (''992px'')
<code dw>
<dropdown name="Social Module" class="d-none d-lg-flex">
</code>