{"id":4560,"date":"2017-09-12T14:27:53","date_gmt":"2017-09-12T14:27:53","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=4560"},"modified":"2017-09-12T14:27:53","modified_gmt":"2017-09-12T14:27:53","slug":"introducing-nav-menu","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/introducing-nav-menu\/","title":{"rendered":"Elementor Nav Menu: The Most Powerful Menu Builder For WordPress"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4560\" class=\"elementor elementor-4560\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-jtkwnii elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"jtkwnii\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-50axgen\" data-id=\"50axgen\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bb6903e read-more-link elementor-widget elementor-widget-heading\" data-id=\"bb6903e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/elementor.com\/pro\/\">Get Elementor Menu Builder<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6xkbqu7 elementor-widget elementor-widget-text-editor\" data-id=\"6xkbqu7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Designing and <a href=\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\">customizing menus<\/a> is a huge pain, and we are now introducing a whole new way to make it easy and fun.<\/p><p>We are thrilled to be introducing the much expected <strong><a href=\"https:\/\/elementor.com\/widgets\/nav-menu-widget\/\">Nav Menu widget<\/a><\/strong>.<\/p><p>This widget is extremely flexible. In fact, you can find NO OTHER WordPress theme or plugin with as much menu design flexibility.<\/p><p>It enables you to <a href=\"https:\/\/elementor.com\/blog\/wordpress-nav-menu-design\/\">create an infinite number of pixel-perfect menu designs<\/a>, all customizable down to the very last pixel (It&#8217;s the Elementor way, as you know).<\/p><p>There&#8217;s a lot more I want to let you know about this exciting new feature, but I&#8217;m too eager to show you all the possibilities it entails, so here goes.<\/p><p>See here for a <a href=\"https:\/\/elementor.com\/blog\/wordpress-mega-menu\/\">how-to guide on building a Mega Menu with Elementor<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-xqcgwlu elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"xqcgwlu\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-iynamnn\" data-id=\"iynamnn\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-25nglkk elementor-headline--style-highlight elementor-widget elementor-widget-animated-headline\" data-id=\"25nglkk\" data-element_type=\"widget\" data-settings=\"{&quot;marker&quot;:&quot;underline&quot;,&quot;highlighted_text&quot;:&quot;Nav Menu&quot;,&quot;headline_style&quot;:&quot;highlight&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;highlight_animation_duration&quot;:1200,&quot;highlight_iteration_delay&quot;:8000}\" data-widget_type=\"animated-headline.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3 class=\"elementor-headline\">\n\t\t\t\t\t<span class=\"elementor-headline-plain-text elementor-headline-text-wrapper\">Get<\/span>\n\t\t\t\t<span class=\"elementor-headline-dynamic-wrapper elementor-headline-text-wrapper\">\n\t\t\t\t\t<span class=\"elementor-headline-dynamic-text elementor-headline-text-active\">Nav Menu<\/span>\n\t\t\t\t<\/span>\n\t\t\t\t\t<span class=\"elementor-headline-plain-text elementor-headline-text-wrapper\">in Elementor Pro<\/span>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-gkvyyrf\" data-id=\"gkvyyrf\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-prvvlyh elementor-align-justify elementor-widget elementor-widget-button\" data-id=\"prvvlyh\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/pro?utm_source=blog&#038;utm_medium=banner&#038;utm_campaign=menu_release\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-shopping-cart\" viewBox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Buy Now<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-pr575nc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"pr575nc\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5qfowms\" data-id=\"5qfowms\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-95xewkk elementor-widget elementor-widget-heading\" data-id=\"95xewkk\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Horizontal, Vertical &amp; Dropdown Layouts<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-74f7k47 elementor-widget elementor-widget-text-editor\" data-id=\"74f7k47\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Once you choose the menu from the previously created WordPress menus, you can start customizing the layout of the menu.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-rzeokyz elementor-widget elementor-widget-text-editor\" data-id=\"rzeokyz\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\tYour first choice is to pick from 3 basic layouts:\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-meegj66 elementor-widget elementor-widget-image\" data-id=\"meegj66\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/menu-horizontal.gif\" class=\"attachment-full size-full wp-image-5382\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ds5mvne elementor-widget elementor-widget-text-editor\" data-id=\"ds5mvne\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Horizontal<\/b> &#8211; The menu will be spread out horizontally from left to right or vice versa.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-tpvx5yr elementor-widget elementor-widget-image\" data-id=\"tpvx5yr\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/vertical-menu-style.gif\" class=\"attachment-full size-full wp-image-5370\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-lidsgil elementor-widget elementor-widget-text-editor\" data-id=\"lidsgil\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<b>Vertical <\/b>&#8211; For getting the menu to be vertical and go from top to bottom.\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-mdr228e elementor-widget elementor-widget-image\" data-id=\"mdr228e\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/dropdown-menu.gif\" class=\"attachment-full size-full wp-image-5355\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ra4kpuk elementor-widget elementor-widget-text-editor\" data-id=\"ra4kpuk\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Dropdown <\/b>&#8211; Another vertical layout where the submenu drops down like an accordion<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-kyqr0mw elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"kyqr0mw\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8rcz2pm elementor-widget elementor-widget-heading\" data-id=\"8rcz2pm\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Pointers &amp; Animations<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-gei702t elementor-widget elementor-widget-text-editor\" data-id=\"gei702t\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>By picking a pointer and an animation for the menu, you are able to create over 50 different effects for your hover and active menu items.<\/p><p>Just look at these beauties:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9blkyem elementor-widget elementor-widget-heading\" data-id=\"9blkyem\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Underline Animations<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-enz4pca elementor-widget elementor-widget-text-editor\" data-id=\"enz4pca\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The underline pointer features 5 animations: Fade, Slide, Grow, Drop in and Drop out.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f7spig6 elementor-widget elementor-widget-image\" data-id=\"f7spig6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"540\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/menu-underline.gif\" class=\"attachment-full size-full wp-image-5347\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54ij5o2 elementor-widget elementor-widget-heading\" data-id=\"54ij5o2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Framed Animations<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2vem8ah elementor-widget elementor-widget-text-editor\" data-id=\"2vem8ah\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The framed pointer include 5 animations: Fade, Grow, Shrink, Draw and Corners.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-nwnj462 elementor-widget elementor-widget-image\" data-id=\"nwnj462\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"540\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/menu-framed.gif\" class=\"attachment-full size-full wp-image-5348\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87rmx1l elementor-widget elementor-widget-heading\" data-id=\"87rmx1l\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Overline Animations<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bh1mx2q elementor-widget elementor-widget-text-editor\" data-id=\"bh1mx2q\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Overline includes the same set of 5 animations as the Underline: Fade, Slide, Grow, Drop in and Drop out.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-rmgl0ua elementor-widget elementor-widget-image\" data-id=\"rmgl0ua\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"538\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/menu-overline.gif\" class=\"attachment-full size-full wp-image-5349\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5vtugl1 elementor-widget elementor-widget-heading\" data-id=\"5vtugl1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Double Line Animations<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ipieoiw elementor-widget elementor-widget-text-editor\" data-id=\"ipieoiw\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here again, for the double line pointer, we find 5 animations: Fade, Slide, Grow, Drop in and Drop out.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-mizn865 elementor-widget elementor-widget-image\" data-id=\"mizn865\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"540\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/menu-double.gif\" class=\"attachment-full size-full wp-image-5350\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-vkc4tbk elementor-widget elementor-widget-heading\" data-id=\"vkc4tbk\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Background Animations<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1tmzvjl elementor-widget elementor-widget-text-editor\" data-id=\"1tmzvjl\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The Background pointer has the most animations. They create a button-like style on active. The Gif below shows the top 5 animations, but 11 animations are available for this pointer: Fade, Grow, Shrink, Sweep left \/ right \/ up \/ down and Shutter in vertical \/ out vertical \/ in horizontal \/ out horizontal.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-vgb1bwu elementor-widget elementor-widget-image\" data-id=\"vgb1bwu\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"537\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/menu-background.gif\" class=\"attachment-full size-full wp-image-5351\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bn2bhwb elementor-widget elementor-widget-heading\" data-id=\"bn2bhwb\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Text Animations<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-prqphap elementor-widget elementor-widget-text-editor\" data-id=\"prqphap\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The Text pointer only has a text animation effect, great for the minimalistic menu. It includes: Grow, Shrink, Sink, Float, Skew and Rotate.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bk3vouf elementor-widget elementor-widget-image\" data-id=\"bk3vouf\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"539\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/menu-text.gif\" class=\"attachment-full size-full wp-image-5352\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7gxcx4k elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"7gxcx4k\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-zv626ns elementor-widget elementor-widget-heading\" data-id=\"zv626ns\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Unprecedented Menu Customization<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-gghgs3i elementor-widget elementor-widget-text-editor\" data-id=\"gghgs3i\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This widget took us months of hard work to complete.<\/p><p>It was well worth the effort, as you will be able to see when you delve deeper into the customization option the widget offers.<\/p><p>Spacing, colors, fonts. Each design parameter has been translated into the visual UI you know and love in Elementor.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-rr9sg8v elementor-widget elementor-widget-heading\" data-id=\"rr9sg8v\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Menu Spacing &amp; Alignment<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-wj8t8dg elementor-widget elementor-widget-text-editor\" data-id=\"wj8t8dg\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Any web designer knows that setting spacing is one of the biggest pains when it comes to menu design.<\/p><p>Put simply, moving menu elements around used to involve painstaking code, and now it is done with a few handy draggable controls.<\/p><p>Some of our menu spacing controls include:<\/p><ul><li>Horizontal padding for every element of the menu and submenu<\/li><li>Vertical padding for every element of the menu and submenu<\/li><li>Space between the menu items<\/li><li>Right, left, center and justified alignment<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7s5rhcs elementor-widget elementor-widget-image\" data-id=\"7s5rhcs\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/menu-spacing.gif\" class=\"attachment-full size-full wp-image-5408\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-vfbtpbl elementor-widget elementor-widget-heading\" data-id=\"vfbtpbl\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Color, Background &amp; Typography<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-vgk2slf elementor-widget elementor-widget-text-editor\" data-id=\"vgk2slf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>By customizing the color and <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"typography\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5222\">typography<\/a> of the menu elements, you are able to create a wide array of menus. From transparent to semi-transparent menus, full width, minimalistic, light, dark&#8230; The sky is the limit with regards to the types of menu bar designs you can reach.<\/p><p>Moreover, you get the same broad design options for the submenu as well.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-01es2i0 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"01es2i0\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-q8gmcht elementor-widget elementor-widget-heading\" data-id=\"q8gmcht\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Submenu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-y5v7fth elementor-widget elementor-widget-text-editor\" data-id=\"y5v7fth\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The dropdown submenu has gotten the same careful care as the menu did.\u00a0<\/p><p>The dropdown icon can be set to be a classic rectangle, chevron, angle, none or plus.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6s4b30a elementor-widget elementor-widget-image\" data-id=\"6s4b30a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/sub-menu-r4q74aftpqvum6bj5ra0q6cp8yzmo5cotaedpsd9zm.png\" title=\"sub-menu\" alt=\"sub-menu\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-lujkp5i elementor-widget elementor-widget-text-editor\" data-id=\"lujkp5i\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You can set every aspect of the submenu dropdown design, including text and background colors, typography, horizontal and vertical padding, border, box shadow, \u00a0divider and distance.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-n2pr57k elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"n2pr57k\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0wwamel elementor-widget elementor-widget-heading\" data-id=\"0wwamel\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Mobile Responsive Menu<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cv1r45s elementor-widget elementor-widget-text-editor\" data-id=\"cv1r45s\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Elementor&#8217;s Menu offers a\u00a0Complete solution for mobile menus on WordPress. The mobile menu is controlled by a separate set of settings, giving you the ability to easily customize each menu to the right device.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47h27td elementor-widget elementor-widget-image\" data-id=\"47h27td\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/responsive-menu-widget.gif\" class=\"attachment-full size-full wp-image-5379\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-59roujk elementor-widget elementor-widget-text-editor\" data-id=\"59roujk\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Elementor&#8217;s mobile menu features include:<\/p><p><strong>Mobile &amp; tablet breakpoints.<\/strong> Using the breakpoint setting, you can decide if the mobile menu will be displayed for tablet and mobile (1023px and below) or only for mobile (767px and below).<\/p><p><strong>Full width on mobile.<\/strong> By setting the mobile menu to full width, you can have the mobile menu display in a limited width when closed (when only the hamburger icon is shown), but spread to full width when opened.<\/p><p><strong>Hamburger or text mobile menu (Vertical &amp; Accordion Menus).<\/strong> You can choose to display a collapsible hamburger icon or a fully-visible vertical menu.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-wy2twgk elementor-widget elementor-widget-image\" data-id=\"wy2twgk\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/elementor\/thumbs\/mobile-drop-down-menu-r4q70edvffk4k9yyvkqlwnp0qk5xt8wom1717k4y4c.png\" title=\"mobile-drop-down-menu\" alt=\"mobile-drop-down-menu\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ow8htac elementor-widget elementor-widget-text-editor\" data-id=\"ow8htac\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Aside \/ Center alignment.<\/strong> Choose if the mobile menu is aligned to the side or to the center.<\/p><p><strong>Toggle align.<\/strong> The closed hamburger icon can be aligned to the left, center or right.<\/p><p><strong>Design the toggle button. <\/strong>Style your toggle button by color, background color, size, border width, border radius and normal and hover states.<\/p><p><strong>Design the dropdown items. <\/strong>Set color, typography, spacing, divider and box shadow of the dropdown menu for both normal and hover states.<\/p><p><strong><a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"Responsive\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"7173\">Responsive<\/a> Navigation.<\/strong> Your menu will look good on any device, with the proper adjustment according to the width of the device.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b9t8e8c elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b9t8e8c\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-xkg2afj\" data-id=\"xkg2afj\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6ystpuc elementor-headline--style-highlight elementor-widget elementor-widget-animated-headline\" data-id=\"6ystpuc\" data-element_type=\"widget\" data-settings=\"{&quot;marker&quot;:&quot;underline&quot;,&quot;highlighted_text&quot;:&quot;Nav Menu&quot;,&quot;headline_style&quot;:&quot;highlight&quot;,&quot;loop&quot;:&quot;yes&quot;,&quot;highlight_animation_duration&quot;:1200,&quot;highlight_iteration_delay&quot;:8000}\" data-widget_type=\"animated-headline.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h3 class=\"elementor-headline\">\n\t\t\t\t\t<span class=\"elementor-headline-plain-text elementor-headline-text-wrapper\">Get<\/span>\n\t\t\t\t<span class=\"elementor-headline-dynamic-wrapper elementor-headline-text-wrapper\">\n\t\t\t\t\t<span class=\"elementor-headline-dynamic-text elementor-headline-text-active\">Nav Menu<\/span>\n\t\t\t\t<\/span>\n\t\t\t\t\t<span class=\"elementor-headline-plain-text elementor-headline-text-wrapper\">in Elementor Pro<\/span>\n\t\t\t\t\t<\/h3>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-ania7in\" data-id=\"ania7in\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6mjfaoj elementor-align-justify elementor-widget elementor-widget-button\" data-id=\"6mjfaoj\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/pro?utm_source=blog&#038;utm_medium=banner&#038;utm_campaign=menu_release\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-shopping-cart\" viewBox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Buy Now<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-q8reo38 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"q8reo38\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-trv98zv\" data-id=\"trv98zv\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9u83ehj elementor-widget elementor-widget-heading\" data-id=\"9u83ehj\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Menu is the First Step<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-uabppny elementor-widget elementor-widget-text-editor\" data-id=\"uabppny\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>We&#8217;ve been working on this feature for a really long time. The reason for that is that we \u00a0see the menu as one of the most important elements of every website, navigating the visitors through the site&#8217;s variety of pages and content.<\/p><p>The Menu widget is even more important, considering our plans to incorporate it when extending Elementor&#8217;s capabilities to design the entire website, including the header and footer.<\/p><p>For now, you can already use the menu widget to customize your <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/features\/landing-page-builder\/\"   title=\"landing page\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"2327\">landing page<\/a>, home, or any other page&#8217;s menu. If you are a coder at heart, you can also use the embed feature of Elementor to implement the menu bar across the header of your site, no matter which theme you are using.\u00a0<\/p><p>You can also use one of the sticky menu plugins to make the Elementor Nav Menu widget sticky to the header \/ sidebar.<\/p><p><strong>How will the new Nav Menu improve your design workflow? We&#8217;d love to get your thoughts on the new widgets in the comments.<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Introducing the most expected feature of the year: the Menu Widget! Read on to find out how to design gorgeous menus on any theme and for every device. <\/p>\n","protected":false},"author":4,"featured_media":70777,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[15],"tags":[79,173],"marketing_persona":[],"marketing_intent":[],"class_list":["post-4560","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-new-features","tag-build","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Elementor Nav Menu: Powerful WordPress Menu Builder | Elementor Blog<\/title>\n<meta name=\"description\" content=\"Elementor Menu widget allows you to create professional menus in minutes, without having to edit CSS. Learn all about Elementor WordPress Menu Builder.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Menu Widget: The Most Powerful Menu Builder For WordPress\" \/>\n<meta property=\"og:description\" content=\"The Menu widget allows you to create stunning, professional menus in minutes, without having to edit CSS. Design every aspect of the menu visually, including the menu layout, spacing, pointers, animations, and other settings.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-12T14:27:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2017\/09\/nav-menu-cover.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Pines\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Introducing Menu Widget: The Most Powerful Menu Builder For WordPress\" \/>\n<meta name=\"twitter:description\" content=\"The Menu widget allows you to create stunning, professional menus in minutes, without having to edit CSS. Design every aspect of the menu visually, including the menu layout, spacing, pointers, animations, and other settings.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2017\/09\/nav-menu-cover.png\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Pines\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/\"},\"author\":{\"name\":\"Ben Pines\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\"},\"headline\":\"Elementor Nav Menu: The Most Powerful Menu Builder For WordPress\",\"datePublished\":\"2017-09-12T14:27:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/\"},\"wordCount\":1086,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/nav_menu.png\",\"keywords\":[\"Build\",\"Video\"],\"articleSection\":[\"New Features\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/\",\"url\":\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/\",\"name\":\"Elementor Nav Menu: Powerful WordPress Menu Builder | Elementor Blog\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/nav_menu.png\",\"datePublished\":\"2017-09-12T14:27:53+00:00\",\"description\":\"Elementor Menu widget allows you to create professional menus in minutes, without having to edit CSS. Learn all about Elementor WordPress Menu Builder.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/nav_menu.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/nav_menu.png\",\"width\":5000,\"height\":2626},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New Features\",\"item\":\"https:\/\/elementor.com\/blog\/category\/new-features\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Elementor Nav Menu: The Most Powerful Menu Builder For WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a\",\"name\":\"Ben Pines\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g\",\"caption\":\"Ben Pines\"},\"description\":\"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.\",\"sameAs\":[\"https:\/\/elementor.com\"],\"url\":\"https:\/\/elementor.com\/blog\/author\/ben-pines\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementor Nav Menu: Powerful WordPress Menu Builder | Elementor Blog","description":"Elementor Menu widget allows you to create professional menus in minutes, without having to edit CSS. Learn all about Elementor WordPress Menu Builder.","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:\/\/elementor.com\/blog\/introducing-nav-menu\/","og_locale":"en_US","og_type":"article","og_title":"Introducing Menu Widget: The Most Powerful Menu Builder For WordPress","og_description":"The Menu widget allows you to create stunning, professional menus in minutes, without having to edit CSS. Design every aspect of the menu visually, including the menu layout, spacing, pointers, animations, and other settings.","og_url":"https:\/\/elementor.com\/blog\/introducing-nav-menu\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2017-09-12T14:27:53+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2017\/09\/nav-menu-cover.png","type":"image\/png"}],"author":"Ben Pines","twitter_card":"summary_large_image","twitter_title":"Introducing Menu Widget: The Most Powerful Menu Builder For WordPress","twitter_description":"The Menu widget allows you to create stunning, professional menus in minutes, without having to edit CSS. Design every aspect of the menu visually, including the menu layout, spacing, pointers, animations, and other settings.","twitter_image":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/sites\/9\/2017\/09\/nav-menu-cover.png","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Ben Pines"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/introducing-nav-menu\/"},"author":{"name":"Ben Pines","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a"},"headline":"Elementor Nav Menu: The Most Powerful Menu Builder For WordPress","datePublished":"2017-09-12T14:27:53+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/introducing-nav-menu\/"},"wordCount":1086,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/nav_menu.png","keywords":["Build","Video"],"articleSection":["New Features"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/introducing-nav-menu\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/introducing-nav-menu\/","url":"https:\/\/elementor.com\/blog\/introducing-nav-menu\/","name":"Elementor Nav Menu: Powerful WordPress Menu Builder | Elementor Blog","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/nav_menu.png","datePublished":"2017-09-12T14:27:53+00:00","description":"Elementor Menu widget allows you to create professional menus in minutes, without having to edit CSS. Learn all about Elementor WordPress Menu Builder.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/introducing-nav-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/nav_menu.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2017\/09\/nav_menu.png","width":5000,"height":2626},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/introducing-nav-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"New Features","item":"https:\/\/elementor.com\/blog\/category\/new-features\/"},{"@type":"ListItem","position":3,"name":"Elementor Nav Menu: The Most Powerful Menu Builder For WordPress"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/c772e5251f765dce36a2b4989bad900a","name":"Ben Pines","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4635eef6208f12645017063c57db442067156b776efb0c13b3a26dfd96611e59?s=96&d=mm&r=g","caption":"Ben Pines"},"description":"Building websites seems like the dream job, and it is, but you have to know much more than technical skills. My mission at Elementor is to teach web creators how to build a successful business they love.","sameAs":["https:\/\/elementor.com"],"url":"https:\/\/elementor.com\/blog\/author\/ben-pines\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/4560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=4560"}],"version-history":[{"count":5,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/4560\/revisions"}],"predecessor-version":[{"id":93831,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/4560\/revisions\/93831"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/70777"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=4560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=4560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=4560"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=4560"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=4560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}