Search Bar appear on search button click and drop down menu


I design a ion-navbar with 4 buttons and the last button is for search .I now want when cearch button clicked then a ion-searchbar appear over other icons and perform search operations after complete back to previous stage .also there are a more button I want drop down when its clicked . bellow is my code

<ion-navbar *navbar hideBackButton>
    <button menuToggle>
        <ion-icon name="menu"></ion-icon>
    <!--<ion-title>Category List</ion-title>-->
        <ion-segment-button class="segment-button segment-activated" role="button" tappable="" value="puppies" aria-pressed="true">
            <ion-icon name="globe"></ion-icon>

        <ion-segment-button class="segment-button" role="button" tappable="" value="kittens" aria-pressed="false">
            <ion-icon name="logo-android"></ion-icon>

        <ion-segment-button class="segment-button" role="button" tappable="" value="ducklings" aria-pressed="false">
            <ion-icon name="logo-apple"></ion-icon>

    <ion-buttons end>
            <ion-icon name="search"></ion-icon>
    <ion-buttons end>
            <ion-icon name="md-more"></ion-icon>


please help me to do this.

Material Design Menu in ionic 2

Right now this is a bit out of scope for both ionic2 and angular2. Angular’s animation isn’t fully ready to be used, and thats something that could be used in a situation like this.

So for now I’d say hold off on this for a bit. Though nice concept!


Hi @mhartington I post a new Topic which is related to this topic ,can you please look into this once .


Hi all
can any body put some light on this?