# How to use bootstrap tab/nav pills in kibana plugin Editor Panel

**URL:** <https://discuss.elastic.co/t/how-to-use-bootstrap-tab-nav-pills-in-kibana-plugin-editor-panel/70249>\
**Category:** Kibana\
**Created:** [December 30, 2016, 4:17am UTC](https://discuss.elastic.co/t/how-to-use-bootstrap-tab-nav-pills-in-kibana-plugin-editor-panel/70249 "2016-12-30T04:17:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![tarun\_kumar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tarun_kumar/32/65948_2.png) [@tarun\_kumar](https://discuss.elastic.co/u/tarun_kumar)\
**Post date:** [December 30, 2016, 4:17am UTC](https://discuss.elastic.co/t/how-to-use-bootstrap-tab-nav-pills-in-kibana-plugin-editor-panel/70249/1 "2016-12-30T04:17:37Z")

</div>

I am trying to make kibana plugin which would be having Editor Panel with two tabs similar to " **Data** & **Options** Tabs" in kibana default/core visualizations editor Panels and for that i am trying to use bootstrap nav-pills as

> **[W3Schools online HTML editor](https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pills_dynamic&stacked=h)**
>
> The W3Schools online code editor allows you to edit code and view the result in your browser

I have two divs in tab-content div as

```
<div class="container" style="width: 467px;">
  <ul class="nav nav-pills">
<li class="active" style="color:cornsilk;"><a data-toggle="pill" href="#esTab" style="color: #3BBEB1;" target="_">Source1</a></li>
<li style="color: cornsilk;"><a data-toggle="pill" href="#accumuloTab" style="color: #3BBEB1;">Source2</a></li>
  </ul>
  <div class="tab-content">
    <div id="esTab" class="tab-pane fade in active">
     esTanb
    </div>
        <div id="accumuloTab" class="tab-pane fade">
          <h3>Menu 2</h3>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
    </div>
  </div>

```

So, normally when one clicks on any of li in nav-pills ul, like Source1 or Source 2 ,UI switches to respective div in **tab-content div** as per id based href but in case of a kibana plugin when I Click on Source2 nav-pills/tab , kibana routes me first to ipAddress:5601/app/kibana#/accumuloTab then to ipAddress:5601/app/kibana#/discover default url.  
So, In case of kibana visualization plugins(not application plugins) ,how do i make sure my bootstrap tabs work correctly?

Editted :  
I have also tried kibana wiki suggestion regarding href to be used as kbn-href as below but no success which says :

> **[Considerations for basepath | Kibana Guide \[8.11\] | Elastic](https://www.elastic.co/guide/en/kibana/current/development-basepath.html)**

> Write the src or href urls as you would without the base path, but  
> then replace src or href with kbn-src or kbn-href.

---

<div class="post-metadata">

**Author:** ![shaunak](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/shaunak/32/6643_2.png) [@shaunak](https://discuss.elastic.co/u/shaunak)\
**Post date:** [December 30, 2016, 8:24pm UTC](https://discuss.elastic.co/t/how-to-use-bootstrap-tab-nav-pills-in-kibana-plugin-editor-panel/70249/2 "2016-12-30T20:24:24Z")

</div>

Hi @tarun_kumar,

When you use `href` or `ng-href`, you actually change the route of the page. Thats why you are getting routed to `ipAddress:5601/app/kibana#/accumuloTab`. Then, since Kibana's router doesn't understand this route, it is redirecting you to its default route, which happens to be `ipAddress:5601/app/kibana#/discover`.

Take a look at how "Data" and "Options" are accomplishing their switching:

![](https://us1.discourse-cdn.com/elastic/original/2X/5/5bebd39e843e23efe1e4aaab485b6ce3597a106d.gif)

In particular, note the use of [`ng-click`](https://docs.angularjs.org/api/ng/directive/ngClick) coupled with [`ng-class`](https://docs.angularjs.org/api/ng/directive/ngClass).

---

<div class="post-metadata">

**Author:** ![tarun\_kumar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tarun_kumar/32/65948_2.png) [@tarun\_kumar](https://discuss.elastic.co/u/tarun_kumar)\
**Post date:** [December 31, 2016, 4:27am UTC](https://discuss.elastic.co/t/how-to-use-bootstrap-tab-nav-pills-in-kibana-plugin-editor-panel/70249/3 "2016-12-31T04:27:12Z")

</div>

Thanks a lot shaunak sir for replying back.  
So,Is using our own locationRouter or stateRouter not possible for custom visualization?  
I thought i would use ng-hide/ng-show for last solution as that would need lot content on same page as the number of tabs would increase in my [case.so](http://case.so) it could have been better if i would have been able to use router and ng-view combination to show different template on request. But problem is i have only seen that done in case of kibana applications like kibi and timelion and haven't seen anyone's custom visualization plugin doing that.  
Thanks a lot once again.  
Tarun kumar

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [January 28, 2017, 4:27am UTC](https://discuss.elastic.co/t/how-to-use-bootstrap-tab-nav-pills-in-kibana-plugin-editor-panel/70249/4 "2017-01-28T04:27:25Z")

</div>

Closed on January 28, 2017, 4:27am UTC

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.