Are you trying to create a vertical navigation menu in WordPress?
In WordPress, navigation menus may be displayed horizontally or vertically. Vertical menus provide a number of benefits, akin to becoming your web site’s sidebar higher and being simpler to navigate on cell units.
On this article, we’ll present you create a vertical navigation menu in WordPress.
What Is a Navigation Menu?
A navigation menu is an inventory of hyperlinks pointing to essential areas of a web site. They’re often introduced as a horizontal bar of hyperlinks on the prime of each web page on a WordPress web site.
Navigation menus give your website construction and assist guests discover what they’re in search of. You’ll be able to add hyperlinks to your most essential pages, classes or subjects, WordPress weblog posts, and even customized hyperlinks akin to your social media profile.
However whilst you typically see them positioned horizontally on the prime of a web site, vertical navigation menus have many makes use of and benefits.
With that being mentioned, let’s check out various methods to create a vertical navigation menu in WordPress. Listed here are the subjects we’ll cowl on this article:
- Strive Completely different Menu Show Places
- Including a Vertical Navigation Menu to the Sidebar
- Making a Vertical Navigation Menu on a Put up or Web page
- Including a Vertical Navigation Menu Utilizing the Full Web site Editor
- Making a Vertical Navigation Menu utilizing a Theme Builder Plugin
- Making a Responsive Vertical Navigation Menu for Cell Gadgets
- Making a Drop Down Menu in WordPress
- Making a Mega Menu in WordPress
Strive Completely different Menu Show Places
Once you add a navigation menu to your web site, it will likely be displayed both vertically or horizontally. This relies on your theme, in addition to the menu location you choose.
The variety of menu areas which might be obtainable relies on the theme you might be utilizing. Chances are you’ll discover that a few of these areas show the menu vertically.
To check this along with your theme, it’s worthwhile to navigate to Look » Menus. Right here you possibly can experiment to see which areas can be found in your web site and the way they’re displayed.
Notice: For those who see ‘Look » Editor (Beta)’ as an alternative of ‘Look » Menus’, then your theme has Full Web site Enhancing (FSE) enabled. You’ll have to seek advice from the Making a Vertical Navigation Menu Utilizing the Full Web site Editor part under.
For instance, the Twenty Twenty-One theme doesn’t provide any vertical areas, whereas the Twenty Twenty theme affords one, known as ‘Desktop Expanded Menu’.
You’ll be able to merely choose the menu that you simply want to show vertically, after which examine the ‘Desktop Expanded Menu’ field on the backside of the display. After that, you should ensure to click on the ‘Save Menu’ button to retailer your settings.
That is the way it seems to be on our demo web site.
For extra info on enhancing menus and menu areas, you possibly can see our newbie’s information on add a navigation menu in WordPress.
Including a Vertical Navigation Menu to the Sidebar
It doesn’t matter what theme you’re utilizing, it’s straightforward so as to add a vertical navigation menu to the sidebar utilizing a widget.
First, you’ll have to create a navigation menu that you simply wish to show, for those who haven’t already.
Then it’s worthwhile to navigate to Look » Widgets. From right here, merely click on the blue ‘+’ block inserter button discovered on the prime of the web page, and drag the Navigation Menu block onto the sidebar.
After that, you may give the widget a reputation and choose the menu you want to show from the drop down menu.
Right here’s how the vertical sidebar menu seems to be on our demo web site.
Making a Vertical Navigation Menu on a Put up or Web page
You’ll be able to add a vertical navigation menu to posts and pages in an identical approach.
First, it’s worthwhile to create a brand new put up or edit an current one. After that, it’s worthwhile to click on the blue ‘+’ block inserter button on the prime of the web page, after which drag the Navigation block onto the web page.
Subsequent, it’s worthwhile to select which menu will likely be displayed. Merely click on the ‘Choose Menu’ button on the toolbar and choose the specified menu.
Lastly, it’s worthwhile to take a look at the block’s settings within the left hand pane. There you can see two buttons for the menu’s orientation. You will want to click on the down arrow button to orient the menu vertically.
Including a Vertical Navigation Menu Utilizing the Full Web site Editor
The brand new full website editor lets you customise your WordPress themes utilizing the block editor. It was launched in WordPress 5.9, and it lets you add completely different blocks to your templates to create a novel design.
Nonetheless, the complete website editor continues to be in beta and restricted to particular themes that assist it, such because the default Twenty Twenty-Two theme. For extra particulars, you possibly can see our article on the greatest WordPress full website enhancing themes.
So as to add a navigational menu utilizing the complete website editor, it’s worthwhile to go to Look » Editor out of your WordPress dashboard. When you’re within the editor, go forward and click on on the navigational menu that seems on the prime of the web site header.
Subsequent, you’ll have to click on on the ‘Choose Navigation’ button on the toolbar.
Now you’ll see completely different choices to customise the navigational menu on the panel on the proper. A kind of choices is whether or not to show the menu with a horizontal or vertical orientation.
Merely click on the Down arrow for vertical orientation to create a vertical menu.
For extra info, see our information on add a navigation menu in WordPress
Making a Vertical Navigation Menu utilizing a Theme Builder Plugin
SeedProd is the greatest WordPress web page builder and customized theme builder plugin in the marketplace. It lets you simply create vertical menus wherever in your WordPress web site.
The very first thing it’s worthwhile to do is set up and activate the SeedProd plugin. For extra particulars, see our step-by-step information on set up a WordPress plugin.
Notice: There’s a free model of SeedProd that can will let you add a vertical navigation menu to particular person pages. However you’ll need the Professional model to entry the theme builder and add a menu to your theme’s templates.
Upon activation, it’s worthwhile to enter your license key. Yow will discover this info below your account on the SeedProd web site.
After that, it’s worthwhile to use SeedProd to create a customized WordPress theme.
Making a Customized WordPress Theme
You’ll discover the SeedProd theme builder by navigating to the SeedProd » Theme Builder web page. Right here, you’ll use one in all SeedProd’s ready-made themes as a place to begin. This may substitute your current WordPress theme with a brand new, customized design.
You are able to do that by clicking the ‘Themes’ button.
You’ll be proven an inventory of professionally designed themes for various kinds of web sites. For instance, there are templates known as ‘Trendy Enterprise’, ‘Advertising Company’, and ‘Mortgage Dealer Theme’.
Have a look by way of the choices and choose one which greatest matches your wants by clicking the checkmark icon.
Upon getting chosen a theme, SeedProd will generate all of the theme templates you want. You’ll be able to discover ways to customise these templates in our information on simply create a customized WordPress theme.
Including a Vertical Navigation Menu to Your Web site’s Templates
Now you need to use SeedProd so as to add a vertical navigation menu to any of your theme templates. On this tutorial, we’ll add a menu to the weblog index template.
You’ll want to hover your mouse over that template, after which click on the ‘Edit Design’ hyperlink.
This may open SeedProd’s drag and drop web page builder. You’ll see a preview of your web site on the proper, and a set of blocks you possibly can add to your website on the left.
You’ll want to scroll down the blocks till you come to the Superior part.
When you find the Nav Menu block it’s best to drag it onto your sidebar or wherever that you simply wish to show the navigation menu. By default, there is just one merchandise within the menu, ‘About’.
Now you’ll need to vary the menu’s settings. To try this, it’s worthwhile to click on on the menu and the obtainable choices will likely be displayed in a pane on the left of the web page.
At present, the ‘Easy’ menu sort is chosen. This lets you construct your personal navigation menu in SeedProd.
Nonetheless, for this tutorial, we’ll click on the ‘WordPress Menu’ sort to make use of the WordPress navigation menu as an alternative.
Lastly, it’s worthwhile to click on on the ‘Superior’ tab. Right here you’ll discover an choice to orient the checklist format vertically or horizontally.
Once you click on on the ‘Vertical’ button you’ll discover the preview instantly change to a vertical navigation menu.
Don’t overlook to click on the ‘Save’ button on the prime of the display to retailer your vertical menu.
Making a Responsive Vertical Navigation Menu for Cell Gadgets
It may be troublesome to faucet on a regular menu whereas utilizing the small display of a smartphone. That’s why we suggest that you simply preview the cell model of your WordPress website to see how your web site seems to be on cell units.
Vertical menus are a lot simpler to navigate, particularly while you use a fullscreen responsive menu that can routinely alter to completely different display sizes.
To discover ways to make your navigation menu simpler to make use of on cell units, see our information on add a fullscreen responsive menu in WordPress.
Making a Drop Down Menu in WordPress
A dropdown menu seems to be like a standard horizontal navigation menu on the prime of the display, however while you hover your mouse over one of many gadgets, a vertical submenu is displayed.
When you’ve got a web site with plenty of content material, then a dropdown menu lets you set up the menu construction by subjects or hierarchy. This may present extra content material in a restricted area.
To show a dropdown navigation menu in your web site, you’ll need to decide on a theme with dropdown menu assist. After that, it’s worthwhile to create the navigation menu, after which add sub-items to a number of the menu entries.
You’ll be able to discover ways to try this step-by-step in our newbie’s information on create a dropdown menu in WordPress.
Making a Mega Menu in WordPress
A mega menu lists a number of menus vertically throughout the web page. They’re just like dropdown menus, besides the entire submenus are displayed without delay, permitting customers to rapidly and simply discover your best possible content material.
Mega menus are extremely participating and interactive as a result of they mix one of the best of horizontal and vertical menus to point out a useful overview of your web site’s contents on a single display.
We not too long ago added a mega menu to WPBeginner to enhance content material discoverability. We clarify how we did this in our behind the scenes take a look at our new website design.
You’ll be able to be taught extra in our information on add a mega menu to your WordPress website.
We hope this tutorial helped you discover ways to create a vertical navigation menu in WordPress. You may additionally wish to be taught begin your personal podcast, or try our skilled comparability of one of the best area registrars.
For those who preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can too discover us on Twitter and Fb.
The put up How one can Create a Vertical Navigation Menu in WordPress first appeared on WPBeginner.
