Lately, we have included in our themes a new type of menu which is very popular these days – the column menu. A good example for this would be this:
We decided to do a small tutorial on how to create this type of menu, which is quite simple.
First step – create a new menu
We’ll need to navigate to Appearance -> Menus and create a new menu. There, we need to click the create new menu link, like shown below:
In the screenshot, you will find the menu already created. As you can see, we added Level 1 items called Column # which you can do by adding certain pages, or in our case – custom links. It’s not necessary to have any specific names here, name them as you wish. as you can see from the screenshot, we have 3 columns and 2 items in each column. You can have up to 4 menu columns. That was easy wasn’t it?
Showing the actual menu on page
The column menu is not shown using the menu element from the drag and drop builder unfortunately. These types of menus are usually set in footers that is mostly – widget territory. That is what we did – created a widget for this.
In order to add this widget, we need to go to Appearance -> Widgets and find the Column menu widget in the list. When found, just add it into the sidebar which you want to use. Note that you can create a custom sidebar if you want to. Once added, you will see the option to select the menu you created and the number of columns you want to show the menu in. Here is a screenshot of how this looks:
The rest, is quite simple. Showing a sidebar using the builder (or in the footer) is explained in this article.