{"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":"2020-10-13T00:22:42","modified_gmt":"2020-10-13T07:22:42","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\u2019s face it: users don\u2019t 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\u2019s appearance, and even offer an example of its interactions. But which items should get tucked out of view? When designing a component \u2014\u00a0especially interactive ones \u2014\u00a0best practice is to, well, describe best practice. <\/p>\n

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

Here\u2019s a handy trick to building custom drop-down lists: group \u2019em 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.<\/p>\n

\"Hiding<\/p>\n

Typically we make the \u201ctrigger\u201d 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\u2019s 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\u2019ll disappear as soon as your mouse leaves.<\/p>\n

Once you\u2019ve 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

\u201cHoverable\u201d 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

Join the world's best designers who use UXPin.<\/h2>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=\"2020-10-13T07:22:42+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\":\"2020-10-13T07:22:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/recipe-custom-drop-list\\\/\"},\"wordCount\":373,\"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\":\"2020-10-13T07:22:42+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":"2020-10-13T07:22:42+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":"2020-10-13T07:22:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/recipe-custom-drop-list\/"},"wordCount":373,"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":"2020-10-13T07:22:42+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":2,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15463\/revisions"}],"predecessor-version":[{"id":22872,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15463\/revisions\/22872"}],"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}]}}