Nightly

Page Footer

You can have footer on all your pages if you want. If you want fixed header or footer add data-position="fixed" into your code. You can have different kinds of footers with JQM navbars. All types of navbars are available in JQM Docs page and are 100% compatibile with NIGTLY

Show source

<div data-role="footer" data-position="fixed" data-theme="none" data-border="false">
    <div data-role="navbar">
        <ul>
            <li><a href="mailto:email@email"><i class="fa fa-envelope"></i>Mail us</a></li>
            <li><a href="tel:0000000000"><i class="fa fa-phone"></i>Call us</a></li>
            <li><a href="#"><i class="fa fa-pencil"></i>Chat with us</a></li>
        </ul>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius fermentum condimentum. Mauris rutrum pellentesque tellus, a hendrerit risus semper lobortis. Curabitur vel pretium velit. Phasellus suscipit vehicula orci sit amet ultrices. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Mauris elementum, nulla ut convallis posuere, lacus massa interdum mi, eu lobortis nisi nunc quis est. Vestibulum sollicitudin fringilla massa. Sed et libero quis quam rhoncus laoreet. Nunc nibh nisl, sodales vitae cursus vel, egestas et sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Alternative footers

You can find alternative footers available in jQM docs.

Show source

<div data-role="footer" data-position="fixed">
    <h2>Page Footer</h2>
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="grid">Item A</a></li>
            <li><a href="#" data-icon="star" class="ui-btn-active">Item B</a></li>
            <li><a href="#" data-icon="gear">Item C</a></li>
        </ul>
    </div>
</div>