1# ComposeTitleBar
2
3
4A one- or two-row title bar with profile picture is a common title bar that contains a title, subtitle (optional), and profile picture (optional). It can come with a Back button for switching between pages of different levels.
5
6
7> **NOTE**
8>
9> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
10
11
12## Modules to Import
13
14```
15import { ComposeTitleBar } from '@kit.ArkUI'
16``` 
17
18
19## Child Components
20
21Not supported
22
23## Attributes
24The [universal attributes](ts-universal-attributes-size.md) are not supported.
25
26
27## ComposeTitleBar
28
29ComposeTitleBar({item?: ComposeTitleBarMenuItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<ComposeTitleBarMenuItem>})
30
31**Decorator**: @Component
32
33**Atomic service API**: This API can be used in atomic services since API version 11.
34
35**System capability**: SystemCapability.ArkUI.ArkUI.Full
36
37**Parameters**
38
39| Name| Type| Mandatory| Description|
40| -------- | -------- | -------- | -------- |
41| item | [ComposeTitleBarMenuItem](#composetitlebarmenuitem) | No| A single menu item for the profile picture on the left.|
42| title | [ResourceStr](ts-types.md#resourcestr) | Yes| Title.|
43| subtitle | [ResourceStr](ts-types.md#resourcestr) | No| Subtitle.|
44| menuItems | Array<[ComposeTitleBarMenuItem](#composetitlebarmenuitem)> | No| List of menu items on the right.|
45
46## ComposeTitleBarMenuItem
47
48**Atomic service API**: This API can be used in atomic services since API version 11.
49
50| Name| Type| Mandatory| Description|
51| -------- | -------- | -------- | -------- |
52| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Icon resource.|
53| label<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Icon label.|
54| isEnabled | boolean | No| Whether to enable the item.<br>Default value: **false**<br> **true**: The item is enabled.<br> **false**: The item is disabled.|
55| action | () =&gt; void | No| Action to perform. This parameter is not available for the item attribute.|
56
57## Events
58The [universal events](ts-universal-events-click.md) are not supported.
59
60## Example
61
62```ts
63import { ComposeTitleBar, promptAction, ComposeTitleBarMenuItem } from '@kit.ArkUI'
64
65@Entry
66@Component
67struct Index {
68  private menuItems: Array<ComposeTitleBarMenuItem> = [
69    {
70      value: $r('app.media.ic_public_save'),
71      isEnabled: true,
72      action: () => promptAction.showToast({ message: "show toast index 1" })
73    },
74    {
75      value: $r('app.media.ic_public_save'),
76      isEnabled: true,
77      action: () => promptAction.showToast({ message: "show toast index 1" })
78    },
79    {
80      value: $r('app.media.ic_public_save'),
81      isEnabled: true,
82      action: () => promptAction.showToast({ message: "show toast index 1" })
83    },
84    {
85      value: $r('app.media.ic_public_save'),
86      isEnabled: true,
87      action: () => promptAction.showToast({ message: "show toast index 1" })
88    },
89  ]
90
91  build() {
92    Row() {
93      Column() {
94        Divider().height(2).color(0xCCCCCC)
95        ComposeTitleBar({
96          title: "Title",
97          subtitle: "Subtitle",
98          menuItems: this.menuItems.slice(0, 1),
99        })
100        Divider().height(2).color(0xCCCCCC)
101        ComposeTitleBar({
102          title: "Title",
103          subtitle: "Subtitle",
104          menuItems: this.menuItems.slice(0, 2),
105        })
106        Divider().height(2).color(0xCCCCCC)
107        ComposeTitleBar({
108          title: "Title",
109          subtitle: "Subtitle",
110          menuItems: this.menuItems,
111        })
112        Divider().height(2).color(0xCCCCCC)
113        ComposeTitleBar({
114          menuItems: [{ isEnabled: true, value: $r('app.media.ic_public_save'),
115            action: () => promptAction.showToast({ message: "show toast index 1" })
116          }],
117          title: "Title",
118          subtitle: "Subtitle",
119          item: { isEnabled: true, value: $r('app.media.app_icon') }
120        })
121        Divider().height(2).color(0xCCCCCC)
122      }
123    }.height('100%')
124  }
125}
126```
127
128![en-us_image_0000001616913438](figures/en-us_image_0000001616913438.jpg)
129