[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Fdropdown-menu":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":348,"links":349,"dates":398},"\u002Fexamples\u002Fcomponents\u002Fdropdown-menu","collection","components",true,{"example_count":9,"app_count":10},704,247,{"id":12,"title":13,"description":14},190,"Dropdown menu","See how interfaces reveal a list of actions from a compact trigger. Explore how menu labels, groups, and item states organize the available choices.",{"title":16,"description":17,"og_image":18},"Dropdown menu UI examples - Nicelydone","Dropdown menu UI design examples from SaaS apps. See how interfaces reveal a list of actions from a compact trigger. Explore how menu labels, groups, and…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F757dfeae-fc0d-4610-aa98-e956f1cf3215.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Dropdown menu UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Dropdown menu UI design examples from SaaS apps. See how interfaces reveal a list of actions from a compact trigger. Explore how menu labels, groups, and item states organize the available choices.",[32],{"title":33,"description":14,"links":34},"About Dropdown menu",[],[36],"704 UI components",[38,68,97,130,157,181,208,232,258,276,298,328],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"448e6a13-2346-4162-9694-8d1410cc65bd","Alloy UI component","Context menu displaying options for a web page within a browser-like interface.","\u002Fexamples\u002Fapps\u002Falloy\u002Fcomponents",882,736,"UI component from Alloy","component",[48],{"id":12,"title":13,"slug":49},"dropdown-menu",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"alloy","Alloy","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F13110ce9-b228-4dcd-99db-7c3272fae2ce.png","AI prototyping tool for product managers",[56,60,64],{"id":57,"title":58,"slug":59},48,"Developer Tools","developer-tools",{"id":61,"title":62,"slug":63},80,"Artificial Intelligence","artificial-intelligence",{"id":65,"title":66,"slug":67},86,"Product management","product-management",{"uuid":69,"title":70,"description":71,"canonical_path":72,"image":73,"width":74,"height":75,"image_alt":76,"kind":46,"categories":77,"app":79},"652b085b-e345-4011-83c7-2f3737bee478","Flask UI component","A popover menu displaying asset versions and options within a digital asset management interface.","\u002Fexamples\u002Fapps\u002Fflask\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F95cb3df7-e202-40f2-9077-5a1df1cb25d7.png",946,421,"UI component from Flask",[78],{"id":12,"title":13,"slug":49},{"slug":80,"title":81,"logo":82,"baseline":83,"categories":84},"flask","Flask","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ffb0bfd95-becd-46ec-9917-a82dd6bbe601.png","Give detailed video feedback in minutes without typing comments",[85,89,93],{"id":86,"title":87,"slug":88},100,"Video","video",{"id":90,"title":91,"slug":92},23,"Collaboration","collaboration",{"id":94,"title":95,"slug":96},35,"Feedback","feedback",{"uuid":98,"title":99,"description":100,"canonical_path":101,"image":102,"width":103,"height":104,"image_alt":105,"kind":46,"categories":106,"app":108},"158da29d-ac2e-431b-a3a9-97537b99b475","Airbnb UI component","A dropdown menu displaying user account options and navigation links, including hosting information and a call to action.","\u002Fexamples\u002Fapps\u002Fairbnb\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4eeefec3-3f28-4785-ad3d-b4b27f1e6de4.png",737,1462,"UI component from Airbnb",[107],{"id":12,"title":13,"slug":49},{"slug":109,"title":110,"logo":111,"baseline":112,"categories":113},"airbnb","Airbnb","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fairbnb-2b8cc5d2.png","Book unique homes and experience a city like a local",[114,118,122,126],{"id":115,"title":116,"slug":117},5,"Travel","travel",{"id":119,"title":120,"slug":121},12,"Hospitality","hospitality",{"id":123,"title":124,"slug":125},17,"Peer to peer","peer-to-peer",{"id":127,"title":128,"slug":129},18,"Marketplace","marketplace",{"uuid":131,"title":132,"description":133,"canonical_path":134,"image":135,"width":136,"height":137,"image_alt":138,"kind":46,"categories":139,"app":141},"a8196e3a-a896-4c4b-9467-fa6209bda761","Inference UI component","A user profile dropdown menu displaying account information and navigation options like settings, theme, documentation, chat support, and log out.","\u002Fexamples\u002Fapps\u002Finference\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc4da316a-ff26-43b8-8b56-032d22e93392.png",583,638,"UI component from Inference",[140],{"id":12,"title":13,"slug":49},{"slug":142,"title":143,"logo":144,"baseline":145,"categories":146},"inference","Inference","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F65e2bbca-c37f-44d3-a945-dbb7846ba077.png","Build and monitor self-improving agents.",[147,148,152,156],{"id":57,"title":58,"slug":59},{"id":149,"title":150,"slug":151},16,"Monitoring","monitoring",{"id":153,"title":154,"slug":155},37,"Developer APIs","developer-apis",{"id":61,"title":62,"slug":63},{"uuid":158,"title":159,"description":160,"canonical_path":161,"image":162,"width":163,"height":164,"image_alt":165,"kind":46,"categories":166,"app":168},"30a45a0c-0bd1-4289-91ba-c1462d85dc0c","Steel UI component","Dropdown menu for team or organization selection and management within a dark mode application interface.","\u002Fexamples\u002Fapps\u002Fsteel\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fe5a49982-5e12-4b54-911a-cb101eef8664.png",818,458,"UI component from Steel",[167],{"id":12,"title":13,"slug":49},{"slug":169,"title":170,"logo":171,"baseline":172,"categories":173},"steel","Steel","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F03f0fa43-a227-4dce-b66a-f340f4551973.png","Browser infrastructure for AI agents",[174,175,176,177],{"id":57,"title":58,"slug":59},{"id":61,"title":62,"slug":63},{"id":153,"title":154,"slug":155},{"id":178,"title":179,"slug":180},45,"Open Source","open-source",{"uuid":182,"title":183,"description":184,"canonical_path":185,"image":186,"width":187,"height":188,"image_alt":189,"kind":46,"categories":190,"app":192},"9b98919f-873a-46c7-a312-c9a3a952c22a","Zaro UI component","A modal or popover displaying user account details, workspace options, and application settings.","\u002Fexamples\u002Fapps\u002Fzaro\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Feee0c722-8033-4757-8389-9ccc5a064ac6.png",747,766,"UI component from Zaro",[191],{"id":12,"title":13,"slug":49},{"slug":193,"title":194,"logo":195,"baseline":196,"categories":197},"zaro","Zaro","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdcfeb606-2235-48bf-83e3-948e2ac20719.png","AI workspace with agents and apps for business automation",[198,199,200,204],{"id":90,"title":91,"slug":92},{"id":61,"title":62,"slug":63},{"id":201,"title":202,"slug":203},22,"Knowledge Management","knowledge-management",{"id":205,"title":206,"slug":207},46,"Analytics","analytics",{"uuid":209,"title":210,"description":211,"canonical_path":212,"image":213,"width":214,"height":215,"image_alt":216,"kind":46,"categories":217,"app":219},"2bdda4ab-7ccb-491f-bf55-be1a9b102b3f","Axiom UI component","A dropdown menu displaying various options categorized into charts, data, and other, with an item in a hover state.","\u002Fexamples\u002Fapps\u002Faxiom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F36f1da14-8562-4922-84f9-5c1108b9f9c9.png",472,1190,"UI component from Axiom",[218],{"id":12,"title":13,"slug":49},{"slug":220,"title":221,"logo":222,"baseline":223,"categories":224},"axiom","Axiom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F22cc0be3-ce3f-442a-903f-4da9befc54cd.png","The modern machine data platform.",[225,226,230,231],{"id":205,"title":206,"slug":207},{"id":227,"title":228,"slug":229},57,"Big data","big-data",{"id":149,"title":150,"slug":151},{"id":57,"title":58,"slug":59},{"uuid":233,"title":234,"description":235,"canonical_path":236,"image":237,"width":238,"height":239,"image_alt":240,"kind":46,"categories":241,"app":243},"710ea380-e43c-4949-a9d6-32c515f54079","Lithic UI component","A dropdown menu displaying filter options for 'Applied To: All', with 'All' currently selected.","\u002Fexamples\u002Fapps\u002Flithic\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F02b5bc65-ced3-459f-a7ba-b715ae2558ea.png",407,536,"UI component from Lithic",[242],{"id":12,"title":13,"slug":49},{"slug":244,"title":245,"logo":246,"baseline":247,"categories":248},"lithic","Lithic","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F29eef334-64df-456e-bb65-9d93c535b644.png","Programmable card issuing and money movement platform",[249,253,257],{"id":250,"title":251,"slug":252},36,"Finance","finance",{"id":254,"title":255,"slug":256},39,"Payments","payments",{"id":153,"title":154,"slug":155},{"uuid":259,"title":260,"description":261,"canonical_path":262,"image":263,"width":264,"height":265,"image_alt":266,"kind":46,"categories":267,"app":269},"b0703cbc-8514-46b4-b901-d0d065cd464b","Visitors UI component","A user profile popover displaying account information, subscription status, and navigation links.","\u002Fexamples\u002Fapps\u002Fvisitors\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1f9c1cb6-9518-4690-96da-6e4c5339bc78.png",683,895,"UI component from Visitors",[268],{"id":12,"title":13,"slug":49},{"slug":270,"title":271,"logo":272,"baseline":273,"categories":274},"visitors","Visitors","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fba53672a-9799-4a87-8187-a0b0c0766b64.png","Revenue-first web analytics",[275],{"id":205,"title":206,"slug":207},{"uuid":277,"title":278,"description":279,"canonical_path":280,"image":281,"width":282,"height":283,"image_alt":284,"kind":46,"categories":285,"app":287},"8f0c302c-f0c1-45d9-b8b7-900d4205aac1","Dock UI component","A modal or panel for adding content blocks and widgets, featuring a search bar, quick start options, and categorized lists of basic blocks and widgets.","\u002Fexamples\u002Fapps\u002Fdock\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F194fac8a-8f46-429b-be44-8ab2886ff41f.png",1556,1449,"UI component from Dock",[286],{"id":12,"title":13,"slug":49},{"slug":288,"title":289,"logo":290,"baseline":291,"categories":292},"dock","Dock","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdock-k4tgvy1y.png","The new way to manage external relationships",[293,294],{"id":90,"title":91,"slug":92},{"id":295,"title":296,"slug":297},29,"Task Management","task-management",{"uuid":299,"title":300,"description":301,"canonical_path":302,"image":303,"width":304,"height":305,"image_alt":306,"kind":46,"categories":307,"app":309},"910a97d9-9f69-4742-a82b-75eb2ba57898","Bloom UI component","A dropdown menu displaying user account information, project navigation, monthly credit usage, and various settings and help options.","\u002Fexamples\u002Fapps\u002Fbloom\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fb82fc8a8-6924-4409-a355-9237cb8762fe.png",512,758,"UI component from Bloom",[308],{"id":12,"title":13,"slug":49},{"slug":310,"title":311,"logo":312,"baseline":313,"categories":314},"bloom","Bloom","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F62461f0d-4182-4996-ae7b-cbc623f6ee3f.png","A new way to build commerce",[315,316,320,324],{"id":61,"title":62,"slug":63},{"id":317,"title":318,"slug":319},3,"Shopping","shopping",{"id":321,"title":322,"slug":323},7,"Web Development","web-development",{"id":325,"title":326,"slug":327},96,"No code","no-code",{"uuid":329,"title":330,"description":331,"canonical_path":332,"image":333,"width":334,"height":335,"image_alt":336,"kind":46,"categories":337,"app":339},"8f4092c1-1264-4e55-9f90-e713e6c45c6c","Appwrite UI component","A dropdown menu displaying update and delete options for an item.","\u002Fexamples\u002Fapps\u002Fappwrite\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Ff0f3bbf6-2571-482b-b55d-663fec56dcb0.png",590,384,"UI component from Appwrite",[338],{"id":12,"title":13,"slug":49},{"slug":340,"title":341,"logo":342,"baseline":343,"categories":344},"appwrite","Appwrite","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Faba3119b-0179-4fbd-b6d0-2bb3a0bfda07.png","Open-source backend platform for building and scaling apps with Auth, Database, Storage, Functions, Realtime, Messaging, and Sites.",[345,346,347],{"id":57,"title":58,"slug":59},{"id":153,"title":154,"slug":155},{"id":178,"title":179,"slug":180},[],[350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395],{"label":351,"to":352},"Filter & Sort","\u002Fexamples\u002Fscreens\u002Ffilter-and-sort",{"label":354,"to":355},"Add & Create","\u002Fexamples\u002Fscreens\u002Fadd-and-create",{"label":357,"to":358},"AI Chat","\u002Fexamples\u002Fscreens\u002Fai-chat",{"label":360,"to":361},"Dashboard","\u002Fexamples\u002Fscreens\u002Fdashboard",{"label":363,"to":364},"Alloy design examples","\u002Fexamples\u002Fapps\u002Falloy",{"label":366,"to":367},"Flask design examples","\u002Fexamples\u002Fapps\u002Fflask",{"label":369,"to":370},"Airbnb design examples","\u002Fexamples\u002Fapps\u002Fairbnb",{"label":372,"to":373},"Inference design examples","\u002Fexamples\u002Fapps\u002Finference",{"label":375,"to":376},"Steel design examples","\u002Fexamples\u002Fapps\u002Fsteel",{"label":378,"to":379},"Zaro design examples","\u002Fexamples\u002Fapps\u002Fzaro",{"label":381,"to":382},"Axiom design examples","\u002Fexamples\u002Fapps\u002Faxiom",{"label":384,"to":385},"Lithic design examples","\u002Fexamples\u002Fapps\u002Flithic",{"label":387,"to":388},"Visitors design examples","\u002Fexamples\u002Fapps\u002Fvisitors",{"label":390,"to":391},"Dock design examples","\u002Fexamples\u002Fapps\u002Fdock",{"label":393,"to":394},"Bloom design examples","\u002Fexamples\u002Fapps\u002Fbloom",{"label":396,"to":397},"Appwrite design examples","\u002Fexamples\u002Fapps\u002Fappwrite",{"published_at":399,"updated_at":400},"2022-08-21T20:07:35.000Z","2026-09-17T10:44:16.000Z"]