Do you want to create a WordPress menu and don’t know where to start?
This article will shine a light on the types of menus available and also the methods at your disposal to build such menus.
But, first things, first:
What can you include in WordPress menus?
- Pages. You can add here services pages, the “contact us” page, the blog listing, and more.
- Posts. This refers to your blog articles.
- Custom links. You can link to external pages, to social media profiles but you can also create anchor-based menus, for single page websites. This means that the moment you select a menu item, you’d be directed to that specific page section.
This is how we organized our very own WordPress website.
- Blog categories
Types of WordPress menus
Definitely, the horizontal menu is the most popular one, and on mobile, we all recognize hamburger menus, but what other options are out there?
See below.
- Horizontal WordPress menus
The most common navigation menu style is the horizontal text-based one. In this navigation menu, you have a list of your main page sites.
- Vertical WordPress menus
Rarely used, vertical WordPress menus can be positioned on the left or right-hand side. Their biggest downside is the fact that they use up important screen real estate.
- Hamburger menus
The hamburger menu or three-line menu is a common solution often seen on mobile devices, for responsive websites. When tapped, the traditional menu unfolds. This is a stylish and subtle menu design, that is sometimes used on desktop by minimalist websites. It seems that Amazon began to use it as well.
- Sticky WordPress menus
Sticky or fixed navigation means that the menu does not disappear when scrolling happens. A sticky menu is very trendy right now. I feel that they are improving user experience, by eliminating unnecessary scrolling back.
- Dropdown menus
When there are more pages that you want to showcase, and they can be considered subtopics of a larger topic, you can structure the menu in the dropdown format.
Let’s say we’re dealing with the website for an IT outsourcing. The menu could look like this: Services, Testimonials, Portfolio, About Us, Contact.
In our own case, we used a tiny dropdown menu for support documentation and contact.
We’ve covered the dropdown WordPress menus topic in this in-depth blog article.
- Mega-menu
The mega menus offer more than a dropdown menu and are often seen in e-commerce websites that have many options (they seem like dropdown menus inside other dropdown menus :)) ). Their downside is that they can be overwhelming. Always ask yourself if you really need such a menu, or some filtering options might be the right solution. Also, they can be truly tricky on mobile.
Now that you figured out your menu options, let’s build one. I’ve made a 4 methods list, pick your winner! If you are interested in a particular method you can jump straight to it by clicking on the title below.
- How to create WordPress menus in the Classic Editor in 4 steps
- How to create WordPress menus in the Customizer
- How to create WordPress sidebar and footer menus using widgets
- How to create WordPress menus via plugins
How to create WordPress menus in the Classic Editor in 3 steps
Step 1: Creating a simple WordPress menu in the Classic Editor
Go to the WordPress Dashboard -> Appearance, then select “Menus”.
Next, select “create a new menu”.
Now give it a name, and select “Create Menu”.
Step 2: Add items to the WordPress menu using the Classic Editor
If you haven’t previously created your WordPress pages, make sure to create them under WordPress Dashboard -> Pages-> Add New.
Next, all you have to do is add your desired pages, posts, blog categories to the newly created menu.
If you want to add new pages to an existing menu, you can select your menu from Edit Menus.
Step 3: Select menu location in the Classic Editor
My current Colibri theme supports 5 menu locations:
Most of the themes have similar options. Just assign your menu to the place you want it to show up. Is it the header primary menu? Are you working on a footer menu?
Once you’ve selected your location, just hit “Save Changes” and go back to the “Edit Menus” section and hit “Save Menu”.
That’s it, you’re live!
Piece of cake, don’t you think?
How to create WordPress menus in the Customizer in 3 steps
Another menu for building a WordPress menu is to do it inside the WordPress Customizer or any other WordPress builder. Don’t forget, your options are limited by the theme you’re using.
Now, follow the steps below to create your WordPress menu.
In this particular example, I’m using the Colibri theme and Colibri Builder combo.
If you like more visual examples, check our tutorial below.
Step 1: Creating a simple WordPress menu in the WordPress Customizer
From the WordPress Dashboard head to Appearance -> Customize. From the left-hand side menu, select “Menus”.
Next, select “Create New Menu”.
In the new section you have to:
- Name your menu
- Select where to position the menu. Is it a page menu, a footer, or a header one?
After that, hit “Next”.
Step 2: Add links to your WordPress menu using the WordPress Customizer
Here comes the most interesting part: adding the pages to the WordPress menu.
For that, you need to select “Add items”.
A new menu will show up, with your options.
Once you’ve selected the items, it’s time for going live!
“Publish” is your go-to button now.
Step 3: Publish your menu
Now, “Publish” is your go-to button now.
You also have the option to save the menu to draft or schedule it for later.
Aaaand…you’re done.
Easy peasy this one as well.
One more cool thing about some WordPress builders.
You have the option to add ready-made components. Just after entering the Customizer, you’ll see a “+”. In the search bar that shows up, in the Components menu, type “menu”.
Just drag and drop your desired menu and start styling it!
How to create WordPress sidebar and footer menus using widgets
Sidebar and footer menus have different purposes.
In e-commerce websites, the left sidebar is usually used for filtering.
Blogs often use right sidebar menus, where they can include the most recent posts, social media icons, videos, and more.
In this blog section, I’ll explain how you can customize these areas.
Step 1: Go to the WordPress Widgets area
In the WordPress dashboard head to Appearance -> Widgets.
The widget options can differ from theme to theme.
On the left, you’ll see all your available widgets.
If these aren’t enough you can always install a plugin that will install new widgets for you.
Now, on the right side, you’ll see the areas you can customize, in this particular case we have more footer areas, a pages sidebar, and a sidebar widget area.
Step 2: Drag and drop your widgets to your widget area
Let’s say you want a banner on the right-hand side, to use for newsletter subscription.
What’s the widget you need? A subscription-related one. If your theme doesn’t have one, you’ll need to find a plugin.
Because we use Mailchimp as our newsletter sending tool, we installed the plugin that lets us integrate WordPress with Mailchimp. MC4WP is the name of the plugin.
Inside the plugin, we designed our form. We didn’t go for the built-in styles but used our own HTML code and styling.
The plugin made available the “Mailchimp Sign-up form” widget. All I had to do was to drag it to the Sidebar area and select my newsletter form.
When you look above you see the Colibri blog right sidebar. It contains the following widgets:
- Search bar
- Recent posts section
- Social media icons – deployed via a plugin as well
- Mailchimp Sign-Up form
- Custom HTML – we used this built-in widget to code a banner
How does this look like on the actual blog (just look a bit to your right 😜 👉).
If you want to have your primary menu on the right-hand side, you’ll have to create it as in the steps discussed in the section “How to create WordPress menus in the Classic Editor in 3 steps“.
Next, go to your widgets section and drag and drop the “Navigation Menu” widget to your sidebar.
Now it’s time to select your menu. 
Important: your changes go live in real-time.
The Navigation Menu widget can be added from the Customizer’s widget areas as well.
How to create WordPress menus via plugins
And we’ve got to our latest method of adding WordPress menus to your website.
One thing you need to remember: the more plugins you add, the slower the website will be.
Always ask yourself if that plugin is really needed.
The value added by these plugins consists in a lot more rich media and effects options that can help you create more eye-catching menus.
One of the most popular plugins out there is UberMenu.
Highly customizable, responsive menus can be built with UberMenu.
From dropdown, horizontal, vertical to mega menus, you can build them all.
Lots of triggers available, custom CSS can be added as well.
Now, you can always compare various menu plugins in wordpress.org. Just head to plugins, and type “menu” in the search bar. You will see many options, you can check the number of installs and reviews as well.
There are all sorts of WordPress menu plugins available. You want to build hamburger menus, there’s a plugin for that. Wanna have a sticky menu? There’s another plugin for that.
How to create sticky WordPress menus
If you’re lucky, your theme might support sticky menus.
If not, as I mentioned above, there’s always the option of using a plugin for your sticky WordPress menu.
But if you’re into CSS, you can easily write some tiny code under Appearance -> Customize -> Custom CSS.
Using the “Inspect element” you will have to identify the id of your menu.
Then, your code could look like this:
The most important lines that need to be added are the ones with z-index: 9999 & position:fixed. These are the ones that affect the stickiness.
The rest of the code affects only the styling in terms of color, alignment, borders, dimensions, etc.
Conclusions
It was a long one…don’t you think? But it was for the greater good: for you to understand the nitty-gritty of WordPress menus.
The story can continue with custom styling, but I’ll save this one for later.
Let’s wrap it all now. Today you’ve learned:
- What you can include in a WordPress menu: from pages and posts to custom links and categories.
- Which are the types of menus out there, so that you can make a more informed choice.
- How to build your WordPress menu using the Classic Editor, the Customizer, WordPress widgets, plugins.
- How to create sticky/floating menus
Now, if you liked this article, and you want to learn more about how to build a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!
You’ve been served 😉
[sibwp_form id=1]
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.
