@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (215) hide show
  1. package/data/AI_USAGE.md +425 -0
  2. package/data/CHANGELOG.md +53 -3
  3. package/data/component-catalog.json +62 -209
  4. package/data/components/README.md +281 -0
  5. package/data/components/action-bar.md +443 -0
  6. package/data/components/ai-busy-indicator.md +79 -0
  7. package/data/components/ai-loading-bar.md +66 -0
  8. package/data/components/avatar-btp.md +198 -0
  9. package/data/components/avatar-group.md +2660 -0
  10. package/data/components/avatar-product-switch.md +476 -0
  11. package/data/components/avatar.md +993 -0
  12. package/data/components/bar.md +574 -0
  13. package/data/components/border-radius.md +148 -0
  14. package/data/components/border.md +412 -0
  15. package/data/components/breadcrumb.md +546 -0
  16. package/data/components/button-2.md +440 -0
  17. package/data/components/button-action-sheet.md +292 -0
  18. package/data/components/button-ai.md +730 -0
  19. package/data/components/button-btp.md +223 -0
  20. package/data/components/button-button.md +233 -0
  21. package/data/components/button-counter.md +176 -0
  22. package/data/components/button-patterns.md +731 -0
  23. package/data/components/button-split.md +459 -0
  24. package/data/components/button.md +469 -0
  25. package/data/components/calendar.md +5784 -0
  26. package/data/components/card-card-media.md +707 -0
  27. package/data/components/card-card.md +2426 -0
  28. package/data/components/card-layouts.md +1201 -0
  29. package/data/components/card.md +2404 -0
  30. package/data/components/carousel.md +1506 -0
  31. package/data/components/code.md +139 -0
  32. package/data/components/component-reset.md +272 -0
  33. package/data/components/components-icons-businesssuiteinappsymbol-icons.md +85 -0
  34. package/data/components/components-icons-sap-icons.md +147 -0
  35. package/data/components/components-icons-tnt-icons.md +85 -0
  36. package/data/components/container-queries.md +221 -0
  37. package/data/components/container.md +227 -0
  38. package/data/components/dialog-docs-static-busy-indicator.md +165 -0
  39. package/data/components/dialog-docs-static-dialog.md +949 -0
  40. package/data/components/dialog-docs-static-patterns.md +147 -0
  41. package/data/components/dialog-docs-static-settings.md +528 -0
  42. package/data/components/dialog-docs-static.md +982 -0
  43. package/data/components/dialog.md +606 -0
  44. package/data/components/dynamic-page-dynamic-page.md +1914 -0
  45. package/data/components/dynamic-page.md +973 -0
  46. package/data/components/dynamic-side.md +197 -0
  47. package/data/components/elevation.md +110 -0
  48. package/data/components/feed-input.md +346 -0
  49. package/data/components/feed-list.md +580 -0
  50. package/data/components/fieldset-2.md +292 -0
  51. package/data/components/fieldset-forms.md +169 -0
  52. package/data/components/fieldset.md +381 -0
  53. package/data/components/flexible-column-layout.md +205 -0
  54. package/data/components/form-group.md +287 -0
  55. package/data/components/form-header.md +71 -0
  56. package/data/components/form-item-2.md +98 -0
  57. package/data/components/form-item-3.md +134 -0
  58. package/data/components/form-item-4.md +556 -0
  59. package/data/components/form-item-5.md +182 -0
  60. package/data/components/form-item-6.md +539 -0
  61. package/data/components/form-item-7.md +239 -0
  62. package/data/components/form-item-ai.md +158 -0
  63. package/data/components/form-item-file-uploader.md +445 -0
  64. package/data/components/form-item-forms.md +234 -0
  65. package/data/components/form-item-patterns.md +426 -0
  66. package/data/components/form-item.md +464 -0
  67. package/data/components/form-label-ai.md +126 -0
  68. package/data/components/form-label-layouts.md +306 -0
  69. package/data/components/form-label-patterns.md +1175 -0
  70. package/data/components/form-label-status-indicator.md +1083 -0
  71. package/data/components/form-label-step-input.md +620 -0
  72. package/data/components/form-label.md +2876 -0
  73. package/data/components/generic-tag.md +747 -0
  74. package/data/components/grid-list-grid-list.md +1185 -0
  75. package/data/components/grid-list.md +1449 -0
  76. package/data/components/heading.md +66 -0
  77. package/data/components/horizontal-navigation.md +568 -0
  78. package/data/components/icon-tab-bar-dev.md +190 -0
  79. package/data/components/icon-tab-bar.md +2620 -0
  80. package/data/components/icon.md +171 -0
  81. package/data/components/iconBusinessSuite.md +92 -0
  82. package/data/components/iconTnt.md +92 -0
  83. package/data/components/illustrated-message.md +439 -0
  84. package/data/components/info-label.md +348 -0
  85. package/data/components/input-group.md +2068 -0
  86. package/data/components/label.md +66 -0
  87. package/data/components/layout-grid.md +447 -0
  88. package/data/components/layout-panel.md +261 -0
  89. package/data/components/layouts-layout-grid.md +608 -0
  90. package/data/components/layouts-paddings.md +133 -0
  91. package/data/components/layouts-section.md +287 -0
  92. package/data/components/list-2.md +148 -0
  93. package/data/components/list-3.md +735 -0
  94. package/data/components/list-list.md +790 -0
  95. package/data/components/list-object-list.md +1225 -0
  96. package/data/components/list.md +1286 -0
  97. package/data/components/media-queries.md +168 -0
  98. package/data/components/menu.md +946 -0
  99. package/data/components/message-box-docs-static-ai.md +149 -0
  100. package/data/components/message-box-docs-static.md +527 -0
  101. package/data/components/message-page-upload-collection.md +678 -0
  102. package/data/components/message-page.md +256 -0
  103. package/data/components/message-strip.md +977 -0
  104. package/data/components/message-toast.md +119 -0
  105. package/data/components/micro-process-flow.md +991 -0
  106. package/data/components/navigation-menu.md +366 -0
  107. package/data/components/navigation-navigation.md +1245 -0
  108. package/data/components/navigation.md +2604 -0
  109. package/data/components/numeric-content.md +317 -0
  110. package/data/components/object-attribute.md +96 -0
  111. package/data/components/object-identifier.md +227 -0
  112. package/data/components/object-marker.md +202 -0
  113. package/data/components/object-number.md +327 -0
  114. package/data/components/object-status.md +1538 -0
  115. package/data/components/off-screen.md +87 -0
  116. package/data/components/overflow.md +97 -0
  117. package/data/components/padding.md +122 -0
  118. package/data/components/paddings.md +130 -0
  119. package/data/components/page.md +300 -0
  120. package/data/components/pagination.md +672 -0
  121. package/data/components/panel-layouts.md +345 -0
  122. package/data/components/panel.md +514 -0
  123. package/data/components/patterns-label.md +74 -0
  124. package/data/components/popover-2.md +906 -0
  125. package/data/components/popover-ai.md +466 -0
  126. package/data/components/popover-btp.md +886 -0
  127. package/data/components/popover-deprecated.md +308 -0
  128. package/data/components/popover-message-popover.md +683 -0
  129. package/data/components/popover-notification.md +1511 -0
  130. package/data/components/popover-patterns.md +1100 -0
  131. package/data/components/popover-popover.md +1862 -0
  132. package/data/components/popover-quick-view.md +385 -0
  133. package/data/components/popover-timepicker.md +1836 -0
  134. package/data/components/popover-user-menu.md +1303 -0
  135. package/data/components/popover.md +1938 -0
  136. package/data/components/progress-indicator.md +351 -0
  137. package/data/components/prompt-input-ai.md +226 -0
  138. package/data/components/prompt-input.md +226 -0
  139. package/data/components/rating-indicator.md +1469 -0
  140. package/data/components/resizable-card-layout.md +951 -0
  141. package/data/components/scrollbar.md +86 -0
  142. package/data/components/search-field.md +287 -0
  143. package/data/components/section.md +250 -0
  144. package/data/components/segmented-button.md +324 -0
  145. package/data/components/shellbar.md +2183 -0
  146. package/data/components/side-nav.md +1562 -0
  147. package/data/components/skeleton.md +243 -0
  148. package/data/components/slider.md +395 -0
  149. package/data/components/splitter.md +353 -0
  150. package/data/components/table.md +2749 -0
  151. package/data/components/tabs.md +658 -0
  152. package/data/components/text-text.md +380 -0
  153. package/data/components/text.md +253 -0
  154. package/data/components/tile.md +1132 -0
  155. package/data/components/time.md +818 -0
  156. package/data/components/title.md +153 -0
  157. package/data/components/titles.md +83 -0
  158. package/data/components/token.md +311 -0
  159. package/data/components/tokenizer.md +398 -0
  160. package/data/components/tool-header.md +1352 -0
  161. package/data/components/tool-layout.md +199 -0
  162. package/data/components/toolbar-ai.md +174 -0
  163. package/data/components/toolbar-btp.md +526 -0
  164. package/data/components/toolbar-title-bar.md +473 -0
  165. package/data/components/toolbar.md +432 -0
  166. package/data/components/tree.md +1031 -0
  167. package/data/components/typography.md +435 -0
  168. package/data/components/variant-management.md +360 -0
  169. package/data/components/vertical-nav.md +589 -0
  170. package/data/components/wizard.md +1429 -0
  171. package/data/examples/Components/dialog/device-specifications.example.html +39 -30
  172. package/data/examples/Components/shellbar/optional-items.example.html +210 -157
  173. package/data/examples/Components/shellbar/overflow-toolbar.example.html +202 -177
  174. package/data/examples/Components/shellbar/responsive-paddings.example.html +217 -146
  175. package/data/examples/Components/shellbar/responsiveness.example.html +825 -613
  176. package/data/examples/Components/user-menu/default.example.html +241 -83
  177. package/data/schemas/badge.schema.json +1 -1
  178. package/data/schemas/button-split.schema.json +1 -1
  179. package/data/schemas/component-frontmatter.schema.json +123 -0
  180. package/data/schemas/component-markdown.schema.json +81 -0
  181. package/data/schemas/counter.schema.json +1 -1
  182. package/data/schemas/dynamic-page.schema.json +1 -1
  183. package/data/schemas/dynamic-side-content.schema.json +1 -1
  184. package/data/schemas/facet.schema.json +1 -1
  185. package/data/schemas/fieldset.schema.json +1 -1
  186. package/data/schemas/flexible-column-layout.schema.json +1 -1
  187. package/data/schemas/form-group.schema.json +3 -2
  188. package/data/schemas/form-header.schema.json +1 -1
  189. package/data/schemas/form-label.schema.json +1 -0
  190. package/data/schemas/form-message.schema.json +1 -1
  191. package/data/schemas/grid-list.schema.json +1 -1
  192. package/data/schemas/input-group.schema.json +1 -1
  193. package/data/schemas/layout-panel.schema.json +1 -1
  194. package/data/schemas/page.schema.json +1 -1
  195. package/data/schemas/quick-view.schema.json +2 -1
  196. package/data/schemas/section.schema.json +1 -1
  197. package/data/schemas/side-nav.schema.json +1 -1
  198. package/data/schemas/splitter.schema.json +1 -1
  199. package/data/schemas/tabs.schema.json +1 -1
  200. package/data/schemas/tile.schema.json +1 -1
  201. package/data/schemas/tool-layout.schema.json +1 -1
  202. package/data/schemas/user-menu.schema.json +10 -0
  203. package/data/schemas/wizard.schema.json +1 -1
  204. package/package.json +1 -1
  205. package/src/data/load-catalog.d.ts +2 -0
  206. package/src/data/load-catalog.js +5 -1
  207. package/src/data/load-catalog.js.map +1 -1
  208. package/src/data/load-markdown-docs.d.ts +44 -0
  209. package/src/data/load-markdown-docs.js +179 -0
  210. package/src/data/load-markdown-docs.js.map +1 -0
  211. package/src/data/markdown-cache.d.ts +60 -0
  212. package/src/data/markdown-cache.js +218 -0
  213. package/src/data/markdown-cache.js.map +1 -0
  214. package/src/server.js +72 -1
  215. package/src/server.js.map +1 -1
package/data/components/popover-btp.md ADDED
@@ -0,0 +1,886 @@
1
+ ---
2
+ component: fd-popover
3
+ title: BTP/User Menu
4
+ category: BTP
5
+ selector: fd-popover
6
+ cssFile: popover.css
7
+ sourcePath: packages/styles/stories/BTP/user-menu/user-menu.stories.js
8
+ tags: ["btp"]
9
+ dependencies: ["avatar","bar","btp/avatar","button","icon","navigation","popover","user-menu"]
10
+ relatedComponents: ["avatar","bar","button","icon","navigation","popover","user-menu"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.669Z
13
+ ---
14
+
15
+ # BTP/User Menu
16
+
17
+ The User Menu offers a range of options that are specific to the user and is accessible on all BTP tool screens. Users can access it by clicking on the avatar on the end side of the Tool Header. Apart from always available options, the User Menu can also contain tool-specific actions.
18
+
19
+ The BTP implementation extends the Visual Core implementation by adding the <code>.fd-user-menu--tool-header</code> modifier class to the <code>.fd-user-menu</code> base class.
20
+
21
+ ## Dependencies
22
+
23
+ This component depends on the following CSS files:
24
+
25
+ - `avatar.css`
26
+ - `bar.css`
27
+ - `btp/avatar.css`
28
+ - `button.css`
29
+ - `icon.css`
30
+ - `navigation.css`
31
+ - `popover.css`
32
+ - `user-menu.css`
33
+
34
+ ## Installation
35
+
36
+ ```bash
37
+ npm install fundamental-styles
38
+ ```
39
+
40
+ ```html
41
+ <!-- Include theme -->
42
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
43
+
44
+ <!-- Include component CSS -->
45
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
46
+
47
+ <!-- Include dependencies -->
48
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
49
+ <link href="node_modules/fundamental-styles/dist/bar.css" rel="stylesheet">
50
+ <link href="node_modules/fundamental-styles/dist/btp/avatar.css" rel="stylesheet">
51
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
52
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
53
+ <link href="node_modules/fundamental-styles/dist/navigation.css" rel="stylesheet">
54
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
55
+ <link href="node_modules/fundamental-styles/dist/user-menu.css" rel="stylesheet">
56
+ ```
57
+
58
+ ## Basic Usage
59
+
60
+ ```html
61
+ <div class="is-cozy">
62
+ <div class="fd-popover fd-popover--right fd-user-menu fd-user-menu--tool-header">
63
+ <div class="fd-popover__control">
64
+ <span
65
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
66
+ aria-controls="popoverA1TH"
67
+ aria-expanded="true"
68
+ aria-haspopup="true"
69
+ aria-label="Avatar"
70
+
71
+ onclick="onPopoverClick('popoverA1TH');"
72
+ role="button"
73
+ tabindex="0"></span>
74
+ <div class="fd-popover__body fd-popover__body--right fd-user-menu__popover-body" aria-hidden="false" id="popoverA1TH">
75
+ <div class="fd-user-menu__body">
76
+ <div class="fd-user-menu__header">
77
+ <span
78
+ class="fd-avatar fd-avatar--96 fd-avatar--circle fd-avatar--thumbnail fd-user-menu__avatar"
79
+ aria-label="Avatar"
80
+ ></span>
81
+ </div>
82
+ <div class="fd-user-menu__subheader">
83
+ <div class="fd-user-menu__user-name">Kevin Miller</div>
84
+ <div class="fd-user-menu__user-role">Design Expert</div>
85
+ </div>
86
+ <div class="fd-user-menu__navigation-menu">
87
+ <div class="fd-navigation">
88
+ <ul class="fd-navigation__list" role="tree">
89
+ <li class="fd-navigation__list-item" role="treeitem">
90
+ <div
91
+ class="fd-navigation__item fd-navigation__item--menu"
92
+ title="User Account"
93
+ aria-roledescription="Navigation List Tree Item"
94
+ aria-selected="false"
95
+ aria-expanded="false"
96
+ >
97
+ <a class="fd-navigation__link" role="link" href="#">
98
+ <span class="fd-navigation__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></span>
99
+ <span class="fd-navigation__text">User Account</span>
100
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
101
+ </a>
102
+ </div>
103
+
104
+ </li>
105
+ <li class="fd-navigation__list-item fd-popover" role="treeitem">
106
+ <div
107
+ class="fd-navigation__item fd-navigation__item--menu fd-popover__control"
108
+ title="Settings"
109
+ aria-roledescription="Navigation List Tree Item"
110
+ aria-selected="false"
111
+ aria-expanded="true"
112
+ aria-haspopup="tree"
113
+ >
114
+ <a class="fd-navigation__link" role="link" href="#">
115
+ <span class="fd-navigation__icon sap-icon--action-settings" role="presentation" aria-hidden="true"></span>
116
+ <span class="fd-navigation__text">Settings</span>
117
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
118
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
119
+ </a>
120
+ </div>
121
+ <div class="fd-user-menu__navigation-submenu fd-popover__body fd-popover__body--before fd-popover__body--no-arrow" role="tree" aria-roledescription="User Menu Submenu">
122
+ <div class="fd-popover__wrapper fd-user-menu__navigation-submenu-wrapper">
123
+ <ul class="fd-navigation__list fd-navigation__list--child-items">
124
+ <li class="fd-navigation__list-item" role="treeitem">
125
+ <div
126
+ class="fd-navigation__item fd-navigation__item--menu fd-navigation__item--child"
127
+ title="Personalization"
128
+ aria-roledescription="Navigation List Tree Item"
129
+ aria-selected="false"
130
+ aria-expanded="false"
131
+ >
132
+ <a class="fd-navigation__link" role="link" href="#">
133
+ <span class="fd-navigation__text">Personalization</span>
134
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
135
+ </a>
136
+ </div>
137
+ </li>
138
+ <li class="fd-navigation__list-item" role="treeitem">
139
+ <div
140
+ class="fd-navigation__item fd-navigation__item--menu fd-navigation__item--child"
141
+ title="Users and Permissions"
142
+ aria-roledescription="Navigation List Tree Item"
143
+ aria-selected="false"
144
+ aria-expanded="false"
145
+ >
146
+ <a class="fd-navigation__link" role="link" href="#">
147
+ <span class="fd-navigation__text">Users and Permissions</span>
148
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
149
+ </a>
150
+ </div>
151
+ </li>
152
+ <li class="fd-navigation__list-item" role="treeitem">
153
+ <div
154
+ class="fd-navigation__item fd-navigation__item--menu fd-navigation__item--child"
155
+ title="Product Settings"
156
+ aria-roledescription="Navigation List Tree Item"
157
+ aria-selected="false"
158
+ aria-expanded="false"
159
+ >
160
+ <a class="fd-navigation__link" role="link" href="#">
161
+ <span class="fd-navigation__text">Product Settings</span>
162
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
163
+ </a>
164
+ </div>
165
+ </li>
166
+ </ul>
167
+ </div>
168
+ </div>
169
+ </li>
170
+ <li class="fd-navigation__list-item" role="treeitem">
171
+ <div
172
+ class="fd-navigation__item fd-navigation__item--menu"
173
+ title="Product Specific"
174
+ aria-roledescription="Navigation List Tree Item"
175
+ aria-selected="false"
176
+ aria-expanded="false"
177
+ >
178
+ <a class="fd-navigation__link" role="link" href="#">
179
+ <span class="fd-navigation__icon sap-icon--product" role="presentation" aria-hidden="true"></span>
180
+ <span class="fd-navigation__text">Product Specific</span>
181
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
182
+ </a>
183
+ </div>
184
+ </li>
185
+ <li class="fd-navigation__list-item" role="treeitem">
186
+ <div
187
+ class="fd-navigation__item fd-navigation__item--menu"
188
+ title="Product Specific"
189
+ aria-roledescription="Navigation List Tree Item"
190
+ aria-selected="true"
191
+ aria-expanded="false"
192
+ >
193
+ <a class="fd-navigation__link" role="link" href="#">
194
+ <span class="fd-navigation__icon sap-icon--flag" role="presentation" aria-hidden="true"></span>
195
+ <span class="fd-navigation__text">Product Specific</span>
196
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
197
+ </a>
198
+ </div>
199
+ </li>
200
+ <li class="fd-navigation__list-item" role="treeitem">
201
+ <div
202
+ class="fd-navigation__item fd-navigation__item--menu"
203
+ title="Product Specific"
204
+ aria-roledescription="Navigation List Tree Item"
205
+ aria-selected="false"
206
+ aria-expanded="false"
207
+ >
208
+ <a class="fd-navigation__link" role="link" href="#">
209
+ <span class="fd-navigation__icon sap-icon--card" role="presentation" aria-hidden="true"></span>
210
+ <span class="fd-navigation__text">Product Specific</span>
211
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
212
+ </a>
213
+ </li>
214
+ <li class="fd-navigation__list-item" role="treeitem">
215
+ <div
216
+ class="fd-navigation__item fd-navigation__item--menu"
217
+ title="Legal Information"
218
+ aria-roledescription="Navigation List Tree Item"
219
+ aria-selected="false"
220
+ aria-expanded="false"
221
+ >
222
+ <a class="fd-navigation__link" role="link" href="#">
223
+ <span class="fd-navigation__icon sap-icon--card" role="presentation" aria-hidden="true"></span>
224
+ <span class="fd-navigation__text">Legal Information</span>
225
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
226
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
227
+ </a>
228
+ </li>
229
+ </ul>
230
+ <div class="fd-user-menu__footer">
231
+ <button class="fd-button fd-button--compact">Sign Out</button>
232
+ </div>
233
+ ```
234
+
235
+ ## Modifiers
236
+
237
+ | Class | Description |
238
+ |-------|-------------|
239
+ | `fd-popover--right` | Style variant |
240
+
241
+ ## States
242
+
243
+ | Class | Description |
244
+ |-------|-------------|
245
+ | `is-cozy` | Cozy state |
246
+
247
+ ## BEM Elements
248
+
249
+ This component uses the following BEM elements:
250
+
251
+ - `fd-popover__body`
252
+ - `fd-popover__body--before`
253
+ - `fd-popover__body--no-arrow`
254
+ - `fd-popover__body--right`
255
+ - `fd-popover__control`
256
+ - `fd-popover__wrapper`
257
+
258
+ ## Related Components
259
+
260
+ This component works with or depends on:
261
+
262
+ - `avatar`
263
+ - `bar`
264
+ - `button`
265
+ - `icon`
266
+ - `navigation`
267
+ - `popover`
268
+ - `user-menu`
269
+
270
+ ## Design Tokens
271
+
272
+ Key CSS variables used by this component:
273
+
274
+ - `--above`
275
+ - `--after`
276
+ - `--arrow`
277
+ - `--arrow-x-end`
278
+ - `--before`
279
+ - `--bottom`
280
+ - `--btp`
281
+ - `--center`
282
+ - `--display`
283
+ - `--dropdown`
284
+ - `--fdIcon_Button_Height`
285
+ - `--fdIcon_Button_Width`
286
+ - `--fdModal_BackgroundColor`
287
+ - `--fdPopover_Arrow_Size`
288
+ - `--fdPopover_Body_Border_Radius`
289
+
290
+ *...and 5 more*
291
+
292
+ ## Examples
293
+
294
+ ### Desktop
295
+
296
+ ```html
297
+ <div class="is-cozy">
298
+ <div class="fd-popover fd-popover--right fd-user-menu fd-user-menu--tool-header">
299
+ <div class="fd-popover__control">
300
+ <span
301
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
302
+ aria-controls="popoverA1TH"
303
+ aria-expanded="true"
304
+ aria-haspopup="true"
305
+ aria-label="Avatar"
306
+
307
+ onclick="onPopoverClick('popoverA1TH');"
308
+ role="button"
309
+ tabindex="0"></span>
310
+ <div class="fd-popover__body fd-popover__body--right fd-user-menu__popover-body" aria-hidden="false" id="popoverA1TH">
311
+ <div class="fd-user-menu__body">
312
+ <div class="fd-user-menu__header">
313
+ <span
314
+ class="fd-avatar fd-avatar--96 fd-avatar--circle fd-avatar--thumbnail fd-user-menu__avatar"
315
+ aria-label="Avatar"
316
+ ></span>
317
+ </div>
318
+ <div class="fd-user-menu__subheader">
319
+ <div class="fd-user-menu__user-name">Kevin Miller</div>
320
+ <div class="fd-user-menu__user-role">Design Expert</div>
321
+ </div>
322
+ <div class="fd-user-menu__navigation-menu">
323
+ <div class="fd-navigation">
324
+ <ul class="fd-navigation__list" role="tree">
325
+ <li class="fd-navigation__list-item" role="treeitem">
326
+ <div
327
+ class="fd-navigation__item fd-navigation__item--menu"
328
+ title="User Account"
329
+ aria-roledescription="Navigation List Tree Item"
330
+ aria-selected="false"
331
+ aria-expanded="false"
332
+ >
333
+ <a class="fd-navigation__link" role="link" href="#">
334
+ <span class="fd-navigation__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></span>
335
+ <span class="fd-navigation__text">User Account</span>
336
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
337
+ </a>
338
+ </div>
339
+
340
+ </li>
341
+ <li class="fd-navigation__list-item fd-popover" role="treeitem">
342
+ <div
343
+ class="fd-navigation__item fd-navigation__item--menu fd-popover__control"
344
+ title="Settings"
345
+ aria-roledescription="Navigation List Tree Item"
346
+ aria-selected="false"
347
+ aria-expanded="true"
348
+ aria-haspopup="tree"
349
+ >
350
+ <a class="fd-navigation__link" role="link" href="#">
351
+ <span class="fd-navigation__icon sap-icon--action-settings" role="presentation" aria-hidden="true"></span>
352
+ <span class="fd-navigation__text">Settings</span>
353
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
354
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
355
+ </a>
356
+ </div>
357
+ <div class="fd-user-menu__navigation-submenu fd-popover__body fd-popover__body--before fd-popover__body--no-arrow" role="tree" aria-roledescription="User Menu Submenu">
358
+ <div class="fd-popover__wrapper fd-user-menu__navigation-submenu-wrapper">
359
+ <ul class="fd-navigation__list fd-navigation__list--child-items">
360
+ <li class="fd-navigation__list-item" role="treeitem">
361
+ <div
362
+ class="fd-navigation__item fd-navigation__item--menu fd-navigation__item--child"
363
+ title="Personalization"
364
+ aria-roledescription="Navigation List Tree Item"
365
+ aria-selected="false"
366
+ aria-expanded="false"
367
+ >
368
+ <a class="fd-navigation__link" role="link" href="#">
369
+ <span class="fd-navigation__text">Personalization</span>
370
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
371
+ </a>
372
+ </div>
373
+ </li>
374
+ <li class="fd-navigation__list-item" role="treeitem">
375
+ <div
376
+ class="fd-navigation__item fd-navigation__item--menu fd-navigation__item--child"
377
+ title="Users and Permissions"
378
+ aria-roledescription="Navigation List Tree Item"
379
+ aria-selected="false"
380
+ aria-expanded="false"
381
+ >
382
+ <a class="fd-navigation__link" role="link" href="#">
383
+ <span class="fd-navigation__text">Users and Permissions</span>
384
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
385
+ </a>
386
+ </div>
387
+ </li>
388
+ <li class="fd-navigation__list-item" role="treeitem">
389
+ <div
390
+ class="fd-navigation__item fd-navigation__item--menu fd-navigation__item--child"
391
+ title="Product Settings"
392
+ aria-roledescription="Navigation List Tree Item"
393
+ aria-selected="false"
394
+ aria-expanded="false"
395
+ >
396
+ <a class="fd-navigation__link" role="link" href="#">
397
+ <span class="fd-navigation__text">Product Settings</span>
398
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
399
+ </a>
400
+ </div>
401
+ </li>
402
+ </ul>
403
+ </div>
404
+ </div>
405
+ </li>
406
+ <li class="fd-navigation__list-item" role="treeitem">
407
+ <div
408
+ class="fd-navigation__item fd-navigation__item--menu"
409
+ title="Product Specific"
410
+ aria-roledescription="Navigation List Tree Item"
411
+ aria-selected="false"
412
+ aria-expanded="false"
413
+ >
414
+ <a class="fd-navigation__link" role="link" href="#">
415
+ <span class="fd-navigation__icon sap-icon--product" role="presentation" aria-hidden="true"></span>
416
+ <span class="fd-navigation__text">Product Specific</span>
417
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
418
+ </a>
419
+ </div>
420
+ </li>
421
+ <li class="fd-navigation__list-item" role="treeitem">
422
+ <div
423
+ class="fd-navigation__item fd-navigation__item--menu"
424
+ title="Product Specific"
425
+ aria-roledescription="Navigation List Tree Item"
426
+ aria-selected="true"
427
+ aria-expanded="false"
428
+ >
429
+ <a class="fd-navigation__link" role="link" href="#">
430
+ <span class="fd-navigation__icon sap-icon--flag" role="presentation" aria-hidden="true"></span>
431
+ <span class="fd-navigation__text">Product Specific</span>
432
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
433
+ </a>
434
+ </div>
435
+ </li>
436
+ <li class="fd-navigation__list-item" role="treeitem">
437
+ <div
438
+ class="fd-navigation__item fd-navigation__item--menu"
439
+ title="Product Specific"
440
+ aria-roledescription="Navigation List Tree Item"
441
+ aria-selected="false"
442
+ aria-expanded="false"
443
+ >
444
+ <a class="fd-navigation__link" role="link" href="#">
445
+ <span class="fd-navigation__icon sap-icon--card" role="presentation" aria-hidden="true"></span>
446
+ <span class="fd-navigation__text">Product Specific</span>
447
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
448
+ </a>
449
+ </li>
450
+ <li class="fd-navigation__list-item" role="treeitem">
451
+ <div
452
+ class="fd-navigation__item fd-navigation__item--menu"
453
+ title="Legal Information"
454
+ aria-roledescription="Navigation List Tree Item"
455
+ aria-selected="false"
456
+ aria-expanded="false"
457
+ >
458
+ <a class="fd-navigation__link" role="link" href="#">
459
+ <span class="fd-navigation__icon sap-icon--card" role="presentation" aria-hidden="true"></span>
460
+ <span class="fd-navigation__text">Legal Information</span>
461
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
462
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
463
+ </a>
464
+ </li>
465
+ </ul>
466
+ <div class="fd-user-menu__footer">
467
+ <button class="fd-button fd-button--compact">Sign Out</button>
468
+ </div>
469
+ ```
470
+
471
+ ### Tablet
472
+
473
+ ```html
474
+ <div class="is-cozy">
475
+ <div class="fd-popover fd-popover--right fd-user-menu fd-user-menu--tool-header">
476
+ <div class="fd-popover__control">
477
+ <span
478
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
479
+ aria-controls="popoverA2TH"
480
+ aria-expanded="true"
481
+ aria-haspopup="true"
482
+ aria-label="Avatar"
483
+
484
+ onclick="onPopoverClick('popoverA2TH');"
485
+ role="button"
486
+ tabindex="0"></span>
487
+ <div class="fd-popover__body fd-popover__body--right fd-user-menu__popover-body" aria-hidden="false" id="popoverA2TH">
488
+ <div class="fd-user-menu__body fd-popover__wrapper">
489
+ <div class="fd-user-menu__header">
490
+ <span
491
+ class="fd-avatar fd-avatar--96 fd-avatar--circle fd-avatar--thumbnail fd-user-menu__avatar"
492
+ aria-label="Avatar"
493
+ ></span>
494
+ </div>
495
+ <div class="fd-user-menu__subheader">
496
+ <div class="fd-user-menu__user-name">Kevin Miller</div>
497
+ <div class="fd-user-menu__user-role">Design Expert</div>
498
+ </div>
499
+ <div class="fd-user-menu__navigation-menu">
500
+ <div class="fd-navigation fd-navigation--tablet">
501
+ <ul class="fd-navigation__list" role="tree">
502
+ <li class="fd-navigation__list-item" role="treeitem">
503
+ <div
504
+ class="fd-navigation__item fd-navigation__item--menu"
505
+ title="User Account"
506
+ aria-roledescription="Navigation List Tree Item"
507
+ aria-selected="false"
508
+ aria-expanded="false"
509
+ >
510
+ <a class="fd-navigation__link" role="link" href="#">
511
+ <span class="fd-navigation__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></span>
512
+ <span class="fd-navigation__text">User Account</span>
513
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
514
+ </a>
515
+ </div>
516
+
517
+ </li>
518
+ <li class="fd-navigation__list-item fd-popover" role="treeitem">
519
+ <div
520
+ class="fd-navigation__item fd-navigation__item--menu fd-popover__control"
521
+ title="Settings"
522
+ aria-roledescription="Navigation List Tree Item"
523
+ aria-selected="false"
524
+ aria-expanded="true"
525
+ aria-haspopup="tree"
526
+ >
527
+ <a class="fd-navigation__link" role="link" href="#">
528
+ <span class="fd-navigation__icon sap-icon--action-settings" role="presentation" aria-hidden="true"></span>
529
+ <span class="fd-navigation__text">Settings</span>
530
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
531
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
532
+ </a>
533
+ </div>
534
+ <div class="fd-user-menu__navigation-submenu fd-popover__body fd-popover__body--before fd-popover__body--no-arrow" role="tree" aria-roledescription="User Menu Submenu">
535
+ <div class="fd-popover__wrapper fd-user-menu__navigation-submenu-wrapper">
536
+ <ul class="fd-navigation__list fd-navigation__list--child-items">
537
+ <li class="fd-navigation__list-item" role="treeitem">
538
+ <div
539
+ class="fd-navigation__item fd-navigation__item--menu fd-navigation__item--child"
540
+ title="Personalization"
541
+ aria-roledescription="Navigation List Tree Item"
542
+ aria-selected="false"
543
+ aria-expanded="false"
544
+ >
545
+ <a class="fd-navigation__link" role="link" href="#">
546
+ <span class="fd-navigation__text">Personalization</span>
547
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
548
+ </a>
549
+ </div>
550
+ </li>
551
+ <li class="fd-navigation__list-item" role="treeitem">
552
+ <div
553
+ class="fd-navigation__item fd-navigation__item--menu fd-navigation__item--child"
554
+ title="Users and Permissions"
555
+ aria-roledescription="Navigation List Tree Item"
556
+ aria-selected="false"
557
+ aria-expanded="false"
558
+ >
559
+ <a class="fd-navigation__link" role="link" href="#">
560
+ <span class="fd-navigation__text">Users and Permissions</span>
561
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
562
+ </a>
563
+ </div>
564
+ </li>
565
+ <li class="fd-navigation__list-item" role="treeitem">
566
+ <div
567
+ class="fd-navigation__item fd-navigation__item--menu fd-navigation__item--child"
568
+ title="Product Settings"
569
+ aria-roledescription="Navigation List Tree Item"
570
+ aria-selected="false"
571
+ aria-expanded="false"
572
+ >
573
+ <a class="fd-navigation__link" role="link" href="#">
574
+ <span class="fd-navigation__text">Product Settings</span>
575
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
576
+ </a>
577
+ </div>
578
+ </li>
579
+ </ul>
580
+ </div>
581
+ </div>
582
+ </li>
583
+ <li class="fd-navigation__list-item" role="treeitem">
584
+ <div
585
+ class="fd-navigation__item fd-navigation__item--menu"
586
+ title="Product Specific"
587
+ aria-roledescription="Navigation List Tree Item"
588
+ aria-selected="false"
589
+ aria-expanded="false"
590
+ >
591
+ <a class="fd-navigation__link" role="link" href="#">
592
+ <span class="fd-navigation__icon sap-icon--product" role="presentation" aria-hidden="true"></span>
593
+ <span class="fd-navigation__text">Product Specific</span>
594
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
595
+ </a>
596
+ </div>
597
+ </li>
598
+ <li class="fd-navigation__list-item" role="treeitem">
599
+ <div
600
+ class="fd-navigation__item fd-navigation__item--menu"
601
+ title="Product Specific"
602
+ aria-roledescription="Navigation List Tree Item"
603
+ aria-selected="true"
604
+ aria-expanded="false"
605
+ >
606
+ <a class="fd-navigation__link" role="link" href="#">
607
+ <span class="fd-navigation__icon sap-icon--flag" role="presentation" aria-hidden="true"></span>
608
+ <span class="fd-navigation__text">Product Specific</span>
609
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
610
+ </a>
611
+ </div>
612
+ </li>
613
+ <li class="fd-navigation__list-item" role="treeitem">
614
+ <div
615
+ class="fd-navigation__item fd-navigation__item--menu"
616
+ title="Product Specific"
617
+ aria-roledescription="Navigation List Tree Item"
618
+ aria-selected="false"
619
+ aria-expanded="false"
620
+ >
621
+ <a class="fd-navigation__link" role="link" href="#">
622
+ <span class="fd-navigation__icon sap-icon--card" role="presentation" aria-hidden="true"></span>
623
+ <span class="fd-navigation__text">Product Specific</span>
624
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
625
+ </a>
626
+ </li>
627
+ <li class="fd-navigation__list-item" role="treeitem">
628
+ <div
629
+ class="fd-navigation__item fd-navigation__item--menu"
630
+ title="Legal Information"
631
+ aria-roledescription="Navigation List Tree Item"
632
+ aria-selected="false"
633
+ aria-expanded="false"
634
+ >
635
+ <a class="fd-navigation__link" role="link" href="#">
636
+ <span class="fd-navigation__icon sap-icon--card" role="presentation" aria-hidden="true"></span>
637
+ <span class="fd-navigation__text">Legal Information</span>
638
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
639
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
640
+ </a>
641
+ </li>
642
+ </ul>
643
+ <div class="fd-user-menu__footer">
644
+ <button class="fd-button">Sign Out</button>
645
+ </div>
646
+ ```
647
+
648
+ ### Phone
649
+
650
+ ```html
651
+ <div class="is-cozy">
652
+ <div class="fd-popover fd-popover--right fd-user-menu fd-user-menu--tool-header">
653
+ <div class="fd-popover__control">
654
+ <span
655
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
656
+ aria-controls="popoverA3TH"
657
+ aria-expanded="true"
658
+ aria-haspopup="true"
659
+ aria-label="Avatar"
660
+
661
+ onclick="onPopoverClick('popoverA3TH');"
662
+ role="button"
663
+ tabindex="0"></span>
664
+ <div class="fd-popover__body fd-popover__body--right fd-user-menu__popover-body" aria-hidden="false" id="popoverA3TH">
665
+ <div class="fd-user-menu__body fd-popover__wrapper">
666
+ <div class="fd-user-menu__header">
667
+ <span
668
+ class="fd-avatar fd-avatar--96 fd-avatar--circle fd-avatar--thumbnail fd-user-menu__avatar"
669
+ aria-label="Avatar"
670
+ ></span>
671
+ </div>
672
+ <div class="fd-user-menu__subheader">
673
+ <div class="fd-user-menu__user-name">Kevin Miller</div>
674
+ <div class="fd-user-menu__user-role">Design Expert</div>
675
+ </div>
676
+ <div class="fd-user-menu__navigation-menu">
677
+ <div class="fd-navigation fd-navigation--phone">
678
+ <ul class="fd-navigation__list" role="tree">
679
+ <li class="fd-navigation__list-item" role="treeitem">
680
+ <div
681
+ class="fd-navigation__item fd-navigation__item--menu"
682
+ title="User Account"
683
+ aria-roledescription="Navigation List Tree Item"
684
+ aria-selected="false"
685
+ aria-expanded="false"
686
+ >
687
+ <a class="fd-navigation__link" role="link" href="#">
688
+ <span class="fd-navigation__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></span>
689
+ <span class="fd-navigation__text">User Account</span>
690
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
691
+ </a>
692
+ </div>
693
+
694
+ </li>
695
+ <li class="fd-navigation__list-item" role="treeitem">
696
+ <div
697
+ class="fd-navigation__item fd-navigation__item--menu"
698
+ title="Settings"
699
+ aria-roledescription="Navigation List Tree Item"
700
+ aria-selected="false"
701
+ aria-expanded="true"
702
+ >
703
+ <a class="fd-navigation__link" role="link" href="#">
704
+ <span class="fd-navigation__icon sap-icon--action-settings" role="presentation" aria-hidden="true"></span>
705
+ <span class="fd-navigation__text">Settings</span>
706
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
707
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
708
+ </a>
709
+ </div>
710
+ </li>
711
+ <li class="fd-navigation__list-item" role="treeitem">
712
+ <div
713
+ class="fd-navigation__item fd-navigation__item--menu"
714
+ title="Product Specific"
715
+ aria-roledescription="Navigation List Tree Item"
716
+ aria-selected="false"
717
+ aria-expanded="false"
718
+ >
719
+ <a class="fd-navigation__link" role="link" href="#">
720
+ <span class="fd-navigation__icon sap-icon--product" role="presentation" aria-hidden="true"></span>
721
+ <span class="fd-navigation__text">Product Specific</span>
722
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
723
+ </a>
724
+ </div>
725
+ </li>
726
+ <li class="fd-navigation__list-item" role="treeitem">
727
+ <div
728
+ class="fd-navigation__item fd-navigation__item--menu"
729
+ title="Product Specific"
730
+ aria-roledescription="Navigation List Tree Item"
731
+ aria-selected="true"
732
+ aria-expanded="false"
733
+ >
734
+ <a class="fd-navigation__link" role="link" href="#">
735
+ <span class="fd-navigation__icon sap-icon--flag" role="presentation" aria-hidden="true"></span>
736
+ <span class="fd-navigation__text">Product Specific</span>
737
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
738
+ </a>
739
+ </div>
740
+ </li>
741
+ <li class="fd-navigation__list-item" role="treeitem">
742
+ <div
743
+ class="fd-navigation__item fd-navigation__item--menu"
744
+ title="Product Specific"
745
+ aria-roledescription="Navigation List Tree Item"
746
+ aria-selected="false"
747
+ aria-expanded="false"
748
+ >
749
+ <a class="fd-navigation__link" role="link" href="#">
750
+ <span class="fd-navigation__icon sap-icon--card" role="presentation" aria-hidden="true"></span>
751
+ <span class="fd-navigation__text">Product Specific</span>
752
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
753
+ </a>
754
+ </div>
755
+ </li>
756
+ <li class="fd-navigation__list-item" role="treeitem">
757
+ <div
758
+ class="fd-navigation__item fd-navigation__item--menu"
759
+ title="Legal Information"
760
+ aria-roledescription="Navigation List Tree Item"
761
+ aria-selected="false"
762
+ aria-expanded="false"
763
+ >
764
+ <a class="fd-navigation__link" role="link" href="#">
765
+ <span class="fd-navigation__icon sap-icon--card" role="presentation" aria-hidden="true"></span>
766
+ <span class="fd-navigation__text">Legal Information</span>
767
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
768
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
769
+ </a>
770
+ </div>
771
+ </li>
772
+ </ul>
773
+ </div>
774
+ <div class="fd-bar fd-bar--footer">
775
+ <div class="fd-bar__right">
776
+ <div class="fd-bar__element">
777
+ <button aria-label="button" class="fd-button fd-button--transparent fd-button--compact">Sign Out</button>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ <div class="is-cozy">
782
+ <div class="fd-popover fd-popover--right fd-user-menu fd-user-menu--tool-header">
783
+ <div class="fd-popover__control">
784
+ <span
785
+ class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail"
786
+ aria-controls="popoverA4TH"
787
+ aria-expanded="true"
788
+ aria-haspopup="true"
789
+ aria-label="Avatar"
790
+
791
+ onclick="onPopoverClick('popoverA4TH');"
792
+ role="button"
793
+ tabindex="0"></span>
794
+ <div class="fd-popover__body fd-popover__body--right fd-user-menu__popover-body" aria-hidden="false" id="popoverA4TH">
795
+ <div class="fd-user-menu__body fd-popover__wrapper">
796
+ <div class="fd-user-menu__navigation-menu">
797
+ <div class="fd-navigation fd-navigation--phone">
798
+ <ul class="fd-navigation__list"
799
+ role="tree"
800
+ aria-roledescription="Navigation List Tree"
801
+ aria-hidden="false">
802
+ <li class="fd-navigation__list-item" aria-hidden="true">
803
+ <div class="fd-navigation__item fd-navigation__item--title" aria-level="1" role="treeitem" aria-expanded="true" aria-selected="false" >
804
+ <a class="fd-navigation__link" role="button" tabindex="0">
805
+ <span class="fd-navigation__icon sap-icon--navigation-left-arrow" role="presentation" aria-hidden="true"></span>
806
+ <span class="fd-navigation__back-indicator" role="presentation" aria-hidden="true"></span>
807
+ <span class="fd-navigation__text">Settings</span>
808
+ <span class="fd-navigation__selection-indicator"></span>
809
+ </a>
810
+ </div>
811
+ <ul
812
+ class="fd-navigation__list fd-navigation__list--child-items"
813
+ role="group"
814
+ aria-roledescription="Navigation List Tree - Child Items"
815
+ tabindex="-1"
816
+ aria-hidden="true"
817
+ >
818
+ <li class="fd-navigation__list-item" aria-hidden="true">
819
+ <div
820
+ class="fd-navigation__item fd-navigation__item--child fd-navigation__item--menu"
821
+ aria-level="2"
822
+ role="treeitem"
823
+ title="Personalization"
824
+ aria-roledescription="Navigation List Menu Item - Child"
825
+ aria-expanded="false"
826
+ aria-selected="false"
827
+ >
828
+ <a class="fd-navigation__link" role="link" href="#">
829
+ <span class="fd-navigation__text">Personalization</span>
830
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
831
+ </a>
832
+ </div>
833
+ </li>
834
+ <li class="fd-navigation__list-item" aria-hidden="true">
835
+ <div
836
+ class="fd-navigation__item fd-navigation__item--child fd-navigation__item--menu"
837
+ aria-level="2"
838
+ role="treeitem"
839
+ title="Users and Permissions"
840
+ aria-roledescription="Navigation List Menu Item - Child"
841
+ aria-expanded="false"
842
+ aria-selected="true"
843
+ >
844
+ <a class="fd-navigation__link" role="link" href="#">
845
+ <span class="fd-navigation__text">Users and Permissions</span>
846
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
847
+ </a>
848
+ </div>
849
+ </li>
850
+ <li class="fd-navigation__list-item" aria-hidden="true">
851
+ <div
852
+ class="fd-navigation__item fd-navigation__item--child fd-navigation__item--menu"
853
+ aria-level="2"
854
+ role="treeitem"
855
+ title="Product Settings"
856
+ aria-roledescription="Navigation List Menu Item - Child"
857
+ aria-expanded="false"
858
+ aria-selected="false"
859
+ >
860
+ <a class="fd-navigation__link" role="link" href="#">
861
+ <span class="fd-navigation__text">Product Settings</span>
862
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
863
+ </a>
864
+ </div>
865
+ </li>
866
+ </ul>
867
+ </li>
868
+ </ul>
869
+ </div>
870
+ </div>
871
+ </div>
872
+ </div>
873
+ ```
874
+
875
+ ## Accessibility
876
+
877
+ - Use semantic HTML elements where appropriate
878
+ - Include proper ARIA attributes for interactive elements
879
+ - Ensure keyboard navigation support
880
+ - Provide adequate color contrast
881
+
882
+ ## Source
883
+
884
+ This documentation was automatically generated from: `packages/styles/stories/BTP/user-menu/user-menu.stories.js`
885
+
886
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).