Looking for Pinegrow V4 Documentation?

Visit our new documentation site

  • Features
  • Documentation
  • Forum
  • Blog
  • Download
Back

Navigation menus

Categories: WordPress

Creating a menu is one of less pleasant parts of WordPress theme development and this is probably one of the reason why the business of plugins related to menus is flourishing.

With Pinegrow, you can now easily create customised navigation menus by yourself – that’s also much more rewarding!

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:

bootstrap_menu_code

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

nav_menu_bootstrap

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

nav_menu_smart

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)

smart_menu_current_item_class

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:

bootstrap_menu_php_preview

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:

webflow_PHP_code_preview

 

 

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

Find this document useful ? Share it !
  • Contents

    • Technical facts
    • From your HTML template to a real WordPress Navigation Menu
    • Bootstrap
    • Foundation
    • Materialize CSS
    • Webflow
    • Navigation Menus Settings
Back to Top
  • Recent Articles

    • How to change your Pinegrow subscription plan
    • How-to Renew your license to continue getting Pinegrow updates & Major upgrades
    • How to Cancel your Pinegrow subscription
    • Color the Boxes
    • Pinegrow + Atom = The Perfect IDE for the Web
    • About charging sales tax on Pinegrow purchases
    • How to Try Pinegrow for free for 7 days ?
    • Use the right jQuery version in your WordPress themes projects with Bootstrap V3.3.x
    • Countdown to Pinegrow 3.0 – A New Feature Presented Every Week
    • Experience Feedback: The relaunch of Mr. Bürli
  • Beginner’s Guides

    • Beginner’s Guides
    • Getting started with Pinegrow
    • Getting Started with Pinegrow WP
  • Editing

    • Layout
    • Elements
    • Text
    • Code
    • Javascript
    • PHP, ASP, ERB
    • Editing with Atom Editor
    • Tips & Tricks
    • More …
  • Pro Features

    • Features Overview
    • Projects
    • Master Pages
    • Components
    • Editable areas
    • Libraries
    • Partials
    • CMS
  • Blocks

    • Components
    • Editable areas
    • Build your own Blocks
    • Bootstrap Blocks
    • Bootstrap Blocks for WP
  • Helpdesk

    • What Pinegrow is and isn’t
    • Troubleshooting
    • Support Forum
    • Release notes
    • Download older versions
    • Renew your License
    • Change your subscription plan
    • Cancel your Subscription
    • Contact Us
Pinegrow Web Editor © Humane technologies LLC, Poklukarjeva 22, 1000 Ljubljana, Slovenia