Can I put input elements in Nav-Bar?

ionic-v1
1

I want to put Search box in my navbar along with Logo. I have attached wireframe with this.
Is that at all possible ?

2

Go to the docs and search for “Header Inputs” http://ionicframework.com/docs/components/

3

Sorry - probably I didn’t articulate it properly. I am usu=ing nav-bar already with sidemenus connected to left and right buttons. That part is working well.
However in center I want to put a searchbox.
Below is my partial html -->

<view title="navTitle" hide-back-button="true"
      left-buttons="leftButtons" right-buttons="rightButtons"  hide-back-button="true">
    

<content has-header="true" has-footer="true" scroll="false">
    <slide-box   does-continue="true" slide-interval="2000" disable-scroll="false" on-slide-changed="slideChanged(index)">

        <slide ng-repeat="slider in sliding_banners">
            <img style="height: 200px" src="{{slider.link}}" data-ng-click="handle_tap(slider.href)"/>
        </slide>


    </slide-box>

</content>
<div class="bar bar-footer bar-calm" >
    <select>
        <option selected>Test User</option>
        <option>My Profile</option>
        <option>My Points</option>
        <option>Logout</option>
    </select>
</div>
</view>
4

Just playing devil’s advocate, but squeezing navigation elements AND search into a single bar seems like a difficult UX to pull off.

Maybe put search in a subheader and leave the nav-bar to navigation?

I don’t have an idea of how to accomplish both at the same time.

5

I agree with you … but before going back to business and changing requirement I wanted to check technically is there a limitation.
I also didn’t find a way -

6

The Twitter app is a nice example of the implementation. And it makes for a nice UX.

7

I was working on something similar and I think you can do this with the header input pretty easily. If you’re using this with a side menu directive, Just add the sample input header html to the top of a page and override the look and feel with your own custom css. Theres probably a better way than simply adding a header that might interfere with the existing navbar in the side menu directive but it works.

In my case, I have a search.html page and I added the following html to the top of the page. I use the class .bar-custom to change the color and underline the input field which is the typical android look.

HTML

<div class="bar bar-custom item-input-inset">
    <button menu-toggle="left" class="button button-icon icon ion-navicon">
    </button>
    <label class="item-input-wrapper">
        <i class="icon ion-search placeholder-icon"></i>
        <input ng-change="search()"
               ng-model="data.searchQuery" type="search"
               placeholder="Search Hashtags">
    </label>
    <button class="button button-clear">
        Cancel
    </button>
</div>

CSS

.bar-custom {
  background-color: #B72676;
  border-color: #872166;
  color: white;
}

.bar-custom .item-input-wrapper {
  border: 0px solid;
  border-radius: 0px;
  background-color: transparent;
  border-bottom: 1px solid;
}

.bar-custom .title,
.bar-custom .button,
.bar-custom i,
.bar-custom input {
  color: white;
}
8

I came across this questions and ended finding a solution for my case, so I created a Pen to share with other folks that would have the same issue.

I am not using the nav bar properly, but in case you need one main page with a search bar + a side bar, that works just fine.

menu.html

      <ion-side-menus>
        <ion-side-menu-content >
          <ion-nav-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content>
        <ion-side-menu side="left">
          <ion-header-bar class="bar-assertive">
            <h1 class="title">Menu</h1>
          </ion-header-bar>
          <ion-content>
            <ion-list>
              <a menu-close class="item item-icon-left" href="#">
                <i class="icon ion-gear-b"></i>
                Settings
              </a>
              <a menu-close class="item item-icon-left" href="#">
                <i class="icon ion-ios-information-outline"></i>
                About
              </a>
            </ion-list>
          </ion-content>
        </ion-side-menu>
      </ion-side-menus>

home.html

      <ion-view>
        <ion-header-bar class="bar-assertive item-input-inset">
          <button class="button button-icon ion-android-menu" ng-click="toggleSideMenu()">
          </button>
          <label class="item-input-wrapper">
            <i class="icon ion-ios-search placeholder-icon"></i>
            <input type="search" placeholder="Buscar ofertas, lugares, etc">
          </label>
        </ion-header-bar>
      </ion-view>

app.js

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('menu', {
    url: '',
    templateUrl: 'menu.html'
  })
  .state('menu.home', {
    url: '/home',
    views: {
      'menuContent': {
        templateUrl: "home.html",
        controller: 'HomeController'
      }
    }
  })
    
  $urlRouterProvider.otherwise("/home");
})

.controller('HomeController', function($scope, $ionicSideMenuDelegate) {
  $scope.toggleSideMenu = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
})

Look at how it works at CodePen - Ionic Side Menu + Search Bar.

1 Like
9

but the search is not submitting so how can i do that please help me out of this its urgent

thanks in advance

sorry but it doesn’t work side menu is not opening on click and i unable write on the search box
:frowning: