TitleBar

• Changelog

The TitleBar component can be used for a consistent layout for section titles and provides layout slots for interactive and navigational elements.

OverviewPropertiesChangelog

Package @dynatrace/strato-components, latest version 3.15.1. Below are the changes to TitleBar. See Components changelog for all changes to the package.

3.14.0 Released Sep 17, 2026

Updates

• The Title subcomponent now accepts as and level props to control the semantic heading tag and visual heading size. (APPDEV-19207)

How to opt in

Use as to set the HTML heading element that fits your page's document outline, and level to adjust the visual heading size. Both default to their previous values (as="h2", level={3}), so existing usages are unaffected.

import { TitleBar } from '`@dynatrace/strato-components/layouts';`

{
  /* Step the semantic level down when the page already has an h2 */
}
<TitleBar>
  <TitleBar.Title as="h3">Section title</TitleBar.Title>
</TitleBar>;

{
  /* Adjust visual weight for a panel or dialog context */
}
<TitleBar>
  <TitleBar.Title level={4} as="h3">
    Panel title
  </TitleBar.Title>
</TitleBar>;

3.11.3 Released Aug 20, 2026

Updates

• The decorative divider is no longer announced by screen readers. (APPDEV-19139)