> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.stylishcostcalculator.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Element: Dropdown Menu # ${color}[#314AF3](Introduction) You can insert many options into a single drop with the **Dropdown element**. The dropdown menu is great to use when forcing a user to select only **one option** in any given **category**. ![](https://storage.crisp.chat/users/helpdesk/website/74268b32d1397800/7597acdc-f176-4bfe-a861-e1bf6a_s754tr.png) --- # ${color}[#314AF3](Benefits, Features & Use Cases) ### Benefits &Features * **Space-saving:** Condenses multiple options into a compact, expandable menu * **User-friendly:** Familiar interface that most users understand intuitively * **Organized:** Groups related options together for easy navigation * **Streamlined:** Simplifies the user interface by hiding options until needed * **Customizable:** Can be styled to match your website or app's design * **Mobile-friendly:** Works well on smaller screens and touch interfaces ### Use cases: * You may want your customers to select a product from a list within the same category. **For example:** Shirt Type, Room Size, etc.  * Each product in the dropdown may have a different price * Use it to ask a question to your customer. **For example**, What shipping method do you prefer?  ------ # ${color}[#314AF3](Watch It In Action) In this example, you can see how the price changes on each option. ![](https://storage.crisp.chat/users/helpdesk/website/80c5a245f1450800/0e04242f-c984-48da-a855-0a8f83_1owbdak.gif) #### Near Search Bar When more than **7 items** are inside a dropdown, a search bar will appear for your users. ![](https://storage.crisp.chat/users/helpdesk/website/2666db6654947600/20696b81-d653-401d-a2cb-66a1b6_gvlq1q.gif) --- # ${color}[#314AF3](How to Activate & Use This Feature) 1. To get started, click on the **"+ Add Element"** **button** ![](https://storage.crisp.chat/users/helpdesk/website/ac3e2ba3fc333000/326b1705-1d1f-4cc7-8bd8-91de71_1pyctve.png) 2. Then, click on the **"Dropdown"** **button to add it** ![](https://storage.crisp.chat/users/helpdesk/website/41345ca4344b5400/6d71e7cc-a576-4950-9a28-1ea31e_1wscqvc.png) ### Settings & Options 1. First, you can set a "Title" for this element, it's gonna be visible on the front.  ![](https://storage.crisp.chat/users/helpdesk/website/6e34583d69ae1c00/6f5a93e2-7385-4692-95dc-aeef99_zw0mfm.png) 2. Now we have the dropdown items. In the first row, we have a toggle Switch, this will set this item as the default selected item in the dropdown. ![](https://storage.crisp.chat/users/helpdesk/website/b02825adef93c000/c1946d3e-280e-4229-955e-44a515_1i4ebb4.png) 3. Next, we can set a **name** for this item. For example, _"Tank Top"_. ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48316795710/original/fRecyzyCqk1ZipNU7MU1m9SCz4II_084ng.png?1699464704) 4. Now you can set a **unit price** for the item. ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48316795839/original/Hbms_Tb-KDbiUEjWyH4xwIWCHquKJw7BoA.png?1699464761) 5. You may want to add an **image and a description** for this item, this is gonna be visible on the frontend. ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48316796070/original/eLph8xBYUx_t8FCmQFjiVSStepLGFdkirQ.png?1699464860) 6. If your **Stylish Cost Calculator** is connected to **WooCommerce**, you can link this item to a WooCommerce product. You can learn more about it on the next link: [WooCommerce Integration: A Complete Guide ⭐️](/en/article/woocommerce-integration-a-complete-guide-19esndu/) ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48316796850/original/_iZ9s6BZ0jZRWzPKWOQ7uaEIXmOuO8b4qQ.png?1699465240) 7. You can add more items to your dropdown easily by clicking on the **"+Item"** button. ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48316797054/original/zg4sgVudJmEQdQMS1LBRFUAMAq9wNn4ZqQ.png?1699465364) 8. On the **advanced options**, you can set this element to required if you want to force your customers to select an option. ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48316797384/original/KP-4Sguk4VTX6K-UzORrO9fvyvpDuDo0bg.png?1699465499) 9. You can also decide if you want to show or hide this element from the **Detailed List & PDF**. ![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48316797574/original/c1DJbo40cbqNbSjooKo5EdEQB96J6fum_Q.png?1699465574) --- # ${color}[#314AF3](Additional Information) ### Related Features [Element: Slider](/en/article/element-slider-1pim5ug/) [Element: Quantity Input Box](/en/article/element-quantity-input-box-nxgayn/) ### All Elements & Features Learn more about [All Elements](/en/category/elements-hnffz2/) Learn more about [All Features](/en/category/features-22x2mc/) ### Need Support? Ask a [question or request support](https://stylishcostcalculator.com/support/) Request [a feature or give feedback](https://stylishcostcalculator.com/how-can-we-be-better/) [![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48258508157/original/Txm2CafyMfEybziVGXvw-BnfU2V-9TJUBg.png?1666381303)](https://stylishcostcalculator.com/features/) [![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48258508158/original/DWBiVRBRBPATUwVN7APXzDACQgYCwYmXVQ.png?1666381303)](https://stylishcostcalculator.com/templates/)