Persistent Navigation in jQuery Mobile

I have been doing quite a bit of work in mobile application development with jQuery Mobile recently, and generally finding it a very useful product once you get your head around its idiosyncrasies.

One of the things I needed to do was to have a persistent navigation across the bottom of the page, to mimic the standard iPhone navbar.

Out of the box jQuery Mobile offers a facility for persistent navbars.

Read the rest of this post, including code explanations, on Andy’s “Internet Performance Expert” blog: Persistent Navigation in jQuery Mobile


  1. Thanks for this article, I thought I was misreading their example with duplicated footer too…

    Also, I think your one-line example following “And to set the current active button you use” misses something. Maybe you wanted to add ” class=”ui-btn-active” to the link?

  2. Same here 😉 Thought it was me missing something. Did more or less the same thing, although your solution is more elegant than mine.

  3. I’m glad I’m not the only one! I even considered using a PHP code generator, just so I wouldn’t have to manually muck with persistent page sections.

    Nice solution, elegant implementation, and a nice write-up…Thanks!

  4. Hi Andy!

    I like your solution and I’d like to apply it for a navigation bar in the header-section of my app. There are only two ”challenges”:

    1. Within the header-section, I have a heading (Page title) that needs to be changed (dynamically) according to the actual page to be displayed.

    2. In a few pages, I need a header that is different from the ”standard”-header.

    Could you please give me a hint, how I could achieve that?

    My app is self-contained, i. e. it isn’t connected to a webserver. I only use JQM and Phonegap for the implementation (and HTML5 and Javascript of course! 😉 .

    Best regards

  5. Hi Andy,

    I am building an app using PhoneGap and JQuery Mobile (JQM).

    I like your solution and it works great for simple tabs. But, per tab’s content I have more links that lead to inner pages (which belong to the same tab). Keeping track of this requires a more complex version of what you have written since every link = a new page which requires the header and footer injected, tab highlighted etc…. You see a flicker depending how fast the mobile is since the whole UI updates.

    My question is, since I am not using the JQM themes or icons and the navigation is annoying, do you think I can just use JQuery (without JQM), have fixed header and footer and use simple AJAX methods for updating only the relevant part of the UI?

    The content transitions are handy but I can also use a JQ library for this and test on mobiles as I go?

    Many thanks for your time

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s