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## ComposeTitleBar
27
28ComposeTitleBar({item?: ComposeTitleBarMenuItem, title: ResourceStr, subtitle?: ResourceStr, menuItems?: Array<ComposeTitleBarMenuItem>})
29
30**Decorator**: @Component
31
32**Atomic service API**: This API can be used in atomic services since API version 11.
33
34**System capability**: SystemCapability.ArkUI.ArkUI.Full
35
36| Name| Type| Mandatory| Description|
37| -------- | -------- | -------- | -------- |
38| item | [ComposeTitleBarMenuItem](#composetitlebarmenuitem) | No| A single menu item for the profile picture on the left.|
39| title | [ResourceStr](ts-types.md#resourcestr) | Yes| Title.|
40| subtitle | [ResourceStr](ts-types.md#resourcestr) | No| Subtitle.|
41| menuItems | Array<[ComposeTitleBarMenuItem](#composetitlebarmenuitem)> | No| List of menu items on the right.|
42
43> **NOTE**
44>
45> The input parameter cannot be **undefined**, that is, calling **ComposeTitleBar(undefined)** is not allowed.
46
47## ComposeTitleBarMenuItem
48
49**System capability**: SystemCapability.ArkUI.ArkUI.Full
50
51| Name| Type| Mandatory| Description|
52| -------- | -------- | -------- | -------- |
53| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Icon resource.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
54| label<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Icon label.<br>**Atomic service API**: This API can be used in atomic services since API version 13.|
55| isEnabled | boolean | No| Whether to enable the item.<br>Default value: **false**<br> **true**: The item is enabled.<br> **false**: The item is disabled.<br>This property cannot be triggered by the **item** property.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
56| action | () =&gt; void | No| Action to perform. This parameter is not available for the item attribute.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
57
58## Events
59The [universal events](ts-universal-events-click.md) are not supported.
60
61## Example
62
63This example showcases how to implement a simple title bar, a title bar with a back arrow, and a title bar with a list of menu items on the right side.
64```ts
65import { ComposeTitleBar, promptAction, ComposeTitleBarMenuItem } from '@kit.ArkUI'
66
67@Entry
68@Component
69struct Index {
70  // Define an array of menu items for the right side of the title bar.
71  private menuItems: Array<ComposeTitleBarMenuItem> = [
72    {
73      // Resource for the menu icon
74      value: $r('app.media.ic_public_save'),
75      // Enable the icon.
76      isEnabled: true,
77      // Action triggered when the menu item is clicked.
78      action: () => promptAction.showToast({ message: "show toast index 1" })
79    },
80    {
81      value: $r('app.media.ic_public_reduce'),
82      isEnabled: true,
83      action: () => promptAction.showToast({ message: "show toast index 1" })
84    },
85    {
86      value: $r('app.media.ic_public_edit'),
87      isEnabled: true,
88      action: () => promptAction.showToast({ message: "show toast index 1" })
89    },
90    {
91      value: $r('app.media.ic_public_remove'),
92      isEnabled: true,
93      action: () => promptAction.showToast({ message: "show toast index 1" })
94    },
95  ]
96
97  build() {
98    Row() {
99      Column() {
100        // Divider.
101        Divider().height(2).color(0xCCCCCC)
102        ComposeTitleBar({
103          title: "Title",
104          subtitle: "Subtitle",
105          menuItems: this.menuItems.slice(0, 1),
106        })
107        Divider().height(2).color(0xCCCCCC)
108        ComposeTitleBar({
109          title: "Title",
110          subtitle: "Subtitle",
111          menuItems: this.menuItems.slice(0, 2),
112        })
113        Divider().height(2).color(0xCCCCCC)
114        ComposeTitleBar({
115          title: "Title",
116          subtitle: "Subtitle",
117          menuItems: this.menuItems,
118        })
119        Divider().height(2).color(0xCCCCCC)
120        // Define the title bar with a profile picture.
121        ComposeTitleBar({
122          menuItems: [{ isEnabled: true, value: $r('app.media.ic_public_save'),
123            action: () => promptAction.showToast({ message: "show toast index 1" })
124          }],
125          title: "Title",
126          subtitle: "Subtitle",
127          item: { isEnabled: true, value: $r('app.media.app_icon') }
128        })
129        Divider().height(2).color(0xCCCCCC)
130      }
131    }.height('100%')
132  }
133}
134```
135
136![en-us_image_0000001616913438](figures/en-us_image_0000001616913438.jpg)
137