NavigationWindow: Add custom back button and label title in Titanium

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

1. Create a custom button in your controller.  NB: If you want your “color” property to be applied, you have to include “backgroundImage: ‘none'”

var btnBack = Ti.UI.createButton({
 title: '< Back',
 color: "white",
 backgroundImage: "none"

2. Add an event listener on your back button and use the global reference to your navigtionWindow (that you set in your parent controller) to close the current window:

btnBack.addEventListener('click', function(){
var nav = Alloy.Globals.navLanding;

3. Set the leftNavButton property of your current window to the instance of the new button that we just created (i.e. btnBack):


4. Set the titleControl property of the current window to a new Label:

$.setupRegistration.titleControl = Ti.UI.createLabel({
 text: L('title_create'),
 color: 'white',
 font: {fontFamily: 'Bond4F-Medium', fontSize: 18}



About Phil Smithson

Ultrarunner & CTO. Passions include Mobile app development, Scrum, Kanban, Wordpress and Symfony.

4 thoughts on “NavigationWindow: Add custom back button and label title in Titanium

  1. Saurabh says:

    Thanks for the code I was just looking for the same!!.
    It would be great if you can share the code for using the custom navigation for an app that display the name of last screen instead of back button in regular titanium(java script pattern).Any help is appreciated!! Thanks in advance

  2. jess says:

    it’s really what i need, but i don’t understand what the component “navLanding” is. It seems like to be an id of some component but i found nothing named “navLanding”.

    • Phil Smithson says:

      Yes, it’s the reference to the NavigationWindow global object, click on the link on the text “that you set in your parent controller” and you’ll see.

Leave a Reply

Your email address will not be published. Required fields are marked *