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.
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
Button
s - Action: Icon Button, e.g. for a closing action
Props
TitleBarProps
extends
, ,
Name | Type | Default | Description |
---|---|---|---|
showDivider? | true | Whether a divider is displayed after the TitleBar component. |
TitleBar.Navigation
TitleBarNavigationProps
extends
,
Name | Type | Default | Description |
---|---|---|---|
children | . | - | Elements to be displayed in the TitleBar Navigation slot. |
TitleBar.Action
TitleBarActionProps
extends
,
Name | Type | Default | Description |
---|---|---|---|
children | . | - | Elements to be displayed in the TitleBar Action slot. |
TitleBar.Prefix
TitleBarPrefixProps
extends
,
Name | Type | Default | Description |
---|---|---|---|
children | . | - | Elements to be displayed in the TitleBar Prefix slot. |
TitleBar.Suffix
TitleBarSuffixProps
extends
,
Name | Type | Default | Description |
---|---|---|---|
children | . | - | Elements to be displayed in the TitleBar Suffix slot. |
TitleBar.Subtitle
TitleBarSubtitleProps
extends
,
Name | Type | Default | Description |
---|---|---|---|
children | . | - | Elements to be displayed in the TitleBar Subtitle slot. |
TitleBar.Title
TitleBarTitleProps
extends
,
Name | Type | Default | Description |
---|---|---|---|
children | . | - | Elements to be displayed in the TitleBar Title slot. |
Still have questions?
Find answers in the Dynatrace Community