Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Tabgroup & NavigationGroup on iPhone altogether

I tried to combine those two things. Having a Tabgroup (clickable menu on the bottom) and a NavigationGroup to "click through" a TableView, so that every row in that table navigates to a particular page showing details.

Those two groups all use a distinct windows, so that having both on one "page" would make those two windows overlap each other. Short: won´t work.
Or am I wrong here?
Is there another way to have a clickable menu on the bottom of each window AND the NavigationGroup?

Help on this would be much appreciated. Thanks in advance!

— asked August 11th 2010 by Florian Dehn
  • iphone
  • navigationgroup
  • tabgroup
  • ui

7 Answers

  • The code snippet below incorporates a TabGroup and a NavigationGroup. The first tab navigator overlays the tab group completely, whereas the second tab has a navigator embedded in the tab group.

    var tabGroup = Titanium.UI.createTabGroup();
    // First tab, main window
    var mainWinTab1 = Titanium.UI.createWindow({
        title: 'Window 1'
    var data = [{title: 'item one'}, {title: 'item two'}, {title: 'item three'}];
    var table = Titanium.UI.createTableView({
        data: data
    // First tab, navigator
    var navTab1 = Titanium.UI.iPhone.createNavigationGroup({
        window: mainWinTab1
    var baseWinTab1 = Titanium.UI.createWindow({
        navBarHidden: true
    // First tab, subwindow
    table.addEventListener('click', function(e){
        tabGroup.animate({bottom: -50, duration: 500});
        var subWinTab1 = Titanium.UI.createWindow({
            title: e.row.title
        subWinTab1.addEventListener('close', function(e){
            tabGroup.animate({bottom: 0, duration: 500});
    // Second tab, main window
    var mainWinTab2 = Titanium.UI.createWindow({
        title: 'Window 2'
    var data = [{title: 'item a'}, {title: 'item b'}, {title: 'item c'}];
    var table = Titanium.UI.createTableView({
        data: data
    // Second tab, navigator
    var navTab2 = Titanium.UI.iPhone.createNavigationGroup({
        window: mainWinTab2
    var baseWinTab2 = Titanium.UI.createWindow({
        navBarHidden: true
    // Second tab, subwindow
    table.addEventListener('click', function(e){
        var subWinTab2 = Titanium.UI.createWindow({
            title: e.row.title
    // Tab group
    var tab1 = Titanium.UI.createTab({  
        icon: 'KS_nav_ui.png',
        title: 'Full nav',
        window: baseWinTab1
    var tab2 = Titanium.UI.createTab({  
        icon: 'KS_nav_views.png',
        title: 'Embedded nav',
        window: baseWinTab2
    — answered April 21st 2011 by Mark Ruys
    1 Comment
    • Any idea how you could achieve the reverse - open a tab group from a navigation group such that the origin page does not have tabs, and there is a "back" button on the top left of the tab group once it's opened?

      — commented April 21st 2011 by Zeus Mclain
  • I've got a similar question. My first window is a plain window, with a navigation group. I can then navigate to a new window, which is a tab group.


    For each window I create when adding to the tab group:

    for (var i = 0; i < tabWindows.length; i++) {
                tabWindows[i].topTabGroup = topTabGroup;
                tabWindows[i].navGroup = navGroup;
                tabWindows[i].navBarHidden = false;

    For each window in my tab groups, I add a button:

    var backButton = Titanium.UI.createButton({title:'Back'});
    Titanium.UI.currentWindow.leftNavButton = backButton;
    backButton.addEventListener('click', function() {
        try {
        } catch(e) {

    As you can see, each window has a reference to the navGroup, and I can call navGroup.close() to navigate through the nav Group.

    However, the only problem is that the navigation toolbar for the tab group AND the navigation group show up at the same time… is there a way to get a reference to the tab group's nav bar to hide it?

    — answered August 12th 2010 by Scott M
    1 Comment
    • Fixed it… the problem was that, from the tab group, I was calling

      currentWin.navGroup.open(win, {animated:true});

      when I should have been calling:

      Titanium.UI.currentTab.open(win, {animated:true});

      — commented August 12th 2010 by Scott M
  • hi florian

    Can you please be a bit more clear on your point….i can understand that you have a table view embedded on a tab group tab,and you want the table view rows to navigate to separate windows on click event…..so what is the problem that you face?

    — answered August 11th 2010 by Satta Ravi
    1 Comment
    • I have the same problem: embedding a navgroup inside a tabgroup and created on click event in a tableview.
      Could you help?

      — commented January 17th 2011 by Philippe Chassany
  • Thanks for your reply.
    The thing is: I want to combine a TabGroup AND a NavigationGroup within one window.
    I don´t know if I get things wrong here… couldn´t get this thing to work.

    — answered August 11th 2010 by Florian Dehn
  • Florian,

    When you open a sub window in a tab, a back button is automatically displayed in the left part of the title bar of the sub window. As far as I know, this is functionnally equivalent to the navigation group.
    If that's correct, you don't need to use both. The Tab Group would be enough.

    My 2 cents.

    — answered August 11th 2010 by Olivier Smeesters
  • I have the similar problem guys. My app starts with a TabGroup. One of the tabs displays a table with rows. When I click on a row, I'd like to open a new window, displaying more detailed info on this row. And then I want to able to go back to my tab.

    If I try to put the TabGroup as a first window in the NavGroup, it shows the tab group fine, but when I try to drill down to the child window, it doesn't show up. Ideas??

    — answered March 9th 2011 by Denis Ryzhikov
  • Add Button to Tab Group Toolbar/Navbar

    This may be an alternative. The code:

    var btnEdit = Ti.UI.createButton({
        systemButton: Ti.UI.iPhone.SystemButton.EDIT
        // button was clicked
    tabWin.rightNavButton = btnEdit;

    You can also add a left button by doing:

    tabWin.leftNavButton = btnEdit;

    Reading these two questions: one and two helped me figure this out.

    The buttons will then display like:


    Note that this works for iPhones, not just iPads (haven't tested on Android). All the button options are listed here. Also, note that you can do similar things with the icons on the tab bar using these button styles.

    — answered April 15th 2011 by Joe iEntry
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.