How-To: Create an iPhone Navigation Group

Composite image of nature superimposed on a woman's profile

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!

Previous articleHow-To: Full Page CSS 3 Layout (Desktop)
Next articleBackground Animation Visual Effect Tutorial


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

  2. 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.

  3. 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’

  4. 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.


Please enter your comment!
Please enter your name here