How to add a title attribute to menu items?

In the menu I’d like to have a bit more verbose title attribute for some of the items.

I’m not using “Pre” or “Post” so I could hijack one of those like this: <a class="nav-menu--link" href="{{.URL}}" title="{{ or .Pre .Name }}">{{ .Name }}</a>, but I’d prefer to be able to simply define custom HTML attributes for menu items like class, target, data-.

Is it supported? Is this a good idea?

Why do you need to “hijack”? Just create the anchor (a class …) the way you want.

Perhaps I’m not explaining myself very well. Let me try again.

In my config.toml I’m declaring my menu items like this:

    name = "Home"
    identifier = "home"
    url = "/"
    weight = 0
    name = "Category 1"
    identifier = "category1"
    url = "/category1"
    weight = 10
    post = "css-name1"
    name = "Category 2"
    identifier = "category2"
    url = "/category2"
    weight = 20
    post = "css-name2"
    name = "Category 3"
    identifier = "category3"
    url = "/category3"
    weight = 30
    pre = "The title text"
    post = "css-name3"

As you can see, I’m using “pre” to define what I want to use in the title attribute, and “post” for which I want to use as the class attribute. If I also wanted to sometimes define a custom target attribute for example, I’d be out of luck.

How much nicer it would be if I could define something like an attributes collection which could be accessed randomly, like so:

    name = "Category 3"
    identifier = "category3"
    url = "/category3"
    weight = 30
      title = "The title text"
      class = "css-name3"
      target = "_blank"

@SandorHQ why would you set your menu items to target a new window/tab? Why not use the same value for name and title? If you’re defining all of this in your config, what’s the value-add for creating additional nesting within these params?

OK, I understand. The menu system has no concept of “attributes” so the pre/post is the current solution.

I might want to have a menu item which should open an affiliate link in a new window. For this I might want to use the target attribute on that menu item.

I might have some menu items with long text but I might want to display some well known abbreviations while also put the full name as a title. I also might want to store a short or a long name to be used for different viewport sizes/media queries.

I also might have some custom class names to use icons or custom coloring.

The gist is: why shouldn’t I have the ability to define as many custom data for a menu item I want?

You should, but currently you cannot.

A post was split to a new topic: How to add a class attribute to a menu item?