Back

Toolbar Basics

Reference

Examples

Title center; icon buttons left and right; right button theme B

  <div data-role="header" data-position="inline">
    <a href="../index.html" data-icon="delete">Cancel</a>
    <h1>Edit Contact</h1>  	
    <a href="../index.html" data-icon="check" data-theme="b">Save</a>  
  </div>
Cancel

Edit Contact

Save

Forcing a single button to float right

<div data-role="header" data-position="inline"
  	<h1>Page Title</h1>
  	<a href="../index.html" data-icon="gear" class="ui-btn-right">Options</a>
</div>

Page Title

Options

Footer bar with multiple buttons

<div data-role="footer" class="ui-bar">
  <a href="index.html" data-role="button" data-icon="delete">Remove</a>
  <a href="index.html" data-role="button" data-icon="plus">Add</a>
  <a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
  <a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>
Remove Add Up Down

Footer Navbar with 4 buttons

<div data-role="footer">
 <div data-role="navbar">
  <ul>
    <li><a href="a.html" class="ui-btn-active">One</a></li>
    <li><a href="b.html">Two</a></li>
    <li><a href="b.html">Two</a></li>
    <li><a href="b.html">Two</a></li>
  </ul>
 </div>
</div>

Page Footer