topic Re: How to change menu layout in Dashboards & Visualizations

How to change menu layout

ecoquelin — Mon, 28 Jan 2019 20:20:10 GMT

Dear all,

By default (7.2), Splunk displays menu in the app bar.

I wish I could configure this menu. I know many options are already available using XML but I want to go deeper. For example, I would like my menu to appear on a side vertical bar i/o a horizontal bar (as we are all used to). I wish the navigation flow could be different (like this one : https://semantic-ui.com/modules/sidebar.html)

Even if applying some CSS may help, I am looking for a clean solution. I have been through the AppBar.js file provided by Splunk but it looks like it is not recommended to modify it (and there are no clean solution to do so)

If I had any JS function with which I could retreive the list of navigation items, I could generate my own HTML with my own javascript behavior. The only reachable entry point is the REST API to get application navigation configuration but it is XML... http://<host>:<port>/servicesNS/<user>/<app>/data/ui/nav

Can you help ?

Re: How to change menu layout

niyaz006 — Fri, 21 Jun 2019 01:18:26 GMT

Hey, am having the same issue. Did you happen to do it?

Re: How to change menu layout

paramagurukarth — Fri, 21 Jun 2019 07:24:22 GMT

Hi Splunk doesn't provide any such options,

If you just want the left nav bar in your dashboards means you can simple add this styles to your dashboard.css file inside /appserver/static of your application

Note: Tried in splunk version 6.4.5. You may have to change the class names in CSS selectors for your versions

/*Selector for top nav bar */
.navbar-splunkbar.shared-splunkbar {
    position: fixed;
    top: 0px;
    width: 100vw;
    z-index: 1;
}
/* Selector for App Nav bar */
.app-bar.shared-appbar {
    position: fixed;
    width: 200px;
    height: 100vh;
    top: 25px;
}
/* Selct for app logo inside nave bar */
h2.app-name.pull-right {
    position: fixed;
    bottom: 10px;
}
/* select individual item in nav */
.app-bar.shared-appbar li.nav-item.shared-appbar-navitem {
    width: 100% !important;
}

/* Main Section boy */
.main-section-body, .dashboard-body{
  margin-left: 200px !important;
  margin-top: 25px !important;
}

dashboard.css will be loaded only to your dashboards..
If you want to apply this style to all your splunk pages like search/dashboards/alerts/etc.. you have to create corresponding custom manager xml (search.xml, reports.xml, alerts.xml...etc) with custom templates