Header Basics

There are a few points of importance about the header. They include:

• The header is defined with the data-role="header" attribute.
• The header is an optional component.
• The back button will not be shown in the header unless you explicitly enable it. The back button is discussed in detail in the next section.
• You 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.

TIP: You may also use the header as a segmented control as shown in Figure 3–5. A segmented control allows the user to display different views of related data.