Grafana Custom App Sidebar customization


I am trying to create a Grafana App (in React, if that helps).
What I want to achieve is to customize the sidemenu for each organization.



In the above figure, I would like to add or remove pages. I know that if they are included in the plugin.json file, in the includes section, I am able to configure which ones to show or hide. But this would cause them to be “grafana-wide” configuration.

const { path, onNavChanged, meta } = this.props;
    let tabs: NavModelItem[] = [];

     * Home
      text: 'Home',
      url: path,
      id: 'home',
      icon: 'fa fa-fw fa-home',
      active: true,
      text: 'Teste', 
      url: 'someUrlHere', 
      id: 'teste', 
      icon: 'fa fa-fw fa-home', 
      active: true

     * Header
    const node = {
      subTitle: "Application",
      url: path,
      children: tabs,

     * Update the page header
      node: node,
      main: node,
      breadcrumbs: tabs,

I tried this but anything done here didn’t reflect anywhere that I noticed, especially the sidemenu/NavBar.

How would I be able to customize the NavBar Section of my own app plugin?

Hi! I don’t believe it’s possible to programmatically manage items in the side menu. I’ll forward your feedback to the team to let them know you’d be interested in something like this.

1 Like

That’s what I feared the most.

I will keep an eye on any grafana updates to see if this will be supported.

Thank you Marcus, appreciate your feedback.

1 Like