Skip to main content

TitleBar

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

Import

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

Use cases

The TitleBar component provides five different slots for layouting the TitleBar content. We recommend using the Title slot for displaying a title. All other slots are optional.

CodeSandbox

Use all TitleBar slots

We recommend using the following content for each of the TitleBar slots:

  • Navigation: Breadcrumbs
  • Title: String or Heading. If a string is provided the recommended styles are applied automatically.
  • Subtitle: String or Text. If a string is provided the recommended styles are applied automatically.
  • Prefix: Image, Icon or an Icon Button
  • Suffix: One or multiple Buttons
  • Action: Icon Button, e.g. for a closing action
CodeSandbox

Props

TitleBarProps

extends, ,
NameTypeDefaultDescription
showDivider?
trueWhether a divider is displayed after the TitleBar component.

TitleBar.Navigation

TitleBarNavigationProps

extends,
NameTypeDefaultDescription
children
.
-Elements to be displayed in the TitleBar Navigation slot.

TitleBar.Action

TitleBarActionProps

extends,
NameTypeDefaultDescription
children
.
-Elements to be displayed in the TitleBar Action slot.

TitleBar.Prefix

TitleBarPrefixProps

extends,
NameTypeDefaultDescription
children
.
-Elements to be displayed in the TitleBar Prefix slot.

TitleBar.Suffix

TitleBarSuffixProps

extends,
NameTypeDefaultDescription
children
.
-Elements to be displayed in the TitleBar Suffix slot.

TitleBar.Subtitle

TitleBarSubtitleProps

extends,
NameTypeDefaultDescription
children
.
-Elements to be displayed in the TitleBar Subtitle slot.

TitleBar.Title

TitleBarTitleProps

extends,
NameTypeDefaultDescription
children
.
-Elements to be displayed in the TitleBar Title slot.
Still have questions?
Find answers in the Dynatrace Community