WordPress comes with easy to use menu functionality, which lets you quickly create any menus and place them in your menu areas.

What is a site menu?

Generally speaking, a menu is a digital index and online compass that guides the user around a website helping them discover what they’re looking for with ease.

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

Every single link in a menu is called a menu item, and some menu items may have sub-menu items that are displayed in a drop-down or mega-menu.

Defining a menu

Follow the steps below to define a menu before being able to add any items to it:

create-new-menu
Defining a menu in WordPress admin area
  1. Log into your WordPress website and navigate to Appearance » Menus.
  2. Click on the Create a new menu link at the top of the page.
  3. Enter a name for your new menu in the Menu Name box.
  4. Click the Create Menu button.

Adding items to a menu

You can add different link types into your menu, these are split between panes left of the menu you’re currently editing.

adding-items-to-menu
Add items and link types into your site menu
  1. Locate the pane entitled Pages.
  2. Within this pane, select the View All link to bring up a list of all the currently published Pages on your site.
  3. Select the Pages that you want to add by clicking the checkbox next to each Page’s title.
  4. Click the Add to Menu button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.
  5. Click the Save Menu button once you’ve added all the menu items you want.

The Screen Options allow you to choose which items you can use to add to a menu since certain items, such as Tags, are hidden by default.

Deleting a menu item

deleting-items-to-menu
Deleting a menu item from your site menu
  1. Locate the menu item that you want to remove in the menu editor window.
  2. Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.
  3. Click on the Remove link. The menu item or box will be immediately removed.
  4. Click the Save Menu button to save your changes.

Customizing menu items

Some of the items shown above might be hidden by default. Use Screen Options to show the needed fields:

customizing-menu-item
Customizing a single menu item
  • Navigation Label — This field specifies the title of the item on your custom menu.
    • This is what your visitors will see when they visit your site.
  • Title Attribute — This field specifies the Alternative (Alt) text for the menu item.
    • This text will be displayed when a user’s mouse hovers over a menu item.
  • Link Target — Check this option if you wish to open it in a new tab.
  • CSS Classes — Optional CSS Classes for this menu item.
  • Link Relationship (XFN) — Automatically generates XFN attributes and enables you to show how you are related to the owner(s) of the site to which you are linking.
  • Description — Description for this link.

Creating multi-level menus

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document.

WordPress menu editor allows you to create multi-level menus using a simple drag and drop interface. Once an item is added to a menu, those menu items can be rearranged to create sub-menu items.

To create a drop-down menu, drag a menu item slightly to the right of the menu item above it to create a sub-item (parent/child) relationship in the menu.

creating-multi-level-menu-items
Creating multi-level menus using a simple drag and drop interface
  1. Position your mouse over a child menu item.
  2. While holding the left mouse button down, drag it to the right.
  3. Release the mouse button.
  4. Repeat these steps for each sub-menu item.
  5. Click the Save Menu button to save your changes.

You can also click the down arrow to reveal more information and there click the Up one, Down one, Under item above it, and To the top.

Assigning menu to a location

While creating or editing your menu, you can assign its location at the bottom of the menu editor window.

Also, Manage Locations tab is where you can assign all locations a menu from one screen.

assign-menu-location
Assigning a menu to a location
  1. Scroll to the bottom of the menu editor window.
  2. In the section titled Display locations, click the check box for the location where you want your menu to appear.
  3. Click the Save Menu button to save your changes.
conj-menu-locations
CONJ theme’s menu locations

CONJ includes 4 menu location options, by default:

  • Primary Menu: Used for the primary navigation bar in the header area.
  • Social Menu: Used to display social network icons on your site.
  • Secondary Menu: Used to display quick links on your site.
  • Push Menu: Used for mobile menu only.

Last updated: 3 months ago

We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies ― Learn more

Accept