TitleBar

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

OverviewPropertiesChangelog3.14.0

Changes to TitleBar. The full components changelog also lists package-wide and cross-cutting entries.

3.14.0

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

Updates

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