Tag Menu items based on their categories

Question

Suppose I have a site with this menu-structure:

food

• banana
• carrot
• apple
• lettuce

where the fruit-items belong to fruit and the vegetables belongs to vegetable. Now ultimately I’d like to colour the item’s appearance according to their categories. For that to work, it would suffice to add class=fruit to all members of fruit and the same correspondingly for the vegetables. How would I go about to do that?

Answer 1

From the WP-Admin.

Click on Appearance > Menus

In the top right, click "Screen Options"

Select (check) "CSS Classes"

Then you will have added the optional "CSS CLASSES" to each menu item.