How to add CSS class to Navigation menu

[kasu_praveen]

I would like to add CSS class to specific navigation menu elements (Not with Javascript, only by modifying navigation XML). In the example below, only to third element.

<nav>    
    <collection label="Views">  
        <view name="first view"  default='true'/>
        <view name="second view"/>
        <a href="third view">third view</a>
    </collection>
</nav>

I understood that we can give "a" tag also inside navigation menu. (ref: http://splunk-base.splunk.com/answers/71921/how-to-get-custom-name-in-navigation-menu).

But If I try to give "<a href="third view" class="myclass">third view</a>", then I am not seeing "class="myclass"" in DOM. Why class attribute is not rendering?

[Drainy]

That other q&a only talks about anchor tags being carried through.

If you want to add a class I'd do it with something like (Where Search is the displayed name of the dashboard I'm referencing);

$("li a:contains('Search')").addClass('myClassName');

Wrap that in a document ready statement, plonk it in application.js for your application and restart (if you just created the .js).

[kasu_praveen]

Ok, Thanks Drainy. I will think of some other way.

[Drainy]

Sadly you can't do this, the reason anchors are passed through is so you can add links to other tools or resources. Adding classes isn't something that is supported without doing it through a bit of JS

[kasu_praveen]

Thanks for the quick response Drainy.

I was actually looking for adding class in navigation XML itself. Reason behind that is, Imagine,If my anchor element has class like "myclass", then I want to act on the element, something like below

$(li a.myclass).text("blah blah");

In the above line, I was modifying text of anchor link, which is having class "myclass". And in my case ":contains" may not workout, because most of my links contains same text.

So I would like to differentiate anchor links/navigation links based on class name.