{"id":15862,"date":"2012-12-20T23:01:55","date_gmt":"2012-12-20T15:01:55","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15862"},"modified":"2023-06-26T20:32:35","modified_gmt":"2023-06-26T12:32:35","slug":"navigation-design-ideas-inspiration","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/","title":{"rendered":"Designing a Winning Navigation Menu (Ideas and Inspirations)"},"content":{"rendered":"<p><strong>Note:<\/strong> This post was first published on the 20th December, 2012.<\/p>\n<p>The navigation menu on a website is like a road sign on a street or a level directory in a shopping mall. <strong>You cannot reach your destination without first knowing where you are.<\/strong> Like in real life, navigation in web design is very important and plays a major role in a website\u2019s usability as well as in user experience.<\/p>\n<p>Nowadays, you can see plenty of different types of navigation menus with interesting, creative, and unusual designs. But how about effective navigation in a website, what would it look like; <strong>how should it look like?<\/strong><\/p>\n<p>Today, I would like to share my observations and knowledge about the importance of navigation in web design. I will reveal a few simple tips that you can use to improve your website navigation and usability. There will also be some examples of effective navigation menus to give you some idea of how to plan your next design.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/breadcrumb-navigation-examined-best-practices-examples\/\" class=\"ref-block__link\" title=\"Read More: Breadcrumb Navigation: Best Practices and Examples\" rel=\"bookmark\"><span class=\"screen-reader-text\">Breadcrumb Navigation: Best Practices and Examples<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/breadcrumb-navigation-examined-best-practices-examples.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-5422 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/breadcrumb-navigation-examined-best-practices-examples.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Breadcrumb Navigation: Best Practices and Examples<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tBreadcrumb navigation is often overlooked in the design and development process.\u00a0Some people may see it as unnecessary, while...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Information Architecture<\/h2>\n<p>Navigation planning should start with information architecture. It is vital to sit down and <strong>brainstorm about a website\u2019s information architecture<\/strong>. You have to figure out what kind of features the website offers, what is most important, and what could be placed at lower levels in the information hierarchy.<\/p>\n<p>Information architecture includes <strong>features, user needs, sitemap, testing and wireframes<\/strong>. You can read more about information architecture in article by Cameron Chapman in <a rel=\"nofollow noopener\" href=\"https:\/\/www.webfx.com\/blog\/web-design\/information-architecture-101-techniques-and-best-practices\/\">Information Architecture 101: Techniques and Best Practices<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/information_architecture.jpg\" width=\"500\" height=\"318\" alt=\"Information Architecture 101: Techniques and Best Practices\"><\/figure>\n<h2>Using user-enabled technologies<\/h2>\n<p>Avoid using Flash, JavaScript, jQuery, or anything else that risk inhibiting access to your website navigation in building your navigation bar, or at least make sure they can degrade gracefully.<\/p>\n<p>For more references on <strong>graceful degradation of javascript<\/strong>, check out this post on <a href=\"https:\/\/www.hongkiat.com\/blog\/css-javascript-fallback-methods\/\">10 Useful Fallback Methods for CSS and Javascript<\/a>.<\/p>\n<h2>Use simple, User-friendly terms<\/h2>\n<p>It is better to use <strong>simple, obvious terms that are easy to figure out<\/strong> than to keep to industry-only terms for your navigation menu. Any link that takes users more than a second or two to figure out is probably unsuitable for use.<\/p>\n<p>If a user needs to click on a link to figure out what the link leads to, then this will contribute to a bad user experience for your visitors.<\/p>\n<h3>Examples<\/h3>\n<p>Terms in the navigation menu of <a rel=\"nofollow noopener\" href=\"https:\/\/larissaness.com\/\">Larissa Ness\u2019<\/a> website are easy to understand and common enough. Users won\u2019t find it confusing because they already have experience with menus like this.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/larissaness.jpg\" width=\"500\" height=\"163\" alt=\"https:\/\/larissaness.com\/\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/csupporthq.jpg\" width=\"500\" height=\"134\" alt=\"cSupport\"><\/figure>\n<p>Creative agency <a rel=\"nofollow noopener\" href=\"https:\/\/www.eighty8four.com\/\">Eighty8Four<\/a> uses the term \u201cshowroom\u201d which can be confusing for visitors. This term might mean portfolio or work, but it is not clear, and visitors have no choice but to click in to check it out.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/eighty8four.jpg\" width=\"500\" height=\"250\" alt=\"Eighty8Four\"><\/figure>\n<h2>Standardize the Navigation design<\/h2>\n<p><strong>Use the same navigation model<\/strong> in all your pages. It is very important because, without a consistent design, a user may actually think he is on another website. Make sure that you use the same navigation model so that users can easily go about your website without being lost.<\/p>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/bluegg.co.uk\/\"><strong>Bluegg<\/strong><\/a>, shown below, uses a simple and clean navigation design which remains the same in all subpages. The only difference is the color indicator, which shows the page the visitor is currently at.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/bluegg.jpg\" width=\"500\" height=\"300\" alt=\"Bluegg\"><\/figure>\n<h2>Indicate where you are<\/h2>\n<p>It is crucial to let the user know where he is at all times. You can do this by <strong>changing the link\u2019s background, color of the page name<\/strong> or <strong>turn the text bold<\/strong> in the navigation menu to make it different from others.<\/p>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/austineastciders.com\/\"><strong>Austin Eastciders<\/strong><\/a> uses a different color and background to indicate the page the user is on. This indicator can also work as a subtle design change, for example, by using a <strong>different navigation background<\/strong> which creates the feeling that other menu items are in-depth.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/austineastciders.jpg\" width=\"500\" height=\"187\" alt=\"Austin Eastciders\"><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/mediasurgery.co.uk\/\"><strong>Media Surgery<\/strong><\/a> uses a darker color as an indicator for an opened subpage. Simple but effective.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/mediasurgery.jpg\" width=\"500\" height=\"220\" alt=\"Media Surgery\"><\/figure>\n<h2>Use web conventions<\/h2>\n<p>It is all about easy-to-use and intuitive website navigation. Web conventions make it a lot easier for designers to work around their designs. Most users would click on the website logo to return to the homepage, so design your logo to do that.<\/p>\n<p>If you don\u2019t, <strong>you are making them spend time to learn something new<\/strong> or, in some cases, inconvenience them by not providing what they expect to be commonly accepted navigational norms.<\/p>\n<p>You can learn more about web conventions here:<\/p>\n<ul>\n<li> <a rel=\"nofollow noopener\" href=\"https:\/\/www.visualswirl.com\/articles\/dont-reinvent-the-web-design-wheel\/\">Don\u2019t Reinvent the Web Design Wheel<\/a> <\/li>\n<li> <a rel=\"nofollow noopener\" href=\"http:\/\/designbit.co.uk\/2009\/02\/27\/design-with-web-conventions\/\">Design With Web Conventions<\/a> <\/li>\n<\/ul>\n<p><strong><a rel=\"nofollow noopener\" href=\"https:\/\/inject.co.nz\/\">Inject Design<\/a><\/strong> places the logo at the top left corner which fits one of the most used web conventions today.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/injectdesign.jpg\" width=\"500\" height=\"200\" alt=\"Inject Design\"><\/figure>\n<p><strong><a rel=\"nofollow noopener\" href=\"https:\/\/adamscreation.com\/\">Adams Creation<\/a><\/strong> uses one of the most common web conventions \u2013 logo is placed on the left top corner of the website and links to the homepage.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/adamscreation.jpg\" width=\"500\" height=\"200\" alt=\"Adams Creation\"><\/figure>\n<h2>Test it: Involve a 3rd party<\/h2>\n<p>Always test your navigation design with anyone who has used the Internet before. You might want to bring in people unrelated to the design process to test it. <strong>Observe their preferences when they navigate<\/strong> through your site and analyze the time it took for them to find the pages that they were looking for.<\/p>\n<p>For better accuracy, <strong>involve more people, collect the data, analyze and summarize it<\/strong> for a better fit. Do an after-test survey if it is necessary. You may get some unexpected ideas and input that would otherwise go undetected without this test run.<\/p>\n<p class=\"note\"><strong>Read more on<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/7-steps-to-better-website-feedback\/\">how to get better user feedback for your website<\/a><\/p>\n<h2>Provide context<\/h2>\n<p>To be consistent with your content and navigation, provide some context for website users to find things they need quickly. You can place small icons related to the content you link to or short descriptions to give an overview of what the page is about.<\/p>\n<p><strong>My Own Bike<\/strong> uses simple icons to give users more information about what they can find in certain subpage.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/myownbike.jpg\" width=\"500\" height=\"161\" alt=\"My Own Bike\"><\/figure>\n<p><strong><a rel=\"nofollow noopener\" href=\"http:\/\/www.youknowwhodesign.com\/\">Sarah Parmenter<\/a><\/strong> uses short and nice captions under main navigation to provide some information about the subpages the main navigation is linking to.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/youknowwhodesign.jpg\" width=\"500\" height=\"200\" alt=\"You Know Who\"><\/figure>\n<h2>SEO purposes<\/h2>\n<p>Google likes consistent navigation. It is good to have consistent navigation not only for users to understand and get an idea of how to navigate through your website but also for search engines to index your website.<\/p>\n<p>Search engine robots will crawl through your website to index your website and put the links in the search engine results page. If you want to be visible, pay attention to good navigation design and get more traffic.<\/p>\n<h2>Free navigation scripts (CSS, and jQuery)<\/h2>\n<p>Here is a short list of the latest navigation menus you might find useful for your projects. These scripts will make your product\u2019s user experience even better by adding some nice features and making it a pleasure to use.<\/p>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/www.egrappler.com\/xml-driven-vertical-information-scroller-script-utilizing-html-and-jquery-vscroller\/\"><strong>XML-driven Vertical News Scroller Script using HTML and jQuery: vScroller<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"https:\/\/www.egrappler.com\/xml-driven-vertical-information-scroller-script-utilizing-html-and-jquery-vscroller\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/vscroller.jpg\" width=\"500\" height=\"350\" alt=\"XML-driven Vertical News Scroller Script using HTML and jQuery: vScroller\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/github.com\/luis-almeida\/filtrify\"><strong>Filtrify<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"https:\/\/github.com\/luis-almeida\/filtrify\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/filtrify.jpg\" width=\"500\" height=\"350\" alt=\"Filtrify\"><\/a><\/figure>\n<p><strong>Page Scroller<\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/pagescroller.jpg\" width=\"500\" height=\"290\" alt=\"Page Scroller\"><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/tutorialzine.com\/2012\/04\/timeline-portfolio\"><strong>Timeline Portfolio<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"https:\/\/tutorialzine.com\/2012\/04\/timeline-portfolio\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/timeline_portfolio.jpg\" width=\"500\" height=\"290\" alt=\"Timeline Portfolio\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/github.com\/sebnitu\/HorizontalNav\"><strong>HorizontalNav<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"https:\/\/github.com\/sebnitu\/HorizontalNav\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/horizontalnav.jpg\" width=\"500\" height=\"187\" alt=\"HorizontalNav\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/tutorialzine.com\/2010\/06\/css3-minimalistic-navigation-menu\"><strong>CSS3 Minimalistic Navigation Menu<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"https:\/\/tutorialzine.com\/2010\/06\/css3-minimalistic-navigation-menu\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/minimalistic_navigation_menu.jpg\" width=\"500\" height=\"290\" alt=\"CSS3 Minimalistic Navigation Menu\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/tympanus.net\/codrops\/2011\/10\/10\/circle-navigation-effect-with-css3\/\"><strong>Circle Navigation Effect with CSS3<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"https:\/\/tympanus.net\/codrops\/2011\/10\/10\/circle-navigation-effect-with-css3\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/circle_navigation_effect.jpg\" width=\"500\" height=\"350\" alt=\"Circle Navigation Effect with CSS3\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/tympanus.net\/codrops\/2011\/06\/09\/grid-navigation-effects\/\"><strong>Grid Navigation Effects with jQuery<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"https:\/\/tympanus.net\/codrops\/2011\/06\/09\/grid-navigation-effects\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/grid_navigation.jpg\" width=\"500\" height=\"350\" alt=\"Grid Navigation Effects with jQuery\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"http:\/\/kirkas.ch\/ascensor\/\"><strong>Ascensor<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"http:\/\/kirkas.ch\/ascensor\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/ascensor.jpg\" width=\"500\" height=\"350\" alt=\"Ascensor\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/onextrapixel.com\/create-an-elegant-css3-navigation-menu\/\"><strong>Create An Elegant CSS3 Navigation Menu<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"https:\/\/onextrapixel.com\/create-an-elegant-css3-navigation-menu\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/elegant_css3_navigation_menu.jpg\" width=\"500\" height=\"350\" alt=\"Create An Elegant CSS3 Navigation Menu\"><\/a><\/figure>\n<h2>Showcase of beautiful horizontal navigation<\/h2>\n<p>And last but not least, some inspiring horizontal navigation menus. Check these amazing websites and their navigation menu solutions to find new ideas for your projects.<\/p>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/ch4mical.com\/\"><strong>Ch4mical<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"https:\/\/ch4mical.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/ch4mical.jpg\" width=\"500\" height=\"350\" alt=\"Ch4mical\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/www.makeitbloom.com\/\"><strong>Bloom Search Marketing Inc.<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"https:\/\/www.makeitbloom.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/makeitbloom.jpg\" width=\"500\" height=\"327\" alt=\"Bloom Search Marketing Inc.\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"http:\/\/www.theworkofalexperez.com\/\"><strong>Alex Perez<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"http:\/\/www.theworkofalexperez.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/theworkofalexperez.jpg\" width=\"500\" height=\"327\" alt=\"Alex Perez\"><\/a><\/figure>\n<p><strong>Libor Zezulka<\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/liborzezulka.jpg\" width=\"500\" height=\"268\" alt=\"Libor Zezulka\"><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"http:\/\/www.hauska.co.kr\/\"><strong>Hauska!<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"http:\/\/www.hauska.co.kr\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/hauska.jpg\" width=\"500\" height=\"268\" alt=\"Hauska!\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/www.goldenisles.com\/\"><strong>Golden Isles<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"https:\/\/www.goldenisles.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/goldenisles.jpg\" width=\"500\" height=\"350\" alt=\"Golden Isles\"><\/a><\/figure>\n<p><strong>Neil Carpenter<\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/neilcarpenter.jpg\" width=\"500\" height=\"350\" alt=\"Neil Carpenter\"><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"http:\/\/mrcthms.com\/\"><strong>Marc Thomas<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"http:\/\/mrcthms.com\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/mrcthms.jpg\" width=\"500\" height=\"350\" alt=\"Marc Thomas\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"http:\/\/www.3dpolystyren.cz\/\"><strong>3D Polystyren<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"http:\/\/www.3dpolystyren.cz\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/romangallas.jpg\" width=\"500\" height=\"350\" alt=\"3D Polystyrene\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/liechtenecker.at\/\"><strong>Liechtenecker<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"https:\/\/liechtenecker.at\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/liechtenecker.jpg\" width=\"500\" height=\"350\" alt=\"Liechtenecker\"><\/a><\/figure>\n<p><strong>Adventure World<\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/adventureworld.jpg\" width=\"500\" height=\"350\" alt=\"Adventure World\"><\/figure>\n<p><strong>Arbutus Photography<\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/arbutusphotography.jpg\" width=\"500\" height=\"350\" alt=\"Arbutus Photography\"><\/figure>\n<p><strong>OMDRL<\/strong><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/omdrl.jpg\" width=\"500\" height=\"350\" alt=\"OMDRL\"><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"https:\/\/4pinesbeer.com.au\/\"><strong>4 Pines Beer<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"https:\/\/4pinesbeer.com.au\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/4pinesbeer.jpg\" width=\"500\" height=\"350\" alt=\"4 Pines Beer\"><\/a><\/figure>\n<p><a rel=\"nofollow noopener\" href=\"http:\/\/wineshop.hunters.co.nz\/\"><strong>Hunters Wines<\/strong><\/a><\/p>\n<figure><a rel=\"nofollow noopener\" href=\"http:\/\/wineshop.hunters.co.nz\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/wineshop.jpg\" width=\"500\" height=\"350\" alt=\"Hunters Wines\"><\/a><\/figure>\n<p>Hopefully, you will find this article useful and informative. If you have any thoughts or if you disagree, please share your opinion in the comments section.<\/p>","protected":false},"excerpt":{"rendered":"<p>Note: This post was first published on the 20th December, 2012. The navigation menu on a website is like a road sign on a street or a level directory in a shopping mall. You cannot reach your destination without first knowing where you are. Like in real life, navigation in web design is very important&hellip;<\/p>\n","protected":false},"author":34,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395,352],"tags":[4102],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Designing a Winning Navigation Menu (Ideas and Inspirations) - Hongkiat<\/title>\n<meta name=\"description\" content=\"Note: This post was first published on the 20th December, 2012. The navigation menu on a website is like a road sign on a street or a level directory in a\" \/>\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.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing a Winning Navigation Menu (Ideas and Inspirations)\" \/>\n<meta property=\"og:description\" content=\"Note: This post was first published on the 20th December, 2012. The navigation menu on a website is like a road sign on a street or a level directory in a\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-12-20T15:01:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-26T12:32:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/information_architecture.jpg\" \/>\n<meta name=\"author\" content=\"Tomas Laurinavicius\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tomas Laurinavicius\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/navigation-design-ideas-inspiration\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/navigation-design-ideas-inspiration\\\/\"},\"author\":{\"name\":\"Tomas Laurinavicius\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/8aecaf19dbf153dfc6237ae56142b1ba\"},\"headline\":\"Designing a Winning Navigation Menu (Ideas and Inspirations)\",\"datePublished\":\"2012-12-20T15:01:55+00:00\",\"dateModified\":\"2023-06-26T12:32:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/navigation-design-ideas-inspiration\\\/\"},\"wordCount\":1236,\"commentCount\":32,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/navigation-design-ideas-inspiration\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/navigation-design-ideas-inspiration\\\/information_architecture.jpg\",\"keywords\":[\"Interface Design\"],\"articleSection\":[\"UI\\\/UX\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/navigation-design-ideas-inspiration\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/navigation-design-ideas-inspiration\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/navigation-design-ideas-inspiration\\\/\",\"name\":\"Designing a Winning Navigation Menu (Ideas and Inspirations) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/navigation-design-ideas-inspiration\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/navigation-design-ideas-inspiration\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/navigation-design-ideas-inspiration\\\/information_architecture.jpg\",\"datePublished\":\"2012-12-20T15:01:55+00:00\",\"dateModified\":\"2023-06-26T12:32:35+00:00\",\"description\":\"Note: This post was first published on the 20th December, 2012. The navigation menu on a website is like a road sign on a street or a level directory in a\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/navigation-design-ideas-inspiration\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/navigation-design-ideas-inspiration\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/navigation-design-ideas-inspiration\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/navigation-design-ideas-inspiration\\\/information_architecture.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/navigation-design-ideas-inspiration\\\/information_architecture.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/navigation-design-ideas-inspiration\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Designing a Winning Navigation Menu (Ideas and Inspirations)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/8aecaf19dbf153dfc6237ae56142b1ba\",\"name\":\"Tomas Laurinavicius\",\"description\":\"Tomas is a blogger and designer from Lithuania, who is currently studying Multimedia Design &amp; Communication in Denmark. Check out his work on his portfolio or connect with him on Twitter.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/tomaslau\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Designing a Winning Navigation Menu (Ideas and Inspirations) - Hongkiat","description":"Note: This post was first published on the 20th December, 2012. The navigation menu on a website is like a road sign on a street or a level directory in a","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.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/","og_locale":"en_US","og_type":"article","og_title":"Designing a Winning Navigation Menu (Ideas and Inspirations)","og_description":"Note: This post was first published on the 20th December, 2012. The navigation menu on a website is like a road sign on a street or a level directory in a","og_url":"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-12-20T15:01:55+00:00","article_modified_time":"2023-06-26T12:32:35+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/information_architecture.jpg","type":"","width":"","height":""}],"author":"Tomas Laurinavicius","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Tomas Laurinavicius","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/"},"author":{"name":"Tomas Laurinavicius","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/8aecaf19dbf153dfc6237ae56142b1ba"},"headline":"Designing a Winning Navigation Menu (Ideas and Inspirations)","datePublished":"2012-12-20T15:01:55+00:00","dateModified":"2023-06-26T12:32:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/"},"wordCount":1236,"commentCount":32,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/information_architecture.jpg","keywords":["Interface Design"],"articleSection":["UI\/UX","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/","url":"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/","name":"Designing a Winning Navigation Menu (Ideas and Inspirations) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/information_architecture.jpg","datePublished":"2012-12-20T15:01:55+00:00","dateModified":"2023-06-26T12:32:35+00:00","description":"Note: This post was first published on the 20th December, 2012. The navigation menu on a website is like a road sign on a street or a level directory in a","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/information_architecture.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/navigation-design-ideas-inspiration\/information_architecture.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/navigation-design-ideas-inspiration\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Designing a Winning Navigation Menu (Ideas and Inspirations)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/8aecaf19dbf153dfc6237ae56142b1ba","name":"Tomas Laurinavicius","description":"Tomas is a blogger and designer from Lithuania, who is currently studying Multimedia Design &amp; Communication in Denmark. Check out his work on his portfolio or connect with him on Twitter.","url":"https:\/\/www.hongkiat.com\/blog\/author\/tomaslau\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-47Q","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/34"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15862"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15862\/revisions"}],"predecessor-version":[{"id":67757,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15862\/revisions\/67757"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15862"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}