Dashboards & Visualizations

How to add CSS class to Navigation menu

kasu_praveen
Communicator

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?

Tags (4)
0 Karma

Drainy
Champion

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
Communicator

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

0 Karma

Drainy
Champion

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

0 Karma

kasu_praveen
Communicator

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.

0 Karma
Register for .conf21 Now! Go Vegas or Go Virtual!

How will you .conf21? You decide! Go in-person in Las Vegas, 10/18-10/21, or go online with .conf21 Virtual, 10/19-10/20.