Add a class/id to each menu item

Kirby 2 Solved ✅
1

for a menu, i want a specified page as an cta / button. its looks like a buy button and its the product-page, with the paypal stuff and info.

how can i add – in addition to the active class that only adds once class, a unice class to each of my menu items?

2

You could just echo the page uid into the class attribute.

class="<?= $page->uid() ?>"

You are probably using it in a loop, so you will need to change $page to whatever you used in the loop.

3

Idea: you could use the slug of the page as a class that way you can have a unique class on each item.

4

The downside of using the UID is that it can usually be changed by the user. For such purposes I’d go for an attribute of the page that can’t be changed, e.g. an ID that you add to a readonly field or something like that. I usually use a field called pid (for permanent ID).

Or make sure that the user can’t change the UID, or use the template (if the user is not allowed to change the template).

5

You could probably use the file creation date too, would save adding fields to every page. I think this date would stay fixed.

6

If the page uses a specific template the intendedTemplate() can be used maybe. But I agree with you, if there are other users involved it’s better to have something hardcoded somewhere.

7

Hard to maintain, you don’t know what it refers to.

8

oh!.. sorry. of course!. thanks

i tried shortly with the autoid plugin. that nice – but the uid is fine!.

9

The AutoID plugin is a good way to do it, and this is the way I do these things, but be aware that that css classes cannot start with a number, or just be a number but they can contain one…

class="21product" // this is bad
class="21" // this is bad
class="product21" // this is good
class="prod21uct" // this is legal css but not recommended, for readability sake.

So if you echo the AutoID number out, you need to put something before it, some kind of prefix.

10

Using the AutoID has add additional advantages, especially if you are planning to refer to pages of your site in other pages, saves the hassle of having to update those links if the UID is renamed.