Intro

The title control is a simple, large-sized text containing additional semantic information for accessibility purposes.

The difference between a title and a manually styled heading is that the title can be used by assistive technologies such as screen readers to create a hierarchical site map for faster navigation.

The title is used, for example, by panel, toolbar, or list components.

Example of a title

When to Use

false

Use the title if:

You want to set the title above a table or form.
You want to show text in the page header.

dont

false

Don’t use the title if:

The text is inside a text block.
The text is inside a form element.

Anatomy

Title Text: A prominent heading that identifies the current view, section, or item. It is visually distinct and helps users quickly understand the structure and main topic of the content.

Anatomy of a title

Types

Header Levels

Six semantic header levels are available, ranging from H1 (highest) to H6 (lowest). The higher the level and the larger the font size, the more important the title is.

Even if titles appear in a different order or size for design reasons (for example, H1 = 20 and H3 = 30), it’s important to assign them to the correct heading levels (like H1, H2, H3). This helps screen readers understand the structure of the page and guide users through the content properly.

Title variants for different header levels

The style of each header level depends on the theme being used and the specific use case. As a result, different styles may be used for titles with the same header level.

Header levels with different header styles

Title as a Link

A title can also be used as a link.

Title on different title level as a link.

hint

To add a link to the title:

Use the content aggregation.
Add a link to it.

The content aggregation accepts any control that implements the sap.ui.core.ITitleContent interface.

Responsiveness

You can define whether the text should wrap or truncate directly (property: wrapping). If hyphenation or truncation is not set, the text of the title is wrapped word by word.

For more information on using wrapping and truncation, see Wrapping and Truncating Text.

Truncated title

Wrapped title

Hyphenation

The title control also supports hyphenation for wrapped texts (property: wrappingtype = Hyphenated). Switching on hyphenation activates it for all languages that have hyphenation support.

Wrapped, hyphenated title

changes

In the future, we plan to apply hyphenation only to a predefined set of languages (for example, languages that have a lot of long or compound words).

This will avoid unnecessary hyphenation in languages that have shorter words, such as English.

guideline

When using the title in the dynamic page header, use wrapping in expanded mode and truncation in collapsed mode.
In other places, such as toolbars or dialog headers, do not use wrapping. Truncate the title instead.