Header Bar

The header bar displays the title of the current screen.


<div data-role="header">
   <h1>Header  Title</h1>
</div>

We can add buttons to header bar for navigation or add controls that manage items in the page.

The header is defined with the data-role="header" attribute.

The back button will not be shown in the header unless you explicitly enable it.

We may adjust the theme of the header with the data-theme attribute.

If no theme is set for the header it will inherit the theme from the page component.

The default theme is black (data-theme="a").

All heading levels (H1-H6) are styled identically by default to maintain visual consistency.

You can make the header fixed with the addition of the data-position="fixed" attribute.