Insert button under ion-nav-bar? Ionic v1

ionic-v1
1

Here is app that I would like to replicate (design-wise)

image
IMG_0200.PNG640×1136 32.8 KB

There are lot of good examples on how to add left and right buttons but I want to add additional content under nav bar.

Idea would be to create nested tabs structure.

I edited the basic tabs codepen for my needs

2

Hi @KarlisJ

Try this structure of HTML for your desiring UI

<ion-view >
    <ion-nav-title>
        <div class="row">
            <div class="col"><h4>Activity</h4></div>
        </div>
    </ion-nav-title>
    <div class="bar bar-subheader">
        <div class="button-bar">
            <a class="button">Friends</a>
            <a class="button">NearBy</a>
            <a class="button">Groups</a>
        </div>
    </div>
    <ion-content ></ion-content>
</ion-view>

For exact syntax for that Button Bar please check it here in Doc

3

Thank you this is great start. Only You left out “has-subheader” class for content.

I tried to implement the rest of functionality but run into problems. Here is updated codepen could you look into it?

First thing is that I have a lot of repeated code whic his bad practice

Second thing is that I need somehow to set the landing substate (Friends)

I could do that by calling that state but I also need the parent state histary(in codepen home state which`s title is activity).