# Can I use ion-tabs without routing/states on a fixed page?

**URL:** <https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461>\
**Category:** ionic-v1\
**Created:** [July 29, 2015, 1:04pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461 "2015-07-29T13:04:19Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![dan2k3k4](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dan2k3k4/32/90653_2.png) [@dan2k3k4](https://forum.ionicframework.com/u/dan2k3k4)\
**Post date:** [July 29, 2015, 1:04pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/1 "2015-07-29T13:04:19Z")

</div>

I basically want to create some tabs that will be used on the same view/page.

I only want to switch/toggle between the tabs, hiding and showing the tab content, not routing to a new state and not changing the history either.

Is this possible?

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [July 29, 2015, 1:06pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/2 "2015-07-29T13:06:36Z")

</div>

put the content in the ion-tab-tag and go^^ (wrapped in ion-content i think)

---

<div class="post-metadata">

**Author:** ![dan2k3k4](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dan2k3k4/32/90653_2.png) [@dan2k3k4](https://forum.ionicframework.com/u/dan2k3k4)\
**Post date:** [July 29, 2015, 1:07pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/3 "2015-07-29T13:07:52Z")

</div>

This is what I have :

```
<ion-pane title="Pdf">
        <ion-tabs>
            <ion-tab ng-repeat="(key, tab) in vm.files" title="{{tab.title}}">
                <ion-content>
                    <ion-list>
                        <ion-item ng-repeat="file in tab.group | searchPdf:search">
                            <div class="center" ng-click="vm.load('{{vm.pdf}}' + file.link, '{{file.title}}')">
                                <img ng-src="{{vm.thumb}}{{file.image}}" class="center pdf-image">

                                <h2 style="padding-top: 1em;">{{file.title}}</h2>
                            </div>
                        </ion-item>
                    </ion-list>
                </ion-content>
            </ion-tab>
        </ion-tabs>
    </ion-pane>

```

But I just get empty `<ion-tab>`'s

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [July 29, 2015, 1:08pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/4 "2015-07-29T13:08:36Z")

</div>

and if you wrap an ion-view around the ion-content ?  
[http://play.ionic.io/app/1e1760830d5d](http://play.ionic.io/app/1e1760830d5d)

---

<div class="post-metadata">

**Author:** ![dan2k3k4](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dan2k3k4/32/90653_2.png) [@dan2k3k4](https://forum.ionicframework.com/u/dan2k3k4)\
**Post date:** [July 29, 2015, 1:12pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/6 "2015-07-29T13:12:42Z")

</div>

Well full pdf.html template is :

```
<ion-view view-title="Pdf {{vm.type.name}}" ng-controller="pdfController as vm">
    <ion-nav-title>
        <div class="row">
            <div class="col center {{vm.type.class}}">
                <img class="nav-title-image" ng-src="img/{{vm.type.image}}">
            </div>
        </div>
    </ion-nav-title>

    <div class="bar bar-subheader">
        <div class="col-10"></div>
        <div class="col">
            <div class="row">
                <div class="col-25">
                    <input type="number" min="1815" max="2015" placeholder="{{vm.search}}" ng-model="vm.searchModel" class="col">
                </div>
                <div class="col">
                    <button ng-if="vm.searchModel" class="button-icon ion-android-close" ng-click="vm.clearSearch()">
                    </button>
                </div>
            </div>
        </div>
    </div>

    <ion-pane title="Pdf">
        <ion-tabs>
            <ion-tab ng-repeat="(key, tab) in vm.files" title="{{tab.title}}" ng-click="vm.tab('{{key}}')">
                <ion-view>
                    <ion-content>
                        <ion-list>
                            <ion-item ng-repeat="file in tab.group | searchPdf:search">
                                <div class="center" ng-click="vm.load('{{vm.pdf}}' + file.link, '{{file.title}}')">
                                    <img ng-src="{{vm.thumb}}{{file.image}}" class="center pdf-image">

                                    <h2 style="padding-top: 1em;">{{file.title}}</h2>
                                </div>
                            </ion-item>
                        </ion-list>
                    </ion-content>
                </ion-view>
            </ion-tab>
        </ion-tabs>
    </ion-pane>
</ion-view>
```

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [July 29, 2015, 1:17pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/7 "2015-07-29T13:17:34Z")

</div>

> [@dan2k3k4](#):
>
> \<div class=“bar bar-subheader”\>

for your subheader use the directive ion-header-bar instead

i look into the other problem^^

---

<div class="post-metadata">

**Author:** ![dan2k3k4](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dan2k3k4/32/90653_2.png) [@dan2k3k4](https://forum.ionicframework.com/u/dan2k3k4)\
**Post date:** [July 29, 2015, 1:23pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/8 "2015-07-29T13:23:30Z")

</div>

Well I use already a header for the nav-bar :

```
<body ng-app="myApp">
    <ion-nav-bar class="bar-stable">
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

    <ion-footer-bar align-title="right" class="bar footer" ng-controller="footerController as vm">
        <h3>footer</h3>
    </ion-footer-bar>
</body>
</html>

```

Which seems to work, ion-header-bar would just override the header that I already have 😛

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [July 29, 2015, 1:25pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/9 "2015-07-29T13:25:27Z")

</div>

even if you add class=“bar-subheader” ?

```
<ion-header-bar class="bar-subheader"></ion-header-bar>
```

---

<div class="post-metadata">

**Author:** ![dan2k3k4](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dan2k3k4/32/90653_2.png) [@dan2k3k4](https://forum.ionicframework.com/u/dan2k3k4)\
**Post date:** [July 29, 2015, 1:27pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/10 "2015-07-29T13:27:47Z")

</div>

ah didn’t test with classes, works 🙂 thanks…

Still unsure about the tabs though

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [July 29, 2015, 1:31pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/11 "2015-07-29T13:31:43Z")

</div>

strange if i put and ion-nav-view around the ion-view in the ion-tab it shows the content correctly if i change the tabs but on the intial view the ion-tab goes not as it should^^

but as fallback use states for the tabs

---

<div class="post-metadata">

**Author:** ![dan2k3k4](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dan2k3k4/32/90653_2.png) [@dan2k3k4](https://forum.ionicframework.com/u/dan2k3k4)\
**Post date:** [July 29, 2015, 1:53pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/12 "2015-07-29T13:53:22Z")

</div>

Hmm well what if I use jQuery Tabs or something else instead? A custom angular tabs ? with just show/hide ?

---

<div class="post-metadata">

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\
**Post date:** [July 29, 2015, 1:58pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/13 "2015-07-29T13:58:47Z")

</div>

you could build it on your own:

1. set the ion-content to scroll=“false”
2. add your tab-bar with divs or something like this
3. add ion-scroll to scroll your “tab”-content
4. add the content you want to show to the ion-scroll and show/hide it with ng-show

---

<div class="post-metadata">

**Author:** ![menelik](https://avatars.discourse-cdn.com/v4/letter/m/a88e4f/32.png) [@menelik](https://forum.ionicframework.com/u/menelik)\
**Post date:** [July 30, 2015, 12:24pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/14 "2015-07-30T12:24:19Z")

</div>

I had the same request as you to show tabs in a view without further routing. After searching for serveral hours I found this solution which in my case works great:

in my view where i want to use the tabs i have the following markup:

```
<ion-view>
  <ion-nav-title>{{location.label}}</ion-nav-title>
  <ion-content class="bg-2">

<div class="main-nav">
    <ul >
        <li ng-repeat="tab in locationTabs"
            ng-class="{active:isActiveTab(tab.url)}"
            ng-click="onClickTab(tab)"><a>{{tab.title}}</a></li>
    </ul>
</div>
<div ng-include="currentTab"></div>

</ion-content>
</ion-view>

```

Then in my controller:

```
$scope.locationTabs = [{
    title: 'Info',
    url: 'templates/locations/sub-locations-info.html'
}, {
    title: 'Map',
    url: 'templates/locations/sub-locations-map.html'
}, {
    title: 'Events',
    url: 'templates/locations/sub-locations-events.html'
}, {
    title: 'Albums',
    url: 'templates/locations/sub-locations-albums.html'
}, {
    title: 'Videos',
    url: 'templates/locations/sub-locations-videos.html'
}];

$scope.currentTab = 'templates/locations/sub-locations-info.html';

$scope.onClickTab = function(tab) {
    $scope.currentTab = tab.url;
}

$scope.isActiveTab = function(tabUrl) {
    return tabUrl == $scope.currentTab;
}

```

and here is the css for my tabs:

```
/* Navigation Tabs */

.main-nav ul {

display : -webkit-flex;
  display : -ms-flexbox;
  display : flex;
  width : 100%;
  height : 43px;
  background-color: #fff;
  margin : 0 auto;
  width : 100%;
  white-space : nowrap;
  margin-bottom: 20px;
}

.main-nav ul li {
  -webkit-flex-grow : 1;
  -ms-flex-positive : 1;
  flex-grow : 1;
  -webkit-flex-shrink : 1;
  -ms-flex-negative : 1;
  flex-shrink : 1;
  -webkit-flex-basis : 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis : 100%;
  text-align : center;
  line-height : 43px;
  height : 43px;
  margin : 0;
  text-transform : uppercase;
  letter-spacing : .8px;
  border-bottom : 1px solid #ddd;

}

.main-nav ul li a, .main-nav ul li div {
  color : #444;
  font-size: 10px;
  display: block;
  width : 100%;
  height : 100%;
  font-family: latobold;
}

.main-nav ul li.active {
  border-bottom: 1px solid #3DD4CD;
}

```

here is an example content of the following file url: ‘templates/locations/sub-locations-info.html’

```
 <div class="padding-16 bg-2 ">
        <h4 class="contentTitle">{{location.label}}</h4>
        <p class="contentDescription">{{location.description}}</p>
      </div>
 <div class="height-4"></div>

```

here are the tabs in action:

![image](https://global.discourse-cdn.com/ionicframework/original/2X/2/245a6660434b492db6311e02c03bb7af55c87d96.jpg)

Please bear in mind i am an absolute beginner with ionic and javascript so there are probably better solutions for tabs but this works for me so far. there are no state transitions with this approach.

Hope it helps 😉

---

<div class="post-metadata">

**Author:** ![dan2k3k4](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dan2k3k4/32/90653_2.png) [@dan2k3k4](https://forum.ionicframework.com/u/dan2k3k4)\
**Post date:** [July 30, 2015, 12:40pm UTC](https://forum.ionicframework.com/t/can-i-use-ion-tabs-without-routing-states-on-a-fixed-page/29461/15 "2015-07-30T12:40:39Z")

</div>

I ended up doing:

```
<ion-content title="Pdf" scroll="false">
        <div id="tabs-wrapper" class="row">
            <div class="col-10"></div>
            <div class="tab-header col" ng-repeat="(key, tab) in vm.files" title="{{tab.title}}" ng-click="vm.tab('{{key}}')">
                {{tab.title}}
            </div>
            <div class="col-10"></div>
        </div>

        <div ng-repeat="(key, tab) in vm.files" id="tab{{key}}" class="tab-content">
            <ion-list id="list-{{key}}">
                <ion-item ng-repeat="file in tab.group">
                    <div class="center" ng-click="vm.load('{{vm.pdf}}' + file.link, '{{file.title}}')">
                        <img ng-src="{{vm.thumb}}{{file.image}}" class="center pdf-image">

                        <h2 style="padding-top: 1em;">{{file.title}}</h2>
                    </div>
                </ion-item>
            </ion-list>
        </div>
    </ion-content>

```

And with the tab function as :

```
        vm.tab = function(tabId) {
            $('.tab-content').hide();

            var container = $('#list-' + tabId + ' .list');
            var selector = $('#list-' + tabId + ' ion-item');
            
            $('#list-' + tabId).flipster({
                itemContainer: container,
                itemSelector: selector,
                style: 'carousel',
                start: 0
            });

            $('#tab' + tabId).show();
        };

```

Not the best solution, but simple and works