How to add a title attribute to menu items?

support
1

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?

2

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

3

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

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

[menu]
  [[menu.main]]
    name = "Home"
    identifier = "home"
    url = "/"
    weight = 0
  [[menu.main]]
    name = "Category 1"
    identifier = "category1"
    url = "/category1"
    weight = 10
    post = "css-name1"
  [[menu.main]]
    name = "Category 2"
    identifier = "category2"
    url = "/category2"
    weight = 20
    post = "css-name2"
  [[menu.main]]
    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:

  [[menu.main]]
    name = "Category 3"
    identifier = "category3"
    url = "/category3"
    weight = 30
    [attributes]
      title = "The title text"
      class = "css-name3"
      target = "_blank"
4

@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?

5

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

6

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?

7

You should, but currently you cannot.

8

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