{"id":9021,"date":"2015-09-24T02:06:19","date_gmt":"2015-09-24T02:06:19","guid":{"rendered":"http:\/\/proxystudio.uxpin.com\/?p=9021"},"modified":"2026-05-08T01:01:30","modified_gmt":"2026-05-08T08:01:30","slug":"what-should-the-perfect-responsive-navigation-look-like","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/","title":{"rendered":"What Should the Perfect Responsive Navigation Look Like?"},"content":{"rendered":"<p>Designing for small screens means you have to set priorities.<\/p>\n<p>As described in the free e-book <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ux-design-trends-responsive-adaptive-web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Responsive &amp; Adaptive Web Design<\/a>, visual hierarchies take center stage when you&#8217;re designing for mobile devices. Not only that, but the elements you use need to provide a consistent and intuitive experience across multiple viewports.<\/p>\n<p>Responsive design is still progressing, the techniques aren&#8217;t fully fleshed out and there&#8217;s no consensus as to what might constitute the &#8220;perfect pattern.&#8221;<\/p>\n<p>Even so, there are some candidates slouching their way towards perfection. Let&#8217;s take a look at the pros and cons of the most popular responsive navigation patterns. We&#8217;ll then wrap up with thoughts on what might constitute a better mobile navigation pattern.<\/p>\n<h2>1. The Shrinking Sticky Bar<\/h2>\n<p>Likely the most common approach to responsive navigation, the navigation menu stays fixed to the top of the screen, centers and shrinks in response to the size of the viewport used.<\/p>\n<h3>Desktop Viewport<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9022\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image008.png\" alt=\"Screenshot of Palantir's website design\" width=\"720\" height=\"524\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image008.png 800w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image008-412x300.png 412w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><em>Photo credit: <a href=\"https:\/\/www.palantir.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.palantir.net\/<\/a><\/em><\/p>\n<h3>Mobile Viewport<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9024\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0210.png\" alt=\"Screenshot of Palantir's mobile navigation\" width=\"399\" height=\"496\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0210.png 399w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0210-241x300.png 241w\" sizes=\"auto, (max-width: 399px) 100vw, 399px\" \/><\/p>\n<p><em>Photo credit: <a href=\"https:\/\/www.palantir.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.palantir.net\/<\/a><\/em><\/p>\n<ul>\n<li>Common mostly because of the relative ease involved, this navigation pattern is often referred to as the &#8220;Do Nothing&#8221; approach.<\/li>\n<li>This is a decent start, but it requires you to sacrifice significant screen real estate above the fold for mobile devices.<\/li>\n<li>Your navigation options are prominently featured, but this shouldn&#8217;t come at the cost of content.<\/li>\n<\/ul>\n<p>While it is simple, fast, and easy, the fixed top navigation menu has some additional problems. For example, it becomes difficult to add new navigable sections to your site and it can also cause problems with proximity clicks on touch screens. Additionally, the approach won&#8217;t consistently render attractively across different platforms.<\/p>\n<p>So what do we do to avoid these issues?<\/p>\n<h2>2. Anchor to the Footer<\/h2>\n<p>In order to alleviate the stresses of added scrolling and yet keep the footer navigation option alive, you can add a fixed anchor button to the footer somewhere on page. This is another simple solution that makes sense to any and all who decide to use it.<\/p>\n<h3>Mobile Viewport<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9025\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image039.png\" alt=\"Screenshot of Palantir's mobile navigation\" width=\"424\" height=\"531\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image039.png 424w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image039-240x300.png 240w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9023\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0110.png\" alt=\"Screenshot of Palantir's mobile navigation\" width=\"425\" height=\"517\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0110.png 425w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image0110-247x300.png 247w\" sizes=\"auto, (max-width: 425px) 100vw, 425px\" \/><\/p>\n<p>The example above, from <a href=\"http:\/\/contentsmagazine.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Contentsmagazine.com<\/a>, points out the footer anchor (red arrow). In this case, it&#8217;s a CTA labeled &#8220;Explore.&#8221; One click sends you straight to your navigation options. The only problem is it&#8217;s not exactly <i>smooth<\/i>. Being launched from one end of a webpage to the other with a single click can disorient and disturb a user\u2014degrading the UX as a whole.<\/p>\n<p>One way to improve fluidity are are multiple anchors which transition down the page at fixed intervals. These are usually featured on the right side of the page, and they scroll at a reasonable speed up or down the page. In the linked example, you can actually navigate from either the side anchors or the fixed menu up top, so it&#8217;s a bit redundant but still effective.<\/p>\n<h2>3. Navigation Menus (author&#8217;s top pick)<\/h2>\n<p>A big sticky nav bar works well on a big screen but as the display shrinks, so too does a user&#8217;s patience with larger text that gets in the way of their browsing:<\/p>\n<ul>\n<li>Footer navigation requires scrolling.<\/li>\n<li>An anchor to said footer is somewhat jarring.<\/li>\n<li>Hiding navigation options on mobile is unacceptable.<\/li>\n<\/ul>\n<p>A list of links that condenses into a clickable drop down menu revealing navigation options, however, works a trick on a smaller screen. For my money, this is the most perfect solution.<\/p>\n<h3>Desktop Viewport<\/h3>\n<p><strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9026\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image049.png\" alt=\"Screenshot of Palantir's website design\" width=\"720\" height=\"357\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image049.png 800w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image049-605x300.png 605w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/strong><\/p>\n<p><em>Photo credit: <a href=\"http:\/\/www.fivesimplesteps.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Five Simple Steps<\/a><\/em><\/p>\n<h3>Mobile Viewport<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9028\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image064.png\" alt=\"Screenshot of Palantir's website design\" width=\"417\" height=\"515\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image064.png 417w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image064-243x300.png 243w\" sizes=\"auto, (max-width: 417px) 100vw, 417px\" \/><\/p>\n<p><em>Photo credit: <a href=\"http:\/\/www.fivesimplesteps.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Five Simple Steps<\/a><\/em><\/p>\n<p>The exciting part is the many methods of implementation. Menus can overlay, displace (as seen above in the smaller screenshot), slide out from the left, the right, or simply cover the screens content completely via a toggle button. Whatever suits the designer&#8217;s fancy.<\/p>\n<p>The important thing to recognize is that when users are looking for content, they don&#8217;t need navigation in the way. When they&#8217;re trying to navigate, all they need are links to their desired destinations. A collapsible menu serves both purposes equally, efficiently, and intuitively. Whether you&#8217;re building a website or a custom mobile app\u2014for instance, using a no-code platform like <a href=\"https:\/\/www.adalo.com\" target=\"_blank\" rel=\"noopener noreferrer\">Adalo<\/a> that lets entrepreneurs design database-driven apps without coding\u2014applying solid navigation principles ensures a consistent and intuitive user experience across all device sizes.<\/p>\n<p>A perennial favorite of mine, <a href=\"http:\/\/mic.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mic.com<\/a>, has a full screen toggle menu that renders nicely on both mobile and desktop. Observe:<\/p>\n<h3>Desktop Viewport<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9027\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image055.png\" alt=\"Screenshot of Palantir's website design\" width=\"720\" height=\"348\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image055.png 800w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image055-620x300.png 620w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9031\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image091.png\" alt=\"Screenshot of Palantir's website design\" width=\"720\" height=\"358\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image091.png 800w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image091-603x300.png 603w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>Here you see the desktop version of the homepage with menu icon prominently featured and easily accessible. Once you click the menu, you&#8217;re presented with a number of navigation options (second image).<\/p>\n<p>A prioritized nav menu replaces the page&#8217;s content and shuffles you toward the various news categories and most popular stories of the day. It renders very nicely on a mobile device as well:<\/p>\n<h3>Mobile Viewport<\/h3>\n<p><strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9030\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image081.png\" alt=\"Screenshot of Palantir's website design\" width=\"460\" height=\"734\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image081.png 460w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/image081-188x300.png 188w\" sizes=\"auto, (max-width: 460px) 100vw, 460px\" \/><\/strong><\/p>\n<p>Everything is in its place according to priority, and nothing is sacrificed in terms of the site&#8217;s appearance when the screens shrink. One thing to note, however, is they keep their company info and associated links in the footer, along with a CTA for their newsletter subscription.<\/p>\n<p>This says two things to me:<\/p>\n<ul>\n<li>First, their average user is more concerned about the content available than information about the publication itself. This isn&#8217;t exactly surprising considering how most American millennials consume news (at a very superficial level), nor is it too inconvenient as this sort of information is usually found in a footer anyway.<\/li>\n<li>Second, it strikes me as a good method to keep the menu minimalist and attractive. It shows good design sense, with the minimum in sacrifice regarding usability.<\/li>\n<\/ul>\n<p>Overall, this is a great example of how to balance usability and aesthetics in a responsive setting. If you&#8217;re curious, you can learn how to create a very similar fade-in navigation drawer with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-navigation-drawer-tutorial\/\" target=\"_blank\" rel=\"noopener noreferrer\">this tutorial<\/a> demonstrated using <a href=\"https:\/\/www.uxpin.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">UXPin<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/07\/image06.gif\" alt=\"Screenshot of Palantir's website design\" width=\"317\" height=\"543\" \/><\/p>\n<p>Photo credit: <a href=\"https:\/\/www.uxpin.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">UXPin <\/a><\/p>\n<p>There&#8217;s even a hybrid that combines this method and the header bar, where, once a viewport shrinks to a certain size, it triggers a breakpoint and the header bar is replaced with a menu. For an example of this, take a look at the <a href=\"http:\/\/firstframe.de\/\" target=\"_blank\" rel=\"noopener noreferrer\">website<\/a> for a German film production company called First Frame. Shrink your browser&#8217;s window and watch as the navigation bar turns to a toggle switch for the menu.<\/p>\n<p>Either way works fine, but I personally like a toggle button from the get go. It&#8217;s recognizable regardless of screen size and it helps a user with their more immediate needs, whatever they may be.<\/p>\n<h2>Conclusion<\/h2>\n<p>Responsive design is still in its relative infancy, the term itself only coming about in 2010. While it used to mean that a webpage had to fluidly respond to a set number of industry standardized screen sizes, the number of screens has increased exponentially. RWD now must be able to adapt to any size including wearables.<\/p>\n<p>There is no perfect solution, but for the most common problems we encounter today, these are the best methods we&#8217;ve come up with so far.<\/p>\n<p>What does the future hold? How can these methods be improved? Only time will tell.<\/p>\n<p><em>If you found this post interesting, check out our free e-book <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ux-design-trends-responsive-adaptive-web-design\/\">Timeless UX Trends: Responsive &amp; Adaptive Design<\/a>. We describe step-by-step how to follow a mobile-first design approach with analysis of examples from Hulu, Change.org, and others.<\/em><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ux-design-trends-responsive-adaptive-web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-8924\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/tw-promo2.png\" alt=\"Timeless UX Design Trends: Responsive &amp; Adaptive Web Design\" width=\"720\" height=\"360\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/tw-promo2.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/tw-promo2-600x300.png 600w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We explain a few popular responsive navigation options before explaining the top choice. Tips and many examples included. <\/p>\n","protected":false},"author":43,"featured_media":9032,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,15,4,6,7],"tags":[],"class_list":["post-9021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-responsive-web-design","category-ui-design","category-ux-design","category-web-design"],"yoast_title":"What Should the Perfect Responsive Navigation Look Like? | UXPin","yoast_metadesc":"We explore a few responsive navigation options before explaining the top choice. Tips and many examples included.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What Should the Perfect Responsive Navigation Look Like? | UXPin<\/title>\n<meta name=\"description\" content=\"We explore a few responsive navigation options before explaining the top choice. Tips and many examples included.\" \/>\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\/what-should-the-perfect-responsive-navigation-look-like\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What Should the Perfect Responsive Navigation Look Like?\" \/>\n<meta property=\"og:description\" content=\"We explore a few responsive navigation options before explaining the top choice. Tips and many examples included.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-24T02:06:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-08T08:01:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-23-at-6.59.32-PM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"595\" \/>\n\t<meta property=\"og:image:height\" content=\"277\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Zack Rutherford\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zack Rutherford\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 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\\\/what-should-the-perfect-responsive-navigation-look-like\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-should-the-perfect-responsive-navigation-look-like\\\/\"},\"author\":{\"name\":\"Zack Rutherford\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e54149f68e09307445e7aa57f902857f\"},\"headline\":\"What Should the Perfect Responsive Navigation Look Like?\",\"datePublished\":\"2015-09-24T02:06:19+00:00\",\"dateModified\":\"2026-05-08T08:01:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-should-the-perfect-responsive-navigation-look-like\\\/\"},\"wordCount\":1235,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-should-the-perfect-responsive-navigation-look-like\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/Screen-Shot-2015-09-23-at-6.59.32-PM.png\",\"articleSection\":[\"Blog\",\"Responsive Web Design\",\"UI Design\",\"UX Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-should-the-perfect-responsive-navigation-look-like\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-should-the-perfect-responsive-navigation-look-like\\\/\",\"name\":\"What Should the Perfect Responsive Navigation Look Like? | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-should-the-perfect-responsive-navigation-look-like\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-should-the-perfect-responsive-navigation-look-like\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/Screen-Shot-2015-09-23-at-6.59.32-PM.png\",\"datePublished\":\"2015-09-24T02:06:19+00:00\",\"dateModified\":\"2026-05-08T08:01:30+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e54149f68e09307445e7aa57f902857f\"},\"description\":\"We explore a few responsive navigation options before explaining the top choice. Tips and many examples included.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-should-the-perfect-responsive-navigation-look-like\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-should-the-perfect-responsive-navigation-look-like\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-should-the-perfect-responsive-navigation-look-like\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/Screen-Shot-2015-09-23-at-6.59.32-PM.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/Screen-Shot-2015-09-23-at-6.59.32-PM.png\",\"width\":595,\"height\":277,\"caption\":\"Screen Shot 2015 09 23 at 6.59.32 PM\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/what-should-the-perfect-responsive-navigation-look-like\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What Should the Perfect Responsive Navigation Look Like?\"}]},{\"@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\\\/e54149f68e09307445e7aa57f902857f\",\"name\":\"Zack Rutherford\",\"description\":\"Zack Rutherford is a UX Design Writer at UXPin. His work has been published in UX Mag, awwwards, and Speckyboy.\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/zackrutherford\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What Should the Perfect Responsive Navigation Look Like? | UXPin","description":"We explore a few responsive navigation options before explaining the top choice. Tips and many examples included.","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\/what-should-the-perfect-responsive-navigation-look-like\/","og_locale":"en_US","og_type":"article","og_title":"What Should the Perfect Responsive Navigation Look Like?","og_description":"We explore a few responsive navigation options before explaining the top choice. Tips and many examples included.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/","og_site_name":"Studio by UXPin","article_published_time":"2015-09-24T02:06:19+00:00","article_modified_time":"2026-05-08T08:01:30+00:00","og_image":[{"width":595,"height":277,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-23-at-6.59.32-PM.png","type":"image\/png"}],"author":"Zack Rutherford","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Zack Rutherford","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/"},"author":{"name":"Zack Rutherford","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e54149f68e09307445e7aa57f902857f"},"headline":"What Should the Perfect Responsive Navigation Look Like?","datePublished":"2015-09-24T02:06:19+00:00","dateModified":"2026-05-08T08:01:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/"},"wordCount":1235,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-23-at-6.59.32-PM.png","articleSection":["Blog","Responsive Web Design","UI Design","UX Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/","name":"What Should the Perfect Responsive Navigation Look Like? | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-23-at-6.59.32-PM.png","datePublished":"2015-09-24T02:06:19+00:00","dateModified":"2026-05-08T08:01:30+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e54149f68e09307445e7aa57f902857f"},"description":"We explore a few responsive navigation options before explaining the top choice. Tips and many examples included.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-23-at-6.59.32-PM.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Screen-Shot-2015-09-23-at-6.59.32-PM.png","width":595,"height":277,"caption":"Screen Shot 2015 09 23 at 6.59.32 PM"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/what-should-the-perfect-responsive-navigation-look-like\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"What Should the Perfect Responsive Navigation Look Like?"}]},{"@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\/e54149f68e09307445e7aa57f902857f","name":"Zack Rutherford","description":"Zack Rutherford is a UX Design Writer at UXPin. His work has been published in UX Mag, awwwards, and Speckyboy.","url":"https:\/\/www.uxpin.com\/studio\/author\/zackrutherford\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/9021","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\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=9021"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/9021\/revisions"}],"predecessor-version":[{"id":59083,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/9021\/revisions\/59083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/9032"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=9021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=9021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=9021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}