How to Develop a Vertical Navigation Menu in WordPress

Are you seeking to produce a vertical navigation menu in WordPress?

In WordPress, navigation menus can be shown horizontally or vertically. Vertical menus offer you a range of positive aspects, such as fitting your website’s sidebar far better and currently being less difficult to navigate on cell units.

In this short article, we’ll exhibit you how to develop a vertical navigation menu in WordPress.

What Is a Navigation Menu?

A navigation menu is a list of links pointing to essential places of a internet site. They are usually introduced as a horizontal bar of inbound links at the prime of just about every website page on a WordPress internet site.

Navigation menus give your web page composition and assist people come across what they are hunting for. You can insert backlinks to your most crucial web pages, classes or subjects, WordPress blog site posts, and even personalized links these types of as your social media profile.

But even though you generally see them positioned horizontally at the prime of a internet site, vertical navigation menus have a lot of employs and benefits.

With that remaining claimed, let’s acquire a search at a variety of means to make a vertical navigation menu in WordPress. Below are the subjects we’ll address in this post:

When you include a navigation menu to your web page, it will be exhibited either vertically or horizontally. This relies upon on your concept, as perfectly as the menu area you pick.

The selection of menu places that are accessible depends on the topic you are applying. You may well obtain that some of these destinations exhibit the menu vertically.

To take a look at this with your topic, you want to navigate to Visual appearance » Menus. Right here you can experiment to see which spots are offered on your web-site and how they are displayed.

For instance, the 20 20-One concept doesn’t provide any vertical spots, while the 20 20 topic offers one particular, referred to as ‘Desktop Expanded Menu’.

You can merely find the menu that you desire to exhibit vertically, and then check out the ‘Desktop Expanded Menu’ box at the base of the display. Immediately after that, you must make sure to click the ‘Save Menu’ button to retail outlet your configurations.

This is how it appears on our demo website.

For extra information and facts on modifying menus and menu locations, you can see our beginner’s information on how to increase a navigation menu in WordPress.

No make a difference what concept you’re applying, it’s effortless to include a vertical navigation menu to the sidebar making use of a widget.

1st, you’ll will need to develop a navigation menu that you want to exhibit, if you have not presently.

Then you need to have to navigate to Look » Widgets. From in this article, basically click the blue ‘+’ block inserter button identified at the prime of the page, and drag the Navigation Menu block onto the sidebar.

Soon after that, you can give the widget a identify and choose the menu you desire to exhibit from the fall down menu.

Here’s how the vertical sidebar menu seems on our demo web page.

You can add a vertical navigation menu to posts and internet pages in a very similar way.

Initial, you will need to create a new submit or edit an existing 1. After that, you need to have to simply click the blue ‘+’ block inserter button at the top rated of the web site, and then drag the Navigation block onto the web page.

Future, you want to select which menu will be shown. Just click the ‘Select Menu’ button on the toolbar and pick out the ideal menu.

Eventually, you need to look at the block’s settings in the remaining hand pane. There you will find two buttons for the menu’s orientation. You will need to simply click the down arrow button to orient the menu vertically.

The new entire web page editor allows you to customise your WordPress themes using the block editor. It was unveiled in WordPress 5.9, and it enables you to incorporate different blocks to your templates to make a exclusive design and style.

Nevertheless, the complete web page editor is still in beta and restricted to unique themes that guidance it, such as the default Twenty Twenty-Two theme. For a lot more information, you can see our write-up on the greatest WordPress whole web site enhancing themes.

To increase a navigational menu employing the total web page editor, you require to go to Appearance » Editor from your WordPress dashboard. The moment you are in the editor, go ahead and click on on the navigational menu that seems at the major of the website header.

Subsequent, you will have to have to click on on the ‘Select Navigation’ button on the toolbar.

Now you’ll see unique possibilities to personalize the navigational menu on the panel on the appropriate. One of all those solutions is no matter if to show the menu with a horizontal or vertical orientation.

Simply simply click the Down arrow for vertical orientation to make a vertical menu.

For extra facts, see our guide on how to insert a navigation menu in WordPress

SeedProd is the greatest WordPress webpage builder and custom topic builder plugin on the current market. It allows you to easily build vertical menus anyplace on your WordPress web site.

The to start with matter you have to have to do is install and activate the SeedProd plugin. For additional specifics, see our action by step guide on how to put in a WordPress plugin.

On activation, you require to enter your license key. You can find this facts less than your account on the SeedProd web-site.

After that, you need to use SeedProd to build a custom made WordPress topic.

Producing a Tailor made WordPress Concept

You are going to come across the SeedProd theme builder by navigating to the SeedProd » Concept Builder site. Below, you are going to use 1 of SeedProd’s prepared-made themes as a starting up place. This will replace your existing WordPress concept with a new, custom layout.

You can do that by clicking the ‘Themes’ button.

You will be revealed a listing of skillfully made themes for distinct sorts of web-sites. For illustration, there are templates termed ‘Modern Business’, ‘Marketing Agency’, and ‘Mortgage Broker Theme’.

Take a search by means of the selections and decide on 1 that ideal matches your requirements by clicking the checkmark icon.

Once you have chosen a concept, SeedProd will generate all the concept templates you need. You can understand how to personalize these templates in our guideline on how to effortlessly produce a personalized WordPress theme.

Incorporating a Vertical Navigation Menu to Your Site’s Templates

Now you can use SeedProd to insert a vertical navigation menu to any of your concept templates. In this tutorial, we’ll include a menu to the site index template.

You have to have to hover your mouse above that template, and then click the ‘Edit Design’ backlink.

This will open up SeedProd’s drag and drop web site builder. You’ll see a preview of your web site on the appropriate, and a assortment of blocks you can add to your web site on the remaining.

You want to scroll down the blocks right until you occur to the Highly developed area.

As soon as you locate the Nav Menu block you ought to drag it on to your sidebar or anyplace that you want to display the navigation menu. By default, there is only one particular item in the menu, ‘About’.

Now you will will need to transform the menu’s configurations. To do that, you need to click on on the menu and the offered solutions will be exhibited in a pane on the remaining of the web page.

At the moment, the ‘Simple’ menu type is picked. This lets you to construct your very own navigation menu in SeedProd.

Even so, for this tutorial, we’ll click on the ‘WordPress Menu’ form to use the WordPress navigation menu in its place.

At last, you need to have to simply click on the ‘Advanced’ tab. In this article you’ll find an choice to orient the checklist structure vertically or horizontally.

When you click on on the ‘Vertical’ button you’ll recognize the preview quickly alter to a vertical navigation menu.

Do not ignore to click the ‘Save’ button at the top of the display screen to retail store your vertical menu.

It can be challenging to tap on a typical menu when employing the modest display screen of a smartphone. That’s why we recommend that you preview the cell model of your WordPress site to see how your internet site looks on cellular devices.

Vertical menus are a great deal less complicated to navigate, specifically when you use a fullscreen responsive menu that will automatically change to distinctive display screen sizes.

To discover how to make your navigation menu simpler to use on cell devices, see our guidebook on how to incorporate a fullscreen responsive menu in WordPress.

A dropdown menu seems like a standard horizontal navigation menu at the major of the display screen, but when you hover your mouse above one of the objects, a vertical submenu is exhibited.

If you have a internet site with a good deal of material, then a dropdown menu lets you to organize the menu composition by subject areas or hierarchy. This will exhibit a lot more content material in a confined space.

To display screen a dropdown navigation menu on your web-site, you will have to have to decide on a concept with dropdown menu support. Soon after that, you require to create the navigation menu, and then incorporate sub-things to some of the menu entries.

You can discover how to do that step by stage in our beginner’s guideline on how to produce a dropdown menu in WordPress.

A mega menu lists several menus vertically throughout the page. They are related to dropdown menus, besides all of the submenus are shown at as soon as, allowing for consumers to immediately and quickly locate your really best information.

Mega menus are remarkably engaging and interactive for the reason that they combine the greatest of horizontal and vertical menus to show a beneficial overview of your website’s contents on a solitary monitor.

We not long ago extra a mega menu to w3universities to boost material discoverability. We reveal how we did this in our at the rear of the scenes search at our new web page style.

You can learn a lot more in our guideline on how to add a mega menu to your WordPress web-site.

We hope this tutorial aided you learn how to make a vertical navigation menu in WordPress. You may perhaps also want to study how to get started your individual podcast, or verify out our expert comparison of the ideal area registrars.

If you appreciated this report, then make sure you subscribe to our YouTube Channel for WordPress online video tutorials. You can also uncover us on Twitter and Fb.