1# SelectTitleBar
2
3
4The drop-down title bar is a title bar that contains a drop-down menu for switching between pages of different levels (configured with the Back button).
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 { SelectTitleBar } 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## SelectTitleBar
27
28SelectTitleBar({selected: number, options: Array<SelectOption>, menuItems?: Array<SelectTitleBarMenuItem>, subtitle?: ResourceStr, badgeValue?: number, hidesBackButton?: boolean, onSelected?: (index: number) => void})
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**Parameters**
37
38| Name| Type| Mandatory| Decorator| Description|
39| -------- | -------- | -------- | -------- | -------- |
40| selected | number | Yes| \@Prop | Index of the currently selected option.<br>The index of the first option is 0. If this attribute is not set, the default value **-1** will be used.|
41| options | Array&lt;[SelectOption](ts-basic-components-select.md#selectoption)&gt; | Yes| - | Options in the drop-down menu.|
42| menuItems | Array&lt;[SelectTitleBarMenuItem](#selecttitlebarmenuitem)&gt;              | No| - | List of menu items on the right of the title bar.|
43| subtitle | [ResourceStr](ts-types.md#resourcestr)                                      | No| - | Subtitle.|
44| badgeValue | number                                                                      | No| - | Badge.|
45| hidesBackButton | boolean                                                                     | No| - | Whether to hide the back arrow on the left.<br>Default value: **false** The value **true** means to hide the provider, and **false** means the opposite.|
46| onSelected | (index: number) =&gt; void                                   | No| - | Callback invoked when an option in the drop-down menu is selected. The index of the selected option is passed in.|
47
48## SelectTitleBarMenuItem
49
50**Atomic service API**: This API can be used in atomic services since API version 11.
51
52| Name| Type| Mandatory| Description|
53| -------- | -------- | -------- | -------- |
54| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Icon resource.|
55| label<sup>13+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Icon label.|
56| isEnabled | boolean | No| Whether to enable the item.<br>Default value: **false**<br> The value **true** means to enable the item, and **false** means the opposite.|
57| action | () =&gt; void | No| Action to perform.|
58
59## Events
60The [universal events](ts-universal-events-click.md) are not supported.
61
62## Example
63
64```ts
65import { SelectTitleBar, promptAction } from '@kit.ArkUI'
66
67interface menuItems {
68  value: Resource;
69  isEnabled?: boolean;
70  action?: () => void
71}
72
73@Entry
74@Component
75struct Index {
76  private  menuItems:Array<menuItems> =
77  [
78    {
79      value:$r('app.media.ic_public_save'),
80      isEnabled:true,
81      action:() => promptAction.showToast({ message: "show toast index 1" })
82    },
83    {
84      value:$r('app.media.ic_public_reduce'),
85      isEnabled:true,
86      action:() => promptAction.showToast({ message: "show toast index 2" })
87    },
88    {
89      value:$r('app.media.ic_public_edit'),
90      isEnabled:true,
91      action:() => promptAction.showToast({ message: "show toast index 3" })
92    },
93    {
94      value:$r('app.media.ic_public_reduce'),
95      isEnabled:true,
96      action:() => promptAction.showToast({ message: "show toast index 4" })
97    }
98  ]
99
100  build() {
101    Row() {
102      Column() {
103		Divider().height(2).color(0xCCCCCC)
104        SelectTitleBar({
105          options: [
106            { value: 'All photos' },
107            { value: 'Local (device)' },
108            { value: 'Local (memory card)'}
109          ],
110          selected: 0,
111          onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }),
112          hidesBackButton: true
113        })
114        Divider().height(2).color(0xCCCCCC)
115        SelectTitleBar({
116          options: [
117            { value: 'All photos' },
118            { value: 'Local (device)' },
119            { value: 'Local (memory card)'}
120          ],
121          selected: 0,
122          onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }),
123          hidesBackButton: false
124        })
125        Divider().height(2).color(0xCCCCCC)
126        SelectTitleBar({
127          options: [
128            { value: 'All photos' },
129            { value: 'Local (device)' },
130            { value: 'Local (memory card)'}
131          ],
132          selected: 1,
133          onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }),
134          subtitle: "example@example.com"
135        })
136        Divider().height(2).color(0xCCCCCC)
137        SelectTitleBar({
138          options: [
139            { value: 'All photos' },
140            { value: 'Local (device)' },
141            { value: 'Local (memory card)'}
142          ],
143          selected: 1,
144          onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }),
145          subtitle: "example@example.com",
146          menuItems: [{ isEnabled: true, value: $r('app.media.ic_public_save'),
147            action: () => promptAction.showToast({ message: "show toast index 1" })
148          }]
149        })
150        Divider().height(2).color(0xCCCCCC)
151        SelectTitleBar({
152          options: [
153            { value: 'All photos' },
154            { value: 'Local (device)' },
155            { value: 'Local (memory card)'}
156          ],
157          selected: 0,
158          onSelected: (index) => promptAction.showToast({ message: 'page index ' + index }),
159          subtitle: "example@example.com",
160          menuItems: this.menuItems,
161          badgeValue: 99,
162          hidesBackButton: true
163        })
164        Divider().height(2).color(0xCCCCCC)
165      }.width('100%')
166    }.height('100%')
167  }
168}
169```
170
171![en-us_image_0000001616959836](figures/en-us_image_0000001616959836.jpg)
172