Appcelerator Blog

The Leading Resource for All Things Mobile

How-To: Create an iPhone Navigation Group

0 Flares 0 Flares ×

A question that’s come up a bit in Q&A, chats, tweets, and e-mails I get from folks in the community is the question of how to create what in the native world would be called a NavigationController. It’s basically a single window container which has a built in title bar, and allows you to arrange windows in a navigable stack. In previous versions of the Titanium Mobile SDK, the only way to achieve this automatic window navigation was to use a tab group, but in our latest release that’s no longer the case. There’s an implementation of a Navigation Controller in the iPad Kitchen Sink, but I thought I would do a quick walkthrough of how to create a simple navigation group in your iPhone app.

Our first order of business is to create the initially viewable window of our application – we’ll also add a label that the user can touch to open a second window:

//Here's the first window...
var first = Ti.UI.createWindow({
  title:"My App"
var label = Ti.UI.createLabel({ text: "poke me to open the next window" });

Next, we’ll create a NavigationGroup. This is an iPhone-only component that controls a stack of windows (reference doc) – we’ll pass it our first window to use as its initially viewable window:

//Here's the nav group that will hold them both...
var navGroup = Ti.UI.iPhone.createNavigationGroup({

Next, we’ll create a child window to push onto the stack:

//Here's a window we want to push onto the stack...
var second = Ti.UI.createWindow({
  title:"Child Window"
second.add(Ti.UI.createLabel({text:"Here's the child"}));

When we want to open a sub-window on our navigation group, we pass the window we want to open as an argument to the NavigationGroup’s open method. Finishing up, we will add our nav group to a window that will serve as our application’s primary UI container:

//When the label on the first window receives a touch, open the second
label.addEventListener("click", function(e) {;

//This is the main window of the application
var main = Ti.UI.createWindow();

When we’re finished, we’ll have a navigable stack of windows that give us a nice means of organizing some hierarchical data with some nifty built-in transitions:

Here’s the finished application, which you can drop in an app.js file and run yourself:

Hope that helps!

0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×


  1. Matt

    Superb, thanks Kevin! I think that’s answered my Q&A query that I posted earlier today :) Thank you so much.. I can go on holiday knowing that I can continue Titanium development when I get back!!–view-structure-to-get-app-to-behave-like-this#header

  2. Thanks! I was wondering how to achieve this without the tab group, and was looking through the Kitchen Sink to find an example.

  3. Matthew Lieder

    So a navigation group basically functions just like a tab group with a single, hidden tab? I get the same forward/backward functionality by using a tab group and calling to show child windows.

    • Matthew – that’s correct.

  4. Jeremy

    Is it safe to assume that this technique cannot be used with windows you want to create using the “url” property?

    • Jeremy – this should work with url based windows as well.

  5. dan

    Is it possible to use the url: part of the createWindow function with nav groups?

    I tried something similar to the following and it failed.

    var win1 = Titanium.UI.createWindow({
    title:’First Title’

  6. Ervin

    Hi, I’m wondering how I can go about adding several windows in succession using .createNavigationGroup, say more than 3 windows. Like in the above example, 1st window takes me to 2nd window, 2nd window takes me to 3rd window, and so on, and I can go back to the previous windows back touching the back buttons at the top all the way to the 1st window. Thanks.

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
0 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 0 Email -- 0 Flares ×