Title Attribute For Menu Items in WordPress

Title Attribute For Menu Items WordPress

In this beginner article, we will go through the steps of adding title attribute in WordPress navigation menus.

Title attribute can be helpful to expand on the meaning of your navigation label and give your users more context to the link.

You can provide useful information such as what users can expect from following the link when users hover the link to see the title attribute.

Although WordPress has the option of adding title attribute for Menu items, it’s not visible by default and hidden behind some options.

We will start by looking at what title attribute means in WordPress Menu and go through the steps of adding title attributes for menu items.

I will also discuss if title attribute for Menu items or other general links are really necessary from different perspectives.

Title Attribute in WordPress Navigation Menus

To add items to your navigation menu, you give it a name. For example, Home, Contact, Blog etc.. We call this Navigation Label and it’s a label for a particular menu item.

And we can also add an attribute to be shown while hovering over the label and we call that as Title Attribute.

WordPress Codex defines these two terms in following way.

  • Navigation Label – The label for this particular menu item
  • Title Attribute – The attribute used when displaying the label

How to Add Title Attribute For Menu Items

You can configure menus item in WordPress navigation by adding additional properties including Link Target, Title Attribute, CSS Classes, and Link Relationship (XFN) Description.

By default, WordPress only shows Navigation Label and URL option (for Custom Links) for your Menu items.

Follow the steps below to see additional options and add the title attribute to a Menu item.

  1.  From your WordPress dashboard, go to your Menus page (Appearance > Menus)
  2. Select the Menu that you want to edit from the list of your Menus.
  3. Click on the configuration arrow on the right side of the Menu Item title, that when clicked opens the configuration box.
  4. Click on the “Screen Options” on top of the page to reveal additional advanced menu properties.
  5. Activate the option for Title Attribute by selecting the Title Attribute box to expose the settings box under the Menu item instantly.
  6. Add your Title Attribute in the text box just below the Navigation label option.

See the visual guide below with steps labelled using the numbers above.

Title Attribute For Menu Items WordPress

How easy is that?

It’s recommended that your Title Attribute should add valuable information to guide your visitors to the link.

Another thing to keep in mind is to avoid duplicating the information of Navigation label in the title attribute. Instead, offer some useful advisory information that helps users know what to expect from that link.

Are Title Attributes Necessary?

So, are title attributes necessary at all?

You can find arguments for both sides but one thing that most webmasters seem to agree is that it’s not important as before.

It might also be the reason why WordPress officially removed Title Attribute for links in the editor.

Here’re some perspectives to consider that can be helpful in deciding your stance about using title attributes.

User Experience Perspective

An authoritative voice in the user experience field, Nielsen Norman Group suggest link title attribute can be used to provide additional details useful for users using a cursor to hover on the link.

It means the title attribute can be helpful for users to predict where they are going.

They, however, warn that title attributes might not be necessary for every context – “if it is obvious from the link name and its surrounding context where the link will lead, then a tooltip will increase clutter and ultimately reduce usability.” This also suggests title attributes shouldn’t be used a replacement for good navigation label or link text itself.

The W3C recommendation defines the title attribute as an attribute that offers advisory information about the element for which it is set. It also has this example on what title attribute can mean for accessibility.

“For instance, visual browsers frequently display the title as a “tool tip” (a short message that appears when the pointing device pauses over an object).

Audio user agents may speak the title information in a similar context. For example, setting the attribute on a link allows user agents (visual and non-visual) to tell users about the nature of the linked resource:”

SEO Perspective

Title attributes for Menu items are also arguably considered good for SEO purposes. This again is highly debated as search engines move their focus away from keywords.

From my experience, I think adding title attributes in menu items influences the text in sitelinks that are automatically generated by Google.

Sitelinks for Pradeep Singh Website Google SEO

Image: Sitelink of my personal Pradeep Singh blog generated automatically by Google for a search term.

The official Google search console guide mentions using anchor text as an example of best practices to improve the quality of your sitelinks.

Sitelinks Webmasters Google

“For example, for your site's internal links, make sure you use anchor text and alt text that's informative, compact, and avoids repetition.”

Do you use title attributes on your WordPress blog? I would love to hear your experience, especially if it has any impact on SEO and user experience.

Pradeep Singh

Pradeep Singh

Pradeep Singh is the founder and your host here at WPism. He is an entrepreneur and blogger living his startup life based in London and Cambridge. Follow him on Twitter or like his page on Facebook.
Share on facebook
Share on twitter
Share on reddit
Share on linkedin
Share on email

3 Responses

  1. Its possible with WordPress menu. First of all I believe that you added the WordPress menu (Not just html menu.)

  2. hello,

    love to find this old article remains useful

    is it posible to give some css style to the title atribute, let say background color, color or other css style ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Join our list

Our Exclusive Deals

See our curated list of latest WordPress deals and discounts.
Top WordPress Deals

Share this post

Share on facebook
Share on twitter
Share on pinterest
Share on linkedin
Help us share this post with your network?
Share on facebook
Share on twitter
Share on linkedin
Share on email
Want to keep updated with WordPress?

Join our monthly newsletter to receive best curated WordPress resources.