Navbar is the oldest jQuery Mobile widget, unfortunately because of framework inner handling you can only show 5 inline Navbar elements. If you try to show more than that, jQuery will separate them in several lines, basically something like this:
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 
Navbar before fix
 
This approach has much more sense if we are working on a pure mobile application where there isn’t enough window horizontal (width) space. In any other case, we will need to create a small workaround.
 

Example:

 
<div data-role="navbar">
	<ul>
		<li class="tab"><a href="a.html">One</a>
		</li>
		<li class="tab"><a href="b.html">Two</a>
		</li>
		<li class="tab"><a href="c.html">Three</a>
		</li>
		<li class="tab"><a href="d.html">Four</a>
		</li>
		<li class="tab"><a href="e.html">Five</a>
		</li>
		<li class="tab"><a href="f.html">Six</a>
		</li>
		<li class="tab"><a href="g.html">Seven</a>
		</li>
		<li class="tab"><a href="h.html">Eight</a>
		</li>          
	</ul>
</div>
 
.tab {
    width: 12.5% !important;
    clear: none !important;  /* Prevent line break */
}
 
First don’t frown because we’re using !important keyword, this solution can’t work without that. Basically almost every add hock change to jQuery Mobile CSS structure requires !important keyword. On the other hand, you can always change jQuery Mobile CSS structure directly, I just hope you have enough time and patience.
 
We have set width to 12.5 % because navbar has 8 elements, in case navbar has 6 of them we would use 16.66 % (100 / 6 = 16.666666). Last but not least, clear will prevent line break caused by ui-block-a.
 
Finally, it should look like this:
 
Navbar after fix
 
This fix works from jQuery Mobile version 1.2 and above (tested up to the version 1.4.5).
 

Working example:

 
Working Plunker example can be found here:
 
Demo
 
Embedded example:
 
 

Code:

 
Just in case Plunker code hosting is down.
 
HTML:
 
<!DOCTYPE html>
<html>

<head>
  <title>jQM Complex Demo</title>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <link rel="stylesheet" href="style.css"/>     
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page" id="index" data-theme="a">
    <div data-role="header">
      <div data-role="navbar">
        <ul>
          <li class="tab"><a href="a.html">One</a>
          </li>
          <li class="tab"><a href="b.html">Two</a>
          </li>
          <li class="tab"><a href="c.html">Three</a>
          </li>
          <li class="tab"><a href="d.html">Four</a>
          </li>
          <li class="tab"><a href="e.html">Five</a>
          </li>
          <li class="tab"><a href="f.html">Six</a>
          </li>
          <li class="tab"><a href="g.html">Seven</a>
          </li>
          <li class="tab"><a href="h.html">Eight</a>
          </li>          
        </ul>
      </div>
      <!-- /navbar -->
    </div>

    <div data-role="content">

    </div>

    <div data-role="footer" data-position="fixed">

    </div>
  </div>
</body>

</html>
 

JavaScript:

 
.tab {
    width: 12.5% !important;
    clear: none !important;  /* Prevent line break */
}
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs: