topic Re: How to add CSS class to Navigation menu in Dashboards & Visualizations

How to add CSS class to Navigation menu

kasu_praveen — Tue, 11 Jun 2013 06:25:43 GMT

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?

Re: How to add CSS class to Navigation menu

Drainy — Tue, 11 Jun 2013 07:53:10 GMT

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).

Re: How to add CSS class to Navigation menu

kasu_praveen — Tue, 11 Jun 2013 08:02:55 GMT

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.

Re: How to add CSS class to Navigation menu

Drainy — Tue, 11 Jun 2013 10:52:17 GMT

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

Re: How to add CSS class to Navigation menu

kasu_praveen — Tue, 11 Jun 2013 11:47:03 GMT

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