Navigation menus

With Pinegrow, you can edit any type of HTML template and convert it into a WordPress theme. However, in this post, we will focus on pages created with Bootstrap, Foundation and Materialize CSS as these frameworks are included with Pinegrow. We will also talk about getting Webflow menus to work in WordPress.

Technical facts

In WordPress, when you create a menu, the standard HTML output looks like the following:

While with Bootstrap for example (the code would be a bit different with Foundation, Materialize CSS…), a similar menu output would looks like this:

Using a Custom menu walker is the official WordPress approach for customizing the menu output. The good news is that Pinegrow can take care of that for you!

From your HTML template to a real WordPress Navigation Menu

In Pinegrow (>=v2.2.1), there are 2 navigation menu types available which allow you to easily convert your HTML menu layout to real WordPress Navigation Menu.

The Bootstrap menu type

This menu type can be used to output WordPress menu in a standard Bootstrap 3 navigation style.

Note: The Bootstrap menu type is based on https://github.com/twittem/wp-bootstrap-navwalker

One of the most noticeable functionality change in Bootstrap 3.0.0+ is that it only supports a single dropdown level. The Bootstrap menu type is intended to implement the Bootstrap 3.0 menu structure without adding additional features, so additional dropdown levels are not supported.

The Smart menu type

This menu type allows you to quickly convert any Foundation, Materialize CSS, Webflow or custom HTML navigation menu into a fully-featured WordPress menu.

When using the Smart menu, Pinegrow automatically detects the layout of the menu from your template and output the WordPress menu with the same layout.

With Smart menu selected, you can also set the current item class property of your Nav menu to a specific class of your choice. This will assign the class to the currently selected menu item. (For example, active class for Foundation and Materialize.css and w–current for Webflow)

Currently, Smart menu only work with single level menus (without nested sub-menus). The first child element is taken as the template for all menu items and the menu item template must include a link element, either as top element or descendant.

Note: The Pinegrow WordPress SmartMenu Walker is freely available on Github https://github.com/matjaztrontelj/PinegrowWordPressSmartMenuWalker and you are free to use it in any WordPress related project and also to contribute to the project. (GPL 2.0)

Now, let’s take a look at how to build menus for various frameworks:

Bootstrap

In your Bootstrap HTML template, add the Nav menu action to your Navbar section, then set the Menu type of the Nav menu action to Bootstrap. That’s it!

Here is the PHP Preview of the code generated by Pinegrow:

Foundation

In your Foundation HTML template, add the Nav menu action to your Top bar list, then set the Menu type of the Nav menu action to Smart.

Then, set Smart menu current item class property of the Nav menu action to “active”. This will assign the Foundation class “active” to the currently selected menu item.

Here is the PHP Preview of the code generated by Pinegrow:

Materialize CSS

In your Materialize CSS HTML template, add the Nav menu action to your Navbar List, then set the Menu type of the Nav menu action to Smart.

Then, set Smart menu current item class property of the Nav menu action to “active”. This will assign the Materialize CSS class “active” to the currently selected menu item.

Here is the PHP Preview of the code generated by Pinegrow:

Webflow

In your Webflow HTML template, add the Nav menu action to your Nav section, then set the Menu type of the Nav menu action to Smart.

Then, set Smart menu current item class property of the Nav menu action to “w–current”. This will assign the Webflow class “w–current” to the currently selected menu item.

Here is the PHP Preview of the code generated by Pinegrow:

When your menu is configured, don’t forget to use WordPress -> Export the theme to add resources needed by bootstrap or smart menu to your theme.

Navigation Menus Settings

Let’s have a quick look at all the settings available for the Nav menu action:

• Menu: The menu that you want to target. (id, slug, name)
• Menu type: Select Bootstrap or Smart menu depending of your HTML template.
• Menu class: The class that is applied to the ul element which encloses the menu items. Multiple classes can be separated with spaces.
• Menu id: The ID that is applied to the ul element which encloses the menu items.
• Container: Whether to wrap the ul, and what to wrap it with. Allowed tags are div and nav.
• Container id: The ID that is applied to the container.
• Before: Output text before the link tag.
• After: Output text after the link tag.
• Link before: Output text before the link text.
• Link after: Output text after the link text.
• Depth: How many levels of the hierarchy are to be included where 0 means all. -1 displays links at any depth and arranges them in a single, flat list.
• Theme location: The location in the theme to be used. In a theme generated by Pinegrow, by default, you can use Primary Menu and Social Links Menu.
• Fallback: If the menu doesn’t exist, the fallback function to use.
• Walker: Custom walker object to use. (note: Bootstrap and Smart types are “custom walkers” included in Pinegrow. If you already use a walker which is fine for your needs or if you plan to create one, you can use it here.)

Reference: https://codex.wordpress.org/Function_Reference/wp_nav_menu

Now, with a bit of CSS knowledge and some good design ideas, you are ready to create beautiful and efficient WordPress Navigation Menus!

If you want to show us your beautiful WordPress Navigation menus created with Pinegrow, feel free to join the #slack community.

Last updated on December 1, 2015 at 1:30 pm

Print this article