[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-np80tff’]
[sowmedia_posttemplates_heading tag=’h1′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” margin_sync=’true’ padding=’10’ color=” custom_font=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_markup=” av_uid=’av-k7q1bh6w’ custom_class=” admin_preview_bg=”][/sowmedia_posttemplates_heading]
It is incredibly important to have good navigation on your WordPress website. In this article, we’ll discuss the different types of main menus, and some navigation plugins you can use on your WordPress website.
We’ll look at the following types of navigation menus:
Some links in this article contain affiliate code.
[/av_one_full][av_one_full first min_height=” vertical_alignment=’av-align-top’ space=” margin=’0px’ margin_sync=’true’ padding=’0px’ padding_sync=’true’ border=” border_color=” radius=’0px’ radius_sync=’true’ background_color=” src=” attachment=” attachment_size=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” custom_class=’default-menu’ av_uid=’av-ned5qsb’]
[av_heading heading=’Default menu’ tag=’h2′ style=” size=” subheading_active=” subheading_size=’15’ padding=’10’ color=” custom_font=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-mw276fv’][/av_heading]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-290c2d7′]
A default main menu on a website simply consists of a row of buttons, for example ‘Home, Services, About us, Contact’. Essentially all WordPress themes support a default WordPress menu (except for some one-page themes). So, there’s no need to install any extra plugins for this navigation menu.
An example of a default menu
Horizontal or vertical menu?
A default menu can be placed either horizontally or vertically. Horizontal main menus are very common in WordPress themes, but if you want a really nice vertical menu, check out the free WordPress theme TwentyFifteen. Do you want the option to change from a horizontal to a vertical menu and back? Then it’s best to choose another theme. Don’t want to say goodbye to your beloved theme and still want a vertical menu? The plugins below are really worth giving a try:
[/av_textblock]
[/av_one_full]
[av_one_third first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-lvr44yj’]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-lh9zf5n’]
Slick Menu ($ 25)
[/av_textblock]
[av_image src=’https://www.wpupgrader.com/wp-content/uploads/2019/12/slick-vertical-wordpress-menu.jpg’ attachment=’23336′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’no-animation’ custom_class=” admin_preview_bg=” av_uid=’av-kqk7sjf’][/av_image]
[/av_one_third]
[av_one_third min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-kf7953v’]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-jvl2whn’]
Morph Flyout ($ 18)
[/av_textblock]
[av_image src=’https://www.wpupgrader.com/wp-content/uploads/2019/12/morph-vertical-wordpress-menu.jpg’ attachment=’23334′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’no-animation’ custom_class=” admin_preview_bg=” av_uid=’av-1xpp06z’][/av_image]
[/av_one_third]
[av_one_third min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-j28ts63′]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-ifiymgr’]
Superfly Menu ($ 25)
[/av_textblock]
[av_image src=’https://www.wpupgrader.com/wp-content/uploads/2019/12/slick-vertical-wordpress-menu.jpg’ attachment=’23336′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’no-animation’ custom_class=” admin_preview_bg=” av_uid=’av-i0yz0yj’][/av_image]
[/av_one_third]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-1r3ymcb’]
[av_heading heading=’Submenu’ tag=’h2′ style=” size=” subheading_active=” subheading_size=’15’ padding=’10’ color=” custom_font=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=’submenu’ admin_preview_bg=” av_uid=’av-h6qosaj’][/av_heading]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-go5lunv’]
A submenu is a menu that unfolds when you move your mouse over, or click on a main menu item. This gives you the possibility to include secondary menu items in your navigation menu that are not visible all the time. It keeps your main menu accessible and makes your layout more flexible. Plus, with WordPress you can create submenus for you website by just dragging and dropping.
Submenus are supported by almost all themes. Does your WordPress theme not support submenu? Below we’ll discuss a few plugins that can help you out.
[/av_textblock]
[av_heading heading=’Megamenu’ tag=’h2′ style=” size=” subheading_active=” subheading_size=’15’ padding=’10’ color=” custom_font=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=’megamenu’ admin_preview_bg=” av_uid=’av-gihgbbv’][/av_heading]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-g2qw82j’]
A default submenu consists of 1 column of items. A megamenu offers the possibility to divide items among several columns, sometimes even with titles over every column. Also, megamenus frequently provide additional display options for the unfolded spaces, like a piece of text, forms, images, video’s, Google Maps, etc. By using a megamenu, you’re giving visitors an attractive navigation.
Our three favorite WordPress plugins for megamenu functionalities are:
[/av_textblock]
[/av_one_full]
[av_one_third first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-fdiy6jf’]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-eupplx7′]
Ubermenu ($ 20)
[/av_textblock]
[av_image src=’https://www.wpupgrader.com/wp-content/uploads/2019/12/ubermenu-wordpress-1.jpg’ attachment=’23341′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’no-animation’ custom_class=” admin_preview_bg=” av_uid=’av-ekijl5n’][/av_image]
[/av_one_third]
[av_one_third min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-e6q27sr’]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-dn8y5tn’]
WP Mega Menu ($ 18)
[/av_textblock]
[av_image src=’https://www.wpupgrader.com/wp-content/uploads/2019/12/wp-mega-menu-pro.jpg’ attachment=’23329′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’no-animation’ custom_class=” admin_preview_bg=” av_uid=’av-d6qpexn’][/av_image]
[/av_one_third]
[av_one_third min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-cm99x23′]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-c0l7s9n’]
Hero Menu ($ 19)
[/av_textblock]
[av_image src=’https://www.wpupgrader.com/wp-content/uploads/2019/12/hero-wordpress-menu.jpg’ attachment=’23331′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’no-animation’ custom_class=” admin_preview_bg=” av_uid=’av-bjhu5ej’][/av_image]
[/av_one_third]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-bdihnwb’]
[av_heading heading=’Overlay menu / Full size menu’ tag=’h2′ style=” size=” subheading_active=” subheading_size=’15’ padding=’10’ color=” custom_font=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=’overlay-menu’ admin_preview_bg=” av_uid=’av-aycj663′][/av_heading]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-actexp7′]
An overlay menu is not immediately visible, but appears when you click on a menu icon. The menu then covers the entirety of the screen. In this, an overlay menu looks very much like a mobile menu (see below), but it is also meant for larger screens. An overlay menu is useful when you don’t want the menu to distract too much when looking at the website, and vice versa, when the website shouldn’t distract while selecting something from the menu. Also, at times an overlay menu is used to make sure the user experience is the same on all devices, whether you’re on a mobile phone or on a desktop computer.
The following three plugins offer overlay functionalities:
[/av_textblock]
[/av_one_full]
[av_one_third first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-9yrvry3′]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-9be7a1n’]
Jumbo ($ 18)
[/av_textblock]
[av_image src=’https://www.wpupgrader.com/wp-content/uploads/2019/12/jumbo-overlay-wordpress-menu.jpg’ attachment=’23332′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’no-animation’ custom_class=” admin_preview_bg=” av_uid=’av-8zf5g2j’][/av_image]
[/av_one_third]
[av_one_third min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-um64yj’]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-sfzx8b’]
DC Menu (free)
[/av_textblock]
[av_image src=’https://www.wpupgrader.com/wp-content/uploads/2019/12/dc-gratis-overlay-menu.jpg’ attachment=’23330′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’no-animation’ custom_class=” admin_preview_bg=” av_uid=’av-7opc6fv’][/av_image]
[/av_one_third]
[av_one_third min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-7cfkjkr’]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-6n4nc0r’]
Navi Menu ($ 18)
[/av_textblock]
[av_image src=’https://www.wpupgrader.com/wp-content/uploads/2019/12/navi-wordpress-overlay-menu.jpg’ attachment=’23335′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’no-animation’ custom_class=” admin_preview_bg=” av_uid=’av-66bg7ln’][/av_image]
[/av_one_third]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-5rcvhrv’]
[av_heading heading=’Mobile menu / Hamburger menu’ tag=’h2′ style=” size=” subheading_active=” subheading_size=’15’ padding=’10’ color=” custom_font=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=’mobile-menu’ admin_preview_bg=” av_uid=’av-5ebnrx7′][/av_heading]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-4qh8zx7′]
Obviously, your website should also (or especially!) work on mobile devices. Luckily, WordPress themes are almost all responsive, which means the screen width determines your website’s layout. Not only your website, but also your navigation menu should, of course, work properly on a mobile device. With the plugins below, you can make a separate design for your mobile menu and for larger screens (desktops and laptops). This may help improve the user experience, because you can give your mobile visitors just the menu items they need.
[/av_textblock]
[/av_one_full]
[av_one_third first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-46rx5sr’]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-3qr4exn’]
TapTap ($ 21)
[/av_textblock]
[av_image src=’https://www.wpupgrader.com/wp-content/uploads/2019/12/taptap-wordpress-mobiel-menu.jpg’ attachment=’23338′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’no-animation’ custom_class=” admin_preview_bg=” av_uid=’av-3d3zy0r’][/av_image]
[/av_one_third]
[av_one_third min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-2uoowyj’]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-2n65job’]
Mobi ($ 16)
[/av_textblock]
[av_image src=’https://www.wpupgrader.com/wp-content/uploads/2019/12/mobi-wordpress-menu.jpg’ attachment=’23333′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’no-animation’ custom_class=” admin_preview_bg=” av_uid=’av-27ixhej’][/av_image]
[/av_one_third]
[av_one_third min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-6h1k2j’]
[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_class=” admin_preview_bg=” av_uid=’av-14o1efv’]
Touchy ($ 20)
[/av_textblock]
[av_image src=’https://www.wpupgrader.com/wp-content/uploads/2019/12/touchy-wordpress-menu.jpg’ attachment=’23325′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’no-animation’ custom_class=” admin_preview_bg=” av_uid=’av-w7g1cr’][/av_image]
[/av_one_third]