{"id":15463,"date":"2017-04-10T08:00:30","date_gmt":"2017-04-10T15:00:30","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=15463"},"modified":"2026-05-08T02:19:21","modified_gmt":"2026-05-08T09:19:21","slug":"recipe-custom-drop-list","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/","title":{"rendered":"Hide the Right Functions With Custom Drop-down Lists"},"content":{"rendered":"

Let’s face it: users don’t need every<\/em> function in your app at all times. Hiding the right tools at the right time keeps visual distractions at a minimum, helping users focus on the task at hand.<\/p>\n

A good design system not only includes reusable widgets, but instructions on their use cases. For example, a system may present a drop-down list’s appearance, and even offer an example of its interactions. But which items should get tucked out of view? When designing a component \u2014 especially interactive ones \u2014 best practice is to, well, describe best practice. <\/p>\n

Build your own drop-down list<\/h2>\n

Here’s a handy trick to building custom drop-down lists: group ’em twice.<\/p>\n

Most apps treat each element as its own layer \u2014 including groups<\/a> \u2014 which you can show or hide in the left-hand layers menu. Whether you’re designing in a traditional tool or using a no-code app builder like Adalo<\/a>, understanding layer organization is fundamental to creating polished, interactive components.<\/p>\n

\"Hiding<\/p>\n

Typically we make the “trigger” element \u2014 an icon or bit of text that people see first \u2014 show the menu on hover. Multistate elements are a great example of this. But the drop-down menu may disappear as soon as the user’s mouse leaves the trigger icon, making the menu impossible to use.<\/p>\n

Instead, group the drop-down menu \u2014 and then group that<\/em> within another group along with the trigger element (in this case a green, pill-shaped button).<\/p>\n

\"Where<\/p>\n

Next, make the outer group hoverable<\/a>. Then hide the inner group. The outer group will expand as the menu appears, making it reachable as your mouse covers its options \u2014 and it’ll disappear as soon as your mouse leaves.<\/p>\n

Once you’ve got it built, add the component to your custom library to share with your team as part of a design system.<\/p>\n

How it works<\/h2>\n

“Hoverable” means that as the mouse enters the trigger element, an effect will take place. When it leaves the trigger element, then the element reverts to its default state. For example, a button may darken on mouse in, then return to its original light color when the mouse exits it.<\/p>\n

Here, the outer group is hoverable. It expands as the drop-down menu appears, also expanding the entire mouse-out-able area. And as you might expect, any links within the drop-down menu (the inner group) remain clickable.<\/p>\n

\n

Join the world’s best designers who use UXPin.<\/h2>\n

Sign up for a free trial.<\/span>Try it for free!<\/a><\/section>\n","protected":false},"excerpt":{"rendered":"

Drop-down lists that appear on hover are a great way to hide options until they\u2019re needed. A handy technique to make them work in UXPin: group \u2019em twice.<\/p>\n","protected":false},"author":27,"featured_media":15464,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,11,6,19],"tags":[],"class_list":["post-15463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-tutorials","category-ux-design","category-uxpin"],"yoast_title":"","yoast_metadesc":"Drop-down lists that appear on hover are a great way to hide options until they\u2019re needed. A handy technique to make them work in UXPin: group \u2019em twice.","acf":[],"yoast_head":"\nHide the Right Functions With Custom Drop-down Lists | UXPin<\/title>\n<meta name=\"description\" content=\"Drop-down lists that appear on hover are a great way to hide options until they\u2019re needed. A handy technique to make them work in UXPin: group \u2019em twice.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hide the Right Functions With Custom Drop-down Lists\" \/>\n<meta property=\"og:description\" content=\"Drop-down lists that appear on hover are a great way to hide options until they\u2019re needed. A handy technique to make them work in UXPin: group \u2019em twice.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-10T15:00:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-08T09:19:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Drop-down-teaser.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Gremillion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@benthinkin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Gremillion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/recipe-custom-drop-list\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/recipe-custom-drop-list\\\/\"},\"author\":{\"name\":\"Ben Gremillion\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"headline\":\"Hide the Right Functions With Custom Drop-down Lists\",\"datePublished\":\"2017-04-10T15:00:30+00:00\",\"dateModified\":\"2026-05-08T09:19:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/recipe-custom-drop-list\\\/\"},\"wordCount\":417,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/recipe-custom-drop-list\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Drop-down-teaser.png\",\"articleSection\":[\"Blog\",\"Design Systems\",\"Tutorials\",\"UX Design\",\"UXPin\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/recipe-custom-drop-list\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/recipe-custom-drop-list\\\/\",\"name\":\"Hide the Right Functions With Custom Drop-down Lists | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/recipe-custom-drop-list\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/recipe-custom-drop-list\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Drop-down-teaser.png\",\"datePublished\":\"2017-04-10T15:00:30+00:00\",\"dateModified\":\"2026-05-08T09:19:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\"},\"description\":\"Drop-down lists that appear on hover are a great way to hide options until they\u2019re needed. A handy technique to make them work in UXPin: group \u2019em twice.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/recipe-custom-drop-list\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/recipe-custom-drop-list\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/recipe-custom-drop-list\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Drop-down-teaser.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/Drop-down-teaser.png\",\"width\":720,\"height\":200,\"caption\":\"Drop down teaser\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/recipe-custom-drop-list\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hide the Right Functions With Custom Drop-down Lists\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/6dd4adede4f1009af0b52cc6531d1d0f\",\"name\":\"Ben Gremillion\",\"description\":\"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.\",\"sameAs\":[\"https:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/benthinkin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/bengremillion\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hide the Right Functions With Custom Drop-down Lists | UXPin","description":"Drop-down lists that appear on hover are a great way to hide options until they\u2019re needed. A handy technique to make them work in UXPin: group \u2019em twice.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/","og_locale":"en_US","og_type":"article","og_title":"Hide the Right Functions With Custom Drop-down Lists","og_description":"Drop-down lists that appear on hover are a great way to hide options until they\u2019re needed. A handy technique to make them work in UXPin: group \u2019em twice.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/","og_site_name":"Studio by UXPin","article_published_time":"2017-04-10T15:00:30+00:00","article_modified_time":"2026-05-08T09:19:21+00:00","og_image":[{"width":720,"height":200,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Drop-down-teaser.png","type":"image\/png"}],"author":"Ben Gremillion","twitter_card":"summary_large_image","twitter_creator":"@benthinkin","twitter_misc":{"Written by":"Ben Gremillion","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/"},"author":{"name":"Ben Gremillion","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"headline":"Hide the Right Functions With Custom Drop-down Lists","datePublished":"2017-04-10T15:00:30+00:00","dateModified":"2026-05-08T09:19:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/"},"wordCount":417,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Drop-down-teaser.png","articleSection":["Blog","Design Systems","Tutorials","UX Design","UXPin"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/","name":"Hide the Right Functions With Custom Drop-down Lists | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Drop-down-teaser.png","datePublished":"2017-04-10T15:00:30+00:00","dateModified":"2026-05-08T09:19:21+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f"},"description":"Drop-down lists that appear on hover are a great way to hide options until they\u2019re needed. A handy technique to make them work in UXPin: group \u2019em twice.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Drop-down-teaser.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/Drop-down-teaser.png","width":720,"height":200,"caption":"Drop down teaser"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Hide the Right Functions With Custom Drop-down Lists"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/6dd4adede4f1009af0b52cc6531d1d0f","name":"Ben Gremillion","description":"Ben Gremillion is a Content Strategist at UXPin. He\u2019s worked as both a web designer and a back-end developer. On the side he builds and maintains a CMS for webcomic artists, and participates in annual NaNoWriMo challenges.","sameAs":["https:\/\/www.uxpin.com","https:\/\/x.com\/benthinkin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/bengremillion\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=15463"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15463\/revisions"}],"predecessor-version":[{"id":59150,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15463\/revisions\/59150"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/15464"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=15463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=15463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=15463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}