{"id":7688,"date":"2021-05-24T12:46:38","date_gmt":"2021-05-24T12:46:38","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=7688"},"modified":"2021-05-21T12:47:16","modified_gmt":"2021-05-21T12:47:16","slug":"wordpress-vertical-menus","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/","title":{"rendered":"WordPress Vertical Menus: from A to Z"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">We\u2019ve already talked in previous articles about <\/span><a href=\"https:\/\/colibriwp.com\/blog\/wordpress-menus\/\"><span style=\"font-weight: 400;\">building a WordPress menu<\/span><\/a><span style=\"font-weight: 400;\"> in general, and about building <\/span><a href=\"https:\/\/colibriwp.com\/blog\/wordpress-dropdown-menus\/\"><span style=\"font-weight: 400;\">WordPress dropdown menus<\/span><\/a><span style=\"font-weight: 400;\">. We haven\u2019t quite covered vertical menus yet. So, it\u2019s time to roll up our sleeves and show you how to nail them. Ready?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, let\u2019s be straight here: when talking about vertical menus, I\u2019m not including any left or right sidebar navigation.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s start by remembering how menus are actually built, deal? I\u2019m gonna make this fast.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">How to create a WordPress menu in general<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><b>Step 1<\/b><span style=\"font-weight: 400;\">: Go to the WordPress Dashboard and select \u201cMenus\u201d underneath \u201cAppearance\u201d.<\/span><\/p>\n<p><b>Step 2<\/b><span style=\"font-weight: 400;\">: Name your menu, and select the display location of your menu. The options here vary from theme to theme. Next, hit \u201cCreate Menu\u201d.<img loading=\"lazy\" class=\"aligncenter wp-image-7694\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/image4.png\" alt=\"Create WordPress menu\" width=\"1000\" height=\"530\" \/><\/span><\/p>\n<p><b>Step 3<\/b><span style=\"font-weight: 400;\">: Add your menu elements (pages, posts, custom links, categories). Just tick next to the item you need, then hit \u201cAdd to Menu\u201d.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7693\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/image3.png\" alt=\"Add menu items\" width=\"1000\" height=\"414\" \/><\/p>\n<p><b>Step 4<\/b><span style=\"font-weight: 400;\">: Save your menu.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And you\u2019re done!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019ve changed your mind and want to change the location of your menu, you can do this quickly using the \u201cManage Locations\u201d option.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7703\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/image13.png\" alt=\"WordPress menu locations\" width=\"1174\" height=\"369\" \/><\/p>\n<h2><span style=\"font-weight: 400;\">Types of Vertical Menus<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When considering a menu type the main thing to take into account is how many levels you need. Are you using menus and submenus, categories and subcategories?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s look at your options:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The vertical accordion menu<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This type of menu allows users to click on a menu link and have the sub-menu options expand or slide out underneath. Accordion Menus are vertical menus where clicking the main item expands the section below it. Clicking the top link a second time closes the section. <\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7692\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/image2.png\" alt=\"Vertical accordion menu\" width=\"223\" height=\"285\" \/><\/p>\n<p><span style=\"font-weight: 400;\">This makes menus really compact and easy to navigate if they use the needed visual cues to signal that slide-outs are available (most of the time arrow shapes are being used). There\u2019s one big downside to this option. The user might end up a bit confused about the parent item if there are too many options laid out for him.<\/span><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The vertical mega menu<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The vertical mega menu creates a single \u201cflyout\u201d container for each main link. Each main link leads to a submenu. This is an option very popular among online stores.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7699\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/image9.png\" alt=\"Amazon vertical mega menu\" width=\"1122\" height=\"480\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The dropdown menu<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Dropdown menus are the most popular type of multi-level menu. The menu links drop down vertically.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-7698\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/image8.png\" alt=\"Vertical dropdown menu\" width=\"730\" height=\"270\" \/><\/span><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\">Source: <\/span><\/i><a href=\"https:\/\/dribbble.com\/shots\/11071294-dropdown-menu\"><i><span style=\"font-weight: 400;\">Dribbble<\/span><\/i><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Now, most of the themes out there won\u2019t allow you to create a vertical menu. This is why we\u2019ll be needing some extra help from WordPress plugins.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">2 Plugins You Can Use for Vertical WordPress Menus<\/span><\/h2>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Now, there are more Vertical Menu WordPress plugins that you could choose from, but here are my two favorite ones. If you want to see other options, check <\/span><a href=\"https:\/\/wordpress.org\/plugins\/tags\/vertical-menu\/\"><span style=\"font-weight: 400;\">this link<\/span><\/a><span style=\"font-weight: 400;\"> from wordpress.org.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/wpdevart.com\/wordpress-vertical-menu-plugin\/\"><span style=\"font-weight: 400;\">Responsive Vertical Icon Menu<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Here are some of its most useful features:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Easy install and use<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Works without problem with all WordPress versions<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Fully responsive WordPress vertical menu<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ability to add Menu Icon<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ability to change main menu and submenu styles (premium feature)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ability to make changes to active menu styles, font family, border styles, background color (premium feature)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">User friendly back-end<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Tested on popular WordPress themes<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/xplodedthemes.com\/products\/slick-menu\/\"><span style=\"font-weight: 400;\">Slick Menu &#8211; Responsive WordPress Vertical Menu<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Here are some of its most useful features:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Each level is independently customizable<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">14 3D menu appearance animations<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Covering or overlapping menu animation<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">45 menu item animations<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Hamburger animations<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Icons library<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Google Fonts available<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Fully responsive<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Smooth scroll<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now, here\u2019s how you can install a WordPress plugin. <\/span><\/p>\n<div class='embed-container'><iframe loading=\"lazy\" title=\"How to Install, Deactivate and Work with WordPress Plugins\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.youtube.com\/embed\/tRmW1Texk3k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<h2><span style=\"font-weight: 400;\">Pro and Against Vertical Menus<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now, my question is: do you really need a vertical menu?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Why am I asking you this? .Well, it seems there\u2019s an ongoing debate around the topic. Most of the designers are against this, and I\u2019ll give you some of their reasons below.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, every rule has exceptions, and we\u2019ll look at those as well.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the end, there&#8217;s no correct absolute answer. When it comes to designing for users, context the main driver.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Now, let\u2019s look at the <\/span><b>counter-arguments.<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">If you place your vertical navigation bar to the left of a page\u2019s content, you might be wasting valuable space that could be used for more important things.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Users are already used to this pattern: common navigation elements are near the top.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Vertical menus were more common in the past, now they seem out-of-date.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Now, let\u2019s look at the<\/span><b> arguments for vertical menus:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Left navigation might be faster for users to scan.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In vertical navigation, you can include more elements, in horizontal navigation you need to narrow things down, because of limited space.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">If primary links are long, they would fit better inside a vertical menu.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">E-commerce stores and mobile apps have already helped users get used to vertical menus. E-commerce sites use a vertical display of product categories and sub-categories. Mobile apps can\u2019t show horizontal navigation, due to lack of space, and this is why when you collapse a hamburger menu, you\u2019ll be seeing vertical navigation.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Users are used to finding important stuff in a left-vertical alignment for SaaS products as well. Let\u2019s say you use Canva, Mailchimp, Adobe Lightroom, or even the Colibri page builder. Those are not menus per-se, but it proves the fact that not everything needs to happen inside a top bar.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Vertical Menu Inspiration from 7 Websites<\/span><\/h2>\n<p>&nbsp;<\/p>\n<ol>\n<li><span style=\"font-weight: 400;\">The website for the Australian Formula 1 Grand Prix uses a vertical menu with more menu items backed by icons. It looks really nice and it\u2019s really visible. You can\u2019t miss it. <img loading=\"lazy\" class=\"aligncenter size-full wp-image-7695\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/image5-1.png\" alt=\"Vertical menu example from Australian Formula 1\" width=\"1878\" height=\"890\" \/><span style=\"background-color: transparent;\">2. Seeing a vertical menu inside the footer is quite common. Some of these menus are pretty dull, but here\u2019s one that caught my eye:<\/span><\/span><span style=\"font-weight: 400;\"><br \/>\n<img loading=\"lazy\" class=\"aligncenter size-full wp-image-7700\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/image10.png\" alt=\"Footer vertical menu\" width=\"1277\" height=\"444\" \/><\/span><i style=\"background-color: transparent;\">Source: thedvigroup.com<\/i><\/li>\n<\/ol>\n<p>It has a purpose, this is why it stands out. Design needs to be a way to a goal. Here, the goal seems to be making it easy for people to find the contact information and the job offer. <span style=\"background-color: transparent;\">Here\u2019s an example of vertical menus from the British Museum as well. Links that go in the footer are secondary and tertiary links, they do not weigh as much as primary links that go inside the main navigation. <img loading=\"lazy\" class=\"aligncenter wp-image-7701\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/image11.png\" alt=\"Footer menu example\" width=\"1000\" height=\"424\" \/><\/span><\/p>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\">3. This site does not use sticky horizontal navigation, so it places a vertical menu below the content. Who says you can\u2019t have both a horizontal and a vertical menu?<img loading=\"lazy\" class=\"aligncenter wp-image-7697\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/image7-1.png\" alt=\"Vertical menu backing up the horizontal menu\" width=\"1000\" height=\"655\" \/> <\/span><i style=\"background-color: transparent;\">Source:\u00a0 <\/i><a style=\"background-color: transparent;\" href=\"http:\/\/www.oxfordhouse.nl\"><i>www.oxfordhouse.nl\u00a0<\/i><\/a><\/p>\n<p style=\"text-align: center;\"><span style=\"font-weight: 400;\">4. In this example, the links wouldn\u2019t have fit in a horizontal menu. It\u2019s hard to fit 7 links in top bar navigation. So, a vertical menu was a natural choice. It also expands so that it does not occupy too much space.<img loading=\"lazy\" class=\"aligncenter wp-image-7696\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/image6.png\" alt=\"Fancy vertical menu\" width=\"1000\" height=\"460\" \/><\/span><i style=\"background-color: transparent;\">Source: live.harley-davidson.com<\/i><\/p>\n<p><span style=\"font-weight: 400;\">5. Because users are now very familiar with the hamburger menu option, this model can also be replicated on desktop, like the folks at KiteCreative did.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-7705\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/vertical-menu.gif\" alt=\"vertical menu\" width=\"1440\" height=\"696\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">6. The folks at Marme are listing their home design products in their vertical menu. These links would have fit in a horizontal menu with three elements, and 2 dropdown menus. The experience would have ruined the view you have now in front. Going for the vertical menu was a cleaner and friendlier choice.<img loading=\"lazy\" class=\"aligncenter wp-image-7702\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/image12.png\" alt=\"Vertical menu with lots of links\" width=\"1000\" height=\"513\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">7. T<\/span><span style=\"font-weight: 400;\">he folks at The Rocks are using a vertical menu on the left, but they also have similar content on the right, so it\u2019s in almost perfect symmetry. <img loading=\"lazy\" class=\"aligncenter wp-image-7691\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/image1-1.png\" alt=\"Vertical menu with symetry\" width=\"1000\" height=\"427\" \/><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Wrap Up<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Going back a bit to the ongoing debate around vertical menus, here\u2019s my humble opinion. People know that there should be a menu on a website. They\u2019re going to look for it on the top, or on the left. They will find it, it\u2019s only a matter of seconds. Let\u2019s not underestimate them. We live in an era where kids swipe on phones from an early age. And menus are visible anyway because they occupy visible space (unless you have some poor contrast).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Just look at this site: <\/span><a href=\"http:\/\/www.artifactproperty.co.nz\/\"><span style=\"font-weight: 400;\">http:\/\/www.artifactproperty.co.nz\/<\/span><\/a><span style=\"font-weight: 400;\">. Did you find the menu, or not?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, about WordPress vertical menus. They can be built easily with the help of WordPress plugins. All you need to figure out is if it will bring some added value to the site or not.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you liked this article, and you want to learn more about how to <\/span><a href=\"https:\/\/colibriwp.com\/\"><span style=\"font-weight: 400;\">design a WordPress website<\/span><\/a><span style=\"font-weight: 400;\">, make sure to subscribe to Colibri&#8217;s <\/span><a href=\"https:\/\/www.youtube.com\/channel\/UCN3ZM-C7TJgklVfseVHamHQ\"><span style=\"font-weight: 400;\">Youtube channel<\/span><\/a><span style=\"font-weight: 400;\"> and follow us on<\/span><a href=\"https:\/\/twitter.com\/WpColibri\"><span style=\"font-weight: 400;\"> Twitter<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"https:\/\/www.facebook.com\/ColibriWP\"><span style=\"font-weight: 400;\">Facebook!<\/span><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>[sibwp_form id=1]<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve already talked in previous articles about building a WordPress menu in general, and about building WordPress dropdown menus. We haven\u2019t quite covered vertical menus yet. So, it\u2019s time to roll up our sleeves and show you how to nail them. Ready?\u00a0 Now, let\u2019s be straight here: when talking about vertical menus, I\u2019m not including&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/\">Read more<\/a><\/p>\n","protected":false},"author":6,"featured_media":7708,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[159],"tags":[272],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress Vertical Menus: from A to Z<\/title>\n<meta name=\"description\" content=\"How to create a WordPress vertical menu? Which are its pros and cons? It&#039;s time to find out on the Colibri blog \ud83d\ude09\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Vertical Menus: from A to Z\" \/>\n<meta property=\"og:description\" content=\"How to create a WordPress vertical menu? Which are its pros and cons? It&#039;s time to find out on the Colibri blog \ud83d\ude09\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-24T12:46:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-21T12:47:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/menu.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2452\" \/>\n\t<meta property=\"og:image:height\" content=\"1554\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alina Belascu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/menu.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/menu.jpg\",\"width\":2452,\"height\":1554,\"caption\":\"WordPress vertical menu\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/\",\"name\":\"WordPress Vertical Menus: from A to Z\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/#primaryimage\"},\"datePublished\":\"2021-05-24T12:46:38+00:00\",\"dateModified\":\"2021-05-21T12:47:16+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\"},\"description\":\"How to create a WordPress vertical menu? Which are its pros and cons? It's time to find out on the Colibri blog \\ud83d\\ude09\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Vertical Menus: from A to Z\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\",\"name\":\"Alina Belascu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"caption\":\"Alina Belascu\"},\"description\":\"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.\",\"url\":\"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress Vertical Menus: from A to Z","description":"How to create a WordPress vertical menu? Which are its pros and cons? It's time to find out on the Colibri blog \ud83d\ude09","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:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/","og_locale":"en_US","og_type":"article","og_title":"WordPress Vertical Menus: from A to Z","og_description":"How to create a WordPress vertical menu? Which are its pros and cons? It's time to find out on the Colibri blog \ud83d\ude09","og_url":"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/","og_site_name":"ColibriWP Blog","article_published_time":"2021-05-24T12:46:38+00:00","article_modified_time":"2021-05-21T12:47:16+00:00","og_image":[{"width":2452,"height":1554,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/menu.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alina Belascu","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/menu.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/05\/menu.jpg","width":2452,"height":1554,"caption":"WordPress vertical menu"},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/#webpage","url":"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/","name":"WordPress Vertical Menus: from A to Z","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/#primaryimage"},"datePublished":"2021-05-24T12:46:38+00:00","dateModified":"2021-05-21T12:47:16+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311"},"description":"How to create a WordPress vertical menu? Which are its pros and cons? It's time to find out on the Colibri blog \ud83d\ude09","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/wordpress-vertical-menus\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WordPress Vertical Menus: from A to Z"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311","name":"Alina Belascu","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","caption":"Alina Belascu"},"description":"Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.","url":"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/7688"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=7688"}],"version-history":[{"count":4,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/7688\/revisions"}],"predecessor-version":[{"id":7706,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/7688\/revisions\/7706"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/7708"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=7688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=7688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=7688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}