Website Menus And How They Are Used In WordPress

At the most basic level, a WordPress menu is a collection or list of links. The most common placement of a menu is in the site navigation area or navigation bar and is referred to as a navigation menu.

Each link in a menu is called a menu item. Some menu items may have sub-menu items that are displayed in a drop down menu.

• EXAMPLE: A basic website navigation menu may include menu items such as About, Services, Products, Testimonials, and Contact. The Services menu item may display a drop down menu, with the sub-menu items Private Consulting, Group Training, VIP Day.

Below you’ll see a site with a primary navigation menu, a secondary header menu, and a drop down menu of sub pages under the Assessments menu item.

WordPress menus can be used almost anywhere in a WordPress site.

In addition to your website navigation menu, you can display a WordPress menu in the header, in a sidebar, in the footer, or in any widgeted area.

• EXAMPLE: On a media page, you could add a menu of links in the sidebar to interviews, features, and videos.
• EXAMPLE: In a website footer, you could display a menu of links to your individual product or program sales pages.
• EXAMPLE: On a speaking page, you could add a menu to the sidebar that links to your SlideShare presentations, speaking videos, or reviews.

Why use a menu?

You may be reading this thinking, “Yeah, I get using a menu for my website navigation bar, but why use a menu elsewhere on my site? Why wouldn’t I just list the links?”

In a sidebar, footer, or other widgeted area, there is no editor available to help you add links, so listing links requires you either to write HTML code to create the links, or first create the list of links in a page and copy and paste the code into the widget. What a pain!

Menus make the process much easier!

WordPress menus allow you to quickly create a custom menu and easily add pages, posts, category archives, tag archives, author archives, or custom links.

On the menu screen, you can change the name and titles of any menu items without affecting its permalink (URL), and with its drag-and-drop functionality, you can change the order of the menu items, and create drop down menus. Plus, with the WordPress Custom Menu Widget, you can add a custom menu to any widgeted area on your website — all without having to touch any HTML!

Plus, custom CSS can be written for menus in the sidebar and footer to display them in a bulleted list class, to use icon fonts, images, or buttons, and to add hover effects.

Responsive Website Menus

Responsive web design — where a site is designed to respond to, resize, or adjust itself, based on user behavior and the viewing environment — requires additional design considerations for website menus. Forethought must be given to how the menus will be displayed as screen sizes get smaller (or larger is using a mobile first approach).

One of the most common mobile menu designs is to use the “Hamburger” — an icon displaying three short horizontal lines that represents a menu. When clicked, the hamburger icon expands downward to show the full website menu (as shown below). If multiple menus are used (as shown below), whether or not the menus will be combined and how that will work must be addressed.

What About You?

Did you know you could put WordPress Menus in your sidebar, footer, or other widgeted areas? Or is this a new concept? If you use menus on your site, what have you used menus for other than your website navigation? We would love to hear from you in the comments!