Ion nav bar in ionic modal?

1

Can i have nav bar in modal ? I tried using it ! but it show blank modal ! Any idea how it is done
?

2

You can use a header-bar in a modal, but you shouldn’t be using a nav-bar.

3

ohk! Thank You !! !!

4

Any particular reason why we shouldn’t be using a nav-bar in a modal? It’s a pretty common UI pattern to have a navigable view-stack inside a modal.

5

A nav-bar is meant to be for one navigation system. So two nav-bars at one time would cause issues.

As far as it being a common ui-pattern, it’s really not (from the apps I use/looked at). Even guidelines for ios/android say that a modal shouldn’t be like this.

6

Indeed, a nav-bar should be used for one navigation system. Any view stack should be considered a navigation system, no? Why would ionic be opinionated about whether a specific view stack is worthy of a working navigation bar or not? Clearly multiple navigation bars are intended to be supported, since $ionicNavBarDelegate exists, and gives us the ability to interact with multiple nav-bars via a handle.

A couple of betas ago a nav-bar in a modal worked out of the box. Now, we need to manually interact with it via $ionicNavBarDelegate to make it show, set the title, etc, as described here in a thread I started a while ago:

Since this worked normally (as per the docs) in a prior release, it sure seems like a bug to me. I created an issue for this a week or so ago.

For illustrative purposes, here are a couple of examples of navigation stacks inside a modal in some fairly high-profile, popular apps.
Nest’s thermostat settings:

Yelp’s signup modal:

Zillow’s settings modal:

7

Sorry but I cannot see that in the iOS Human Interface Guidelines for Modal transitions. Using a modal panel with embedded navigation controller is a very common UX pattern for login/signup walkthroughs, app settings or information about new features in your app.

There are countless apps in the App Store that use this pattern. To name a few: Things, Tweetbot, Instapaper, Wunderlist, and many others.

Do you have in mind adding support for this kind of UX?

8

Is this feature (navigating inside a modal) going to be implemented in the near future?

Thanks!

9

They’re not working on this feature, so the answer is no: Ion-nav-bar invisible inside modal