@fundamental-styles/mcp 0.41.7-rc.9 → 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 (214) hide show
  1. package/data/AI_USAGE.md +425 -0
  2. package/data/CHANGELOG.md +44 -0
  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/schemas/badge.schema.json +1 -1
  177. package/data/schemas/button-split.schema.json +1 -1
  178. package/data/schemas/component-frontmatter.schema.json +123 -0
  179. package/data/schemas/component-markdown.schema.json +81 -0
  180. package/data/schemas/counter.schema.json +1 -1
  181. package/data/schemas/dynamic-page.schema.json +1 -1
  182. package/data/schemas/dynamic-side-content.schema.json +1 -1
  183. package/data/schemas/facet.schema.json +1 -1
  184. package/data/schemas/fieldset.schema.json +1 -1
  185. package/data/schemas/flexible-column-layout.schema.json +1 -1
  186. package/data/schemas/form-group.schema.json +3 -2
  187. package/data/schemas/form-header.schema.json +1 -1
  188. package/data/schemas/form-label.schema.json +1 -0
  189. package/data/schemas/form-message.schema.json +1 -1
  190. package/data/schemas/grid-list.schema.json +1 -1
  191. package/data/schemas/input-group.schema.json +1 -1
  192. package/data/schemas/layout-panel.schema.json +1 -1
  193. package/data/schemas/page.schema.json +1 -1
  194. package/data/schemas/quick-view.schema.json +2 -1
  195. package/data/schemas/section.schema.json +1 -1
  196. package/data/schemas/side-nav.schema.json +1 -1
  197. package/data/schemas/splitter.schema.json +1 -1
  198. package/data/schemas/tabs.schema.json +1 -1
  199. package/data/schemas/tile.schema.json +1 -1
  200. package/data/schemas/tool-layout.schema.json +1 -1
  201. package/data/schemas/user-menu.schema.json +10 -0
  202. package/data/schemas/wizard.schema.json +1 -1
  203. package/package.json +1 -1
  204. package/src/data/load-catalog.d.ts +2 -0
  205. package/src/data/load-catalog.js +5 -1
  206. package/src/data/load-catalog.js.map +1 -1
  207. package/src/data/load-markdown-docs.d.ts +44 -0
  208. package/src/data/load-markdown-docs.js +179 -0
  209. package/src/data/load-markdown-docs.js.map +1 -0
  210. package/src/data/markdown-cache.d.ts +60 -0
  211. package/src/data/markdown-cache.js +218 -0
  212. package/src/data/markdown-cache.js.map +1 -0
  213. package/src/server.js +72 -1
  214. package/src/server.js.map +1 -1
package/data/components/popover-user-menu.md ADDED
@@ -0,0 +1,1303 @@
1
+ ---
2
+ component: fd-popover
3
+ title: Components/User Menu
4
+ category: Components
5
+ selector: fd-popover
6
+ cssFile: popover.css
7
+ sourcePath: packages/styles/stories/Components/user-menu/user-menu.stories.js
8
+ tags: ["uxc"]
9
+ dependencies: ["avatar","badge","bar","button","icon","input","input-group","list","menu","message-strip","navigation-list","notification","panel","popover","shellbar","tabs","title","toolbar","user-menu"]
10
+ relatedComponents: ["avatar","badge","bar","button","icon","input","input-group","list","menu","message-strip","navigation-list","notification","panel","popover","shellbar","tabs","title","toolbar","user-menu"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.478Z
13
+ ---
14
+
15
+ # Components/User Menu
16
+
17
+ The User Menu is an integral part of the Shell Bar, accessible by clicking the avatar located at its far-right end. It provides user-specific options and remains available across all screens. In addition to standard options, the User Menu can include product-specific functionality.
18
+ <br>
19
+ The User Menu can display the following:
20
+ <ul>
21
+ <li>Current user information</li>
22
+ <li>Switch between accounts</li>
23
+ <li>User Menu items</li>
24
+ </ul>
25
+
26
+ ### When to use
27
+ <ul>
28
+ <li>To present user-specific information, settings, and actions.</li>
29
+ <li>To enable account switching.</li>
30
+ <li>To display product-related and legal information.</li>
31
+ <li>To facilitate Sign In or Sign Out actions.</li>
32
+ </ul>
33
+
34
+ ### When not to use
35
+ <ul>
36
+ <li>Navigation: Avoid including navigational elements.</li>
37
+ <li>Home Page Customization: Exclude items related to customizing the home page.</li>
38
+ <li>Inactive Items: Hide inactive items instead of displaying them as disabled.</li>
39
+ <li>Content Overload: Keep the menu concise by limiting links to essential items only.</li>
40
+ <li>Dynamic Content: Avoid altering the menu content within the product.</li>
41
+ </ul>
42
+
43
+ ### Anatomy
44
+ The User Menu popover is composed of the following components:
45
+
46
+ <b>Custom Popover Header</b><br>
47
+ Represents the current user and includes:
48
+
49
+ <ul>
50
+ <li>Popover: Contains the entire User Menu content.</li>
51
+ <li>Avatar: A key visual element displaying the user's profile picture. If no profile picture is available, it shows the user's initials. If the user is not signed in, an icon is displayed.</li>
52
+ <li>Title: A required UI element showing the user's First and Last names. To truncate long titles use the <code>.fd-user-menu\\_\\_user-name--truncate</code> modifier class.</li>
53
+ <li>Subtitle 1 (subline): An optional secondary identifier, such as user ID or email.</li>
54
+ <li>Subtitle 2 (subline): An optional identifier, such as role, position, organization, or unit.</li>
55
+ <li>Subtitle 3 (subline): An optional identifier, such as role, position, organization, or unit. To truncate long subtitles use the <code>.fd-user-menu\\_\\_subline--truncate</code> modifier class.</li>
56
+ <li>Manage Account Button: Links to account settings.</li>
57
+ </ul>
58
+
59
+ <b>Content Container</b><br>
60
+ Holds user account and menu items:
61
+
62
+ <ul>
63
+ <li>
64
+ Panel
65
+ <ul>
66
+ <li>Includes a header with an Add Account button and a list of accounts.</li>
67
+ <li>The Other Accounts section (optional) allows users to sign in with or switch between accounts.</li>
68
+ </ul>
69
+ </li>
70
+ <li>
71
+ List
72
+ <ul>
73
+ <li>Displays List Items for user accounts.</li>
74
+ <li>Hosts mandatory menu items (e.g., Settings, Legal Information, About, Sign In/Out) and custom items.</li>
75
+ </ul>
76
+ </li>
77
+ </ul>
78
+
79
+ ## Dependencies
80
+
81
+ This component depends on the following CSS files:
82
+
83
+ - `avatar.css`
84
+ - `badge.css`
85
+ - `bar.css`
86
+ - `button.css`
87
+ - `icon.css`
88
+ - `input.css`
89
+ - `input-group.css`
90
+ - `list.css`
91
+ - `menu.css`
92
+ - `message-strip.css`
93
+ - `navigation-list.css`
94
+ - `notification.css`
95
+ - `panel.css`
96
+ - `popover.css`
97
+ - `shellbar.css`
98
+ - `tabs.css`
99
+ - `title.css`
100
+ - `toolbar.css`
101
+ - `user-menu.css`
102
+
103
+ ## Installation
104
+
105
+ ```bash
106
+ npm install fundamental-styles
107
+ ```
108
+
109
+ ```html
110
+ <!-- Include theme -->
111
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
112
+
113
+ <!-- Include component CSS -->
114
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
115
+
116
+ <!-- Include dependencies -->
117
+ <link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
118
+ <link href="node_modules/fundamental-styles/dist/badge.css" rel="stylesheet">
119
+ <link href="node_modules/fundamental-styles/dist/bar.css" rel="stylesheet">
120
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
121
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
122
+ <link href="node_modules/fundamental-styles/dist/input.css" rel="stylesheet">
123
+ <link href="node_modules/fundamental-styles/dist/input-group.css" rel="stylesheet">
124
+ <link href="node_modules/fundamental-styles/dist/list.css" rel="stylesheet">
125
+ <link href="node_modules/fundamental-styles/dist/menu.css" rel="stylesheet">
126
+ <link href="node_modules/fundamental-styles/dist/message-strip.css" rel="stylesheet">
127
+ <link href="node_modules/fundamental-styles/dist/navigation-list.css" rel="stylesheet">
128
+ <link href="node_modules/fundamental-styles/dist/notification.css" rel="stylesheet">
129
+ <link href="node_modules/fundamental-styles/dist/panel.css" rel="stylesheet">
130
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
131
+ <link href="node_modules/fundamental-styles/dist/shellbar.css" rel="stylesheet">
132
+ <link href="node_modules/fundamental-styles/dist/tabs.css" rel="stylesheet">
133
+ <link href="node_modules/fundamental-styles/dist/title.css" rel="stylesheet">
134
+ <link href="node_modules/fundamental-styles/dist/toolbar.css" rel="stylesheet">
135
+ <link href="node_modules/fundamental-styles/dist/user-menu.css" rel="stylesheet">
136
+ ```
137
+
138
+ ## Basic Usage
139
+
140
+ ```html
141
+ <div class="fd-popover fd-popover--right fd-user-menu">
142
+ <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
143
+ <div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
144
+ <div class="fd-user-menu__body">
145
+ <div class="fd-user-menu__header">
146
+ <span
147
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
148
+ aria-label="Avatar"
149
+
150
+ >
151
+ <i
152
+ class="fd-avatar__zoom-icon sap-icon--edit"
153
+ aria-label="Edit"
154
+ role="presentation"
155
+ aria-hidden="true"
156
+ ></i>
157
+ </span>
158
+ <div class="fd-user-menu__header-container">
159
+ <div class="fd-user-menu__user-name">Lisa Miller</div>
160
+ <div class="fd-user-menu__subline">lisa.miller@test.com</div>
161
+ <div class="fd-user-menu__subline">User Experience Designer</div>
162
+ <div class="fd-user-menu__subline">Primary Employment</div>
163
+ </div>
164
+ <div class="fd-user-menu__header-content-area">
165
+ Header Content Area
166
+ </div>
167
+ </div>
168
+ <div class="fd-user-menu__content-container">
169
+ <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
170
+ <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
171
+ <li class="fd-menu__item" role="presentation">
172
+ <a class="fd-menu__link" href="#" role="menuitem">
173
+ <span class="fd-menu__addon-before">
174
+ <i class="sap-icon--action-settings" role="presentation"></i>
175
+ </span>
176
+ <span class="fd-menu__title">Settings</span>
177
+ </a>
178
+ </li>
179
+
180
+ <li class="fd-menu__item" role="presentation">
181
+ <span
182
+ class="fd-menu__link has-child is-expanded"
183
+ aria-controls="EX100M2A"
184
+ aria-expanded="true"
185
+ aria-haspopup="true"
186
+ role="menuitem"
187
+ >
188
+ <span class="fd-menu__addon-before">
189
+ <i class="sap-icon--card" role="presentation"></i>
190
+ </span>
191
+ <div class="fd-menu__content">
192
+ <span class="fd-menu__title">Menu Item</span>
193
+ <span class="fd-menu__subtitle">Sub-menu List Item</span>
194
+ </div>
195
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
196
+ </span>
197
+
198
+ <ul
199
+ class="fd-menu__sublist fd-menu__sublist--icons"
200
+ id="EX100M2A"
201
+ aria-hidden="false"
202
+ role="menu"
203
+ >
204
+ <li class="fd-menu__item" role="presentation">
205
+ <a class="fd-menu__link" href="#" role="menuitem">
206
+ <span class="fd-menu__addon-before"
207
+ ><i class="sap-icon--card" role="presentation"></i
208
+ ></span>
209
+ <span class="fd-menu__title">Sub-menu Item</span>
210
+ </a>
211
+ </li>
212
+ <li class="fd-menu__item" role="presentation">
213
+ <a class="fd-menu__link" href="#" role="menuitem">
214
+ <span class="fd-menu__title">Sub-menu Item</span>
215
+ </a>
216
+ </li>
217
+ </ul>
218
+ </li>
219
+
220
+ <li class="fd-menu__item" role="presentation">
221
+ <a class="fd-menu__link" href="#" role="menuitem">
222
+ <span class="fd-menu__addon-before">
223
+ <i class="sap-icon--official-service" role="presentation"></i>
224
+ </span>
225
+ <span class="fd-menu__title">Legal Information</span>
226
+ </a>
227
+ </li>
228
+
229
+ <li class="fd-menu__item" role="presentation">
230
+ <a class="fd-menu__link" href="#" role="menuitem">
231
+ <span class="fd-menu__addon-before">
232
+ <i class="sap-icon--message-information" role="presentation"></i>
233
+ </span>
234
+ <span class="fd-menu__title">About</span>
235
+ </a>
236
+ </li>
237
+ </ul>
238
+ </nav>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ <div class="fd-bar fd-bar--footer">
243
+ <div class="fd-bar__right">
244
+ <div class="fd-bar__element">
245
+ <button aria-label="button" class="fd-button fd-button--transparent">
246
+ <i class="sap-icon--log"></i>
247
+ <span class="fd-button__text"> Sign Out</span>
248
+ </button>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="fd-popover fd-popover--right fd-user-menu">
256
+ <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
257
+ <div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
258
+ <div class="fd-user-menu__body">
259
+ <div class="fd-user-menu__header">
260
+ <span
261
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
262
+ aria-label="Avatar"
263
+
264
+ >
265
+ <i
266
+ class="fd-avatar__zoom-icon sap-icon--edit"
267
+ aria-label="Edit"
268
+ role="presentation"
269
+ aria-hidden="true"
270
+ ></i>
271
+ </span>
272
+ <div class="fd-user-menu__header-container">
273
+ <div class="fd-user-menu__user-name">Lisa Miller</div>
274
+ <div class="fd-user-menu__subline">lisa.miller@test.com</div>
275
+ <div class="fd-user-menu__subline">User Experience Designer</div>
276
+ <div class="fd-user-menu__subline">Primary Employment</div>
277
+ </div>
278
+ <div class="fd-user-menu__header-content-area">
279
+ <div
280
+ role="note"
281
+ aria-labelledby="message-strip-hidden-text-2 message-strip-text-2"
282
+ class="fd-message-strip fd-message-strip--information"
283
+ >
284
+ <span class="fd-message-strip__sr-only" id="message-strip-hidden-text-2"
285
+ >Information Bar Closable</span
286
+ >
287
+
288
+ <div class="fd-message-strip__icon-container" aria-hidden="true">
289
+ <span
290
+ class="sap-icon sap-icon--message-information"
291
+ role="presentation"
292
+ aria-hidden="true"
293
+ ></span>
294
+ </div>
295
+
296
+ <p class="fd-message-strip__text" id="message-strip-text-2">
297
+ This is an information massage.
298
+ </p>
299
+ </div>
300
+ </div>
301
+ <button aria-label="Manage Account" class="fd-button">
302
+ <i class="sap-icon--user-settings"></i>
303
+ <span class="fd-button__text">Manage Account</span>
304
+ </button>
305
+ </div>
306
+ <div class="fd-user-menu__content-container">
307
+ <div class="fd-panel fd-user-menu__panel" aria-labelledby="__panel-title-8" role="form">
308
+ <div class="fd-panel__header">
309
+ <div class="fd-panel__expand">
310
+ <button
311
+ class="fd-button fd-button--transparent fd-panel__button"
312
+ aria-expanded="true"
313
+ aria-haspopup="true"
314
+ aria-label="expand/collapse panel"
315
+ aria-controls="__panel-8"
316
+ >
317
+ <i class="sap-icon--slim-arrow-down"></i>
318
+ </button>
319
+ </div>
320
+ <h4 class="fd-panel__title" id="__panel-title-8">Accounts (3)</h4>
321
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
322
+ <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
323
+ <button
324
+ class="fd-button fd-button--transparent"
325
+ aria-label="Add Account"
326
+ title="Add Account"
327
+ >
328
+ <i class="sap-icon--user-edit"></i>
329
+ </button>
330
+ </div>
331
+ </div>
332
+ <div
333
+ role="region"
334
+ aria-labelledby="__panel-title-8"
335
+ class="fd-panel__content fd-panel__content--no-padding"
336
+ aria-hidden="false"
337
+ id="__panel-8"
338
+ >
339
+ <ul class="fd-list fd-list--subline" role="list">
340
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
341
+ <span
342
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail"
343
+
344
+ role="img"
345
+ aria-label="Jane Doe"
346
+ ></span>
347
+ <div class="fd-list__content">
348
+ <div class="fd-list__title">Lisa Miller Lorem</div>
349
+ <div class="fd-list__subline">lisa.miller@test.com</div>
350
+ <div class="fd-list__subline">Delivery Manager</div>
351
+ </div>
352
+ <span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
353
+ </li>
354
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
355
+ <span
356
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail"
357
+
358
+ role="img"
359
+ aria-label="John Doe"
360
+ ></span>
361
+ <div class="fd-list__content">
362
+ <div class="fd-list__title">John Doe</div>
363
+ <div class="fd-list__subline">john.doe@test.com</div>
364
+ <div class="fd-list__subline">Project Manager</div>
365
+ </div>
366
+ </li>
367
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
368
+ <span
369
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10"
370
+ aria-role="img"
371
+ aria-label="Jane Doe"
372
+ >JD</span
373
+ >
374
+ <div class="fd-list__content">
375
+ <div class="fd-list__title">Jane Doe</div>
376
+ <div class="fd-list__subline">jane.doe@test.com</div>
377
+ <div class="fd-list__subline">User Experience Designer</div>
378
+ </div>
379
+ </li>
380
+ </ul>
381
+ </div>
382
+ </div>
383
+ <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
384
+ <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
385
+ <li class="fd-menu__item" role="presentation">
386
+ <a class="fd-menu__link" href="#" role="menuitem">
387
+ <span class="fd-menu__addon-before">
388
+ <i class="sap-icon--action-settings" role="presentation"></i>
389
+ </span>
390
+ <span class="fd-menu__title">Settings</span>
391
+ </a>
392
+ </li>
393
+
394
+ <li class="fd-menu__item" role="presentation">
395
+ <span
396
+ class="fd-menu__link has-child is-expanded"
397
+ aria-controls="EX100M2B"
398
+ aria-expanded="true"
399
+ aria-haspopup="true"
400
+ role="menuitem"
401
+ >
402
+ <span class="fd-menu__addon-before">
403
+ <i class="sap-icon--card" role="presentation"></i>
404
+ </span>
405
+ <div class="fd-menu__content">
406
+ <span class="fd-menu__title"
407
+ >Menu Item Lorem ipsum dolor sit amet consectetur, adipisicing
408
+ elit.</span
409
+ >
410
+ <span class="fd-menu__subtitle"
411
+ >Sub-menu List Item Consectetur reprehenderit, cumque iusto molestiae
412
+ doloribus assumenda omnis eveniet</span
413
+ >
414
+ </div>
415
+
416
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
417
+ </span>
418
+
419
+ <ul class="fd-menu__sublist" id="EX100M2B" aria-hidden="false" role="menu">
420
+ <li class="fd-menu__item" role="presentation">
421
+ <a class="fd-menu__link" href="#" role="menuitem">
422
+ <div class="fd-menu__content">
423
+ <span class="fd-menu__title"
424
+ >Sub-menu Item 1 Consectetur reprehenderit, cumque iusto
425
+ molestiae doloribus assumenda omnis eveniet</span
426
+ >
427
+ </div>
428
+ <span class="fd-menu__addon-after fd-menu__addon-after--active"
429
+ ><i class="sap-icon--accept" role="presentation"></i
430
+ ></span>
431
+ </a>
432
+ </li>
433
+ <li class="fd-menu__item" role="presentation">
434
+ <a class="fd-menu__link" href="#" role="menuitem">
435
+ <span class="fd-menu__title fd-menu__title--truncate"
436
+ >Sub-menu Item 2 Consectetur reprehenderit, cumque iusto molestiae
437
+ doloribus assumenda omnis eveniet</span
438
+ >
439
+ </a>
440
+ </li>
441
+ </ul>
442
+ </li>
443
+
444
+ <li class="fd-menu__item" role="presentation">
445
+ <a class="fd-menu__link" href="#" role="menuitem">
446
+ <span class="fd-menu__addon-before">
447
+ <i class="sap-icon--official-service" role="presentation"></i>
448
+ </span>
449
+ <div class="fd-menu__content">
450
+ <span class="fd-menu__title fd-menu__title--truncate"
451
+ >Menu Item Lorem ipsum dolor sit amet consectetur, adipisicing
452
+ elit.</span
453
+ >
454
+ <span class="fd-menu__subtitle fd-menu__subtitle--truncate"
455
+ >Sub-menu List Item Consectetur reprehenderit, cumque iusto molestiae
456
+ doloribus assumenda omnis eveniet</span
457
+ >
458
+ </div>
459
+ </a>
460
+ </li>
461
+
462
+ <li class="fd-menu__item" role="presentation">
463
+ <a class="fd-menu__link" href="#" role="menuitem">
464
+ <span class="fd-menu__addon-before">
465
+ <i class="sap-icon--message-information" role="presentation"></i>
466
+ </span>
467
+ <span class="fd-menu__title">About</span>
468
+ </a>
469
+ </li>
470
+ </ul>
471
+ </nav>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ <div class="fd-bar fd-bar--footer">
476
+ <div class="fd-bar__right">
477
+ <div class="fd-bar__element">
478
+ <button aria-label="button" class="fd-button fd-button--transparent">
479
+ <i class="sap-icon--log"></i>
480
+ <span class="fd-button__text"> Sign Out</span>
481
+ </button>
482
+ </div>
483
+ </div>
484
+ </div>
485
+
486
+ <div class="fd-popover fd-popover--right fd-user-menu">
487
+ <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
488
+ <div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
489
+ <div class="fd-user-menu__body">
490
+ <div class="fd-user-menu__header">
491
+ <span
492
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
493
+ aria-label="Avatar"
494
+
495
+ >
496
+ <i
497
+ class="fd-avatar__zoom-icon sap-icon--edit"
498
+ aria-label="Edit"
499
+ role="presentation"
500
+ aria-hidden="true"
501
+ ></i>
502
+ </span>
503
+ <div class="fd-user-menu__header-container">
504
+ <div class="fd-user-menu__user-name">
505
+ Lisa Miller Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa consequuntur
506
+ cum voluptate iure tenetu!
507
+ </div>
508
+ <div class="fd-user-menu__subline">
509
+ lisa.miller@test.com Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
510
+ quod accusamus quis magnam, reprehenderit anim.
511
+ </div>
512
+ <div class="fd-user-menu__subline">
513
+ A very long subline 2 that can be displayed by wrapping behaviour in the subtitle like
514
+ this.
515
+ </div>
516
+ <div class="fd-user-menu__subline fd-user-menu__subline--truncate">
517
+ A very long subline 3 that can be truncated with ellipsis
518
+ </div>
519
+ </div>
520
+ <button aria-label="Manage Account" class="fd-button">
521
+ <i class="sap-icon--user-settings"></i>
522
+ <span class="fd-button__text">Manage Account</span>
523
+ </button>
524
+ </div>
525
+ <div class="fd-user-menu__content-container">
526
+ <div class="fd-panel fd-user-menu__panel" aria-labelledby="__panel-title-8" role="form">
527
+ <div class="fd-panel__header">
528
+ <div class="fd-panel__expand">
529
+ <button
530
+ class="fd-button fd-button--transparent fd-panel__button"
531
+ aria-expanded="true"
532
+ aria-haspopup="true"
533
+ aria-label="expand/collapse panel"
534
+ aria-controls="__panel-8"
535
+ >
536
+ <i class="sap-icon--slim-arrow-down"></i>
537
+ </button>
538
+ </div>
539
+ <h4 class="fd-panel__title" id="__panel-title-8">Accounts (3)</h4>
540
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
541
+ <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
542
+ <button
543
+ class="fd-button fd-button--transparent"
544
+ aria-label="Add Account"
545
+ title="Add Account"
546
+ >
547
+ <i class="sap-icon--user-edit"></i>
548
+ </button>
549
+ </div>
550
+ </div>
551
+ <div
552
+ role="region"
553
+ aria-labelledby="__panel-title-8"
554
+ class="fd-panel__content fd-panel__content--no-padding"
555
+ aria-hidden="false"
556
+ id="__panel-8"
557
+ >
558
+ <ul class="fd-list fd-list--subline" role="list">
559
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
560
+ <span
561
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail"
562
+
563
+ role="img"
564
+ aria-label="Jane Doe"
565
+ ></span>
566
+ <div class="fd-list__content">
567
+ <div class="fd-list__title">
568
+ Lisa Miller Lorem, ipsum dolor sit amet consectetur adipisicing elit.
569
+ Autem minima ex distinctio dolores vitae!
570
+ </div>
571
+ <div class="fd-list__subline">
572
+ lisa.miller@test.com Lorem, ipsum dolor sit amet consectetur adipisicing
573
+ elit.
574
+ </div>
575
+ <div class="fd-list__subline">
576
+ Delivery Manager Lorem ipsum dolor sit amet consectetur adipisicing
577
+ elit.
578
+ </div>
579
+ </div>
580
+ <span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
581
+ </li>
582
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
583
+ <span
584
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail"
585
+
586
+ role="img"
587
+ aria-label="John Doe"
588
+ ></span>
589
+ <div class="fd-list__content">
590
+ <div class="fd-list__title fd-list__title--truncate">
591
+ John Doe Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem
592
+ minima ex distinctio dolores vitae!
593
+ </div>
594
+ <div class="fd-list__subline fd-list__subline--truncate">
595
+ john.doe@test.com ipsum dolor sit amet consectetur adipisicing elit.
596
+ Autem minima ex distinctio dolores vitae!
597
+ </div>
598
+ <div class="fd-list__subline fd-list__subline--truncate">
599
+ Project Manager ipsum dolor sit amet consectetur adipisicing elit. Autem
600
+ minima ex distinctio dolores vitae!
601
+ </div>
602
+ </div>
603
+ </li>
604
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
605
+ <span
606
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10"
607
+ aria-role="img"
608
+ aria-label="Jane Doe"
609
+ >JD</span
610
+ >
611
+ <div class="fd-list__content">
612
+ <div class="fd-list__title">Jane Doe</div>
613
+ <div class="fd-list__subline">jane.doe@test.com</div>
614
+ <div class="fd-list__subline">User Experience Designer</div>
615
+ </div>
616
+ </li>
617
+ </ul>
618
+ </div>
619
+ </div>
620
+ <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
621
+ <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
622
+ <li class="fd-menu__item" role="presentation">
623
+ <a class="fd-menu__link" href="#" role="menuitem">
624
+ <span class="fd-menu__addon-before">
625
+ <i class="sap-icon--action-settings" role="presentation"></i>
626
+ </span>
627
+ <span class="fd-menu__title">Settings</span>
628
+ </a>
629
+ </li>
630
+
631
+ <li class="fd-menu__item" role="presentation">
632
+ <span
633
+ class="fd-menu__link has-child"
634
+ aria-expanded="false"
635
+ aria-haspopup="true"
636
+ role="menuitem"
637
+ >
638
+ <span class="fd-menu__addon-before">
639
+ <i class="sap-icon--card" role="presentation"></i>
640
+ </span>
641
+ <span class="fd-menu__title">Menu Item</span>
642
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
643
+ </span>
644
+ </li>
645
+
646
+ <li class="fd-menu__item" role="presentation">
647
+ <a class="fd-menu__link" href="#" role="menuitem">
648
+ <span class="fd-menu__addon-before">
649
+ <i class="sap-icon--official-service" role="presentation"></i>
650
+ </span>
651
+ <span class="fd-menu__title">Legal Information</span>
652
+ </a>
653
+ </li>
654
+
655
+ <li class="fd-menu__item" role="presentation">
656
+ <a class="fd-menu__link" href="#" role="menuitem">
657
+ <span class="fd-menu__addon-before">
658
+ <i class="sap-icon--message-information" role="presentation"></i>
659
+ </span>
660
+ <span class="fd-menu__title">About</span>
661
+ </a>
662
+ </li>
663
+ </ul>
664
+ </nav>
665
+ </div>
666
+ </div>
667
+ </div>
668
+ <div class="fd-bar fd-bar--footer">
669
+ <div class="fd-bar__right">
670
+ <div class="fd-bar__element">
671
+ <button aria-label="button" class="fd-button fd-button--transparent">
672
+ <i class="sap-icon--log"></i>
673
+ <span class="fd-button__text"> Sign Out</span>
674
+ </button>
675
+ </div>
676
+ </div>
677
+ </div>
678
+ </div>
679
+ ```
680
+
681
+ ## Modifiers
682
+
683
+ | Class | Description |
684
+ |-------|-------------|
685
+ | `fd-popover--right` | Style variant |
686
+
687
+ ## States
688
+
689
+ | Class | Description |
690
+ |-------|-------------|
691
+ | `is-expanded` | Expanded state |
692
+
693
+ ## BEM Elements
694
+
695
+ This component uses the following BEM elements:
696
+
697
+ - `fd-popover__body`
698
+ - `fd-popover__body--right`
699
+ - `fd-popover__wrapper`
700
+
701
+ ## Related Components
702
+
703
+ This component works with or depends on:
704
+
705
+ - `avatar`
706
+ - `badge`
707
+ - `bar`
708
+ - `button`
709
+ - `icon`
710
+ - `input`
711
+ - `input-group`
712
+ - `list`
713
+ - `menu`
714
+ - `message-strip`
715
+ - `navigation-list`
716
+ - `notification`
717
+ - `panel`
718
+ - `popover`
719
+ - `shellbar`
720
+ - `tabs`
721
+ - `title`
722
+ - `toolbar`
723
+ - `user-menu`
724
+
725
+ ## Design Tokens
726
+
727
+ Key CSS variables used by this component:
728
+
729
+ - `--above`
730
+ - `--after`
731
+ - `--arrow`
732
+ - `--arrow-x-end`
733
+ - `--before`
734
+ - `--bottom`
735
+ - `--btp`
736
+ - `--center`
737
+ - `--display`
738
+ - `--dropdown`
739
+ - `--fdIcon_Button_Height`
740
+ - `--fdIcon_Button_Width`
741
+ - `--fdModal_BackgroundColor`
742
+ - `--fdPopover_Arrow_Size`
743
+ - `--fdPopover_Body_Border_Radius`
744
+
745
+ *...and 5 more*
746
+
747
+ ## Examples
748
+
749
+ ### Default
750
+
751
+ ```html
752
+ <div class="fd-popover fd-popover--right fd-user-menu">
753
+ <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
754
+ <div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
755
+ <div class="fd-user-menu__body">
756
+ <div class="fd-user-menu__header">
757
+ <span
758
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
759
+ aria-label="Avatar"
760
+
761
+ >
762
+ <i
763
+ class="fd-avatar__zoom-icon sap-icon--edit"
764
+ aria-label="Edit"
765
+ role="presentation"
766
+ aria-hidden="true"
767
+ ></i>
768
+ </span>
769
+ <div class="fd-user-menu__header-container">
770
+ <div class="fd-user-menu__user-name">Lisa Miller</div>
771
+ <div class="fd-user-menu__subline">lisa.miller@test.com</div>
772
+ <div class="fd-user-menu__subline">User Experience Designer</div>
773
+ <div class="fd-user-menu__subline">Primary Employment</div>
774
+ </div>
775
+ <div class="fd-user-menu__header-content-area">
776
+ Header Content Area
777
+ </div>
778
+ </div>
779
+ <div class="fd-user-menu__content-container">
780
+ <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
781
+ <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
782
+ <li class="fd-menu__item" role="presentation">
783
+ <a class="fd-menu__link" href="#" role="menuitem">
784
+ <span class="fd-menu__addon-before">
785
+ <i class="sap-icon--action-settings" role="presentation"></i>
786
+ </span>
787
+ <span class="fd-menu__title">Settings</span>
788
+ </a>
789
+ </li>
790
+
791
+ <li class="fd-menu__item" role="presentation">
792
+ <span
793
+ class="fd-menu__link has-child is-expanded"
794
+ aria-controls="EX100M2A"
795
+ aria-expanded="true"
796
+ aria-haspopup="true"
797
+ role="menuitem"
798
+ >
799
+ <span class="fd-menu__addon-before">
800
+ <i class="sap-icon--card" role="presentation"></i>
801
+ </span>
802
+ <div class="fd-menu__content">
803
+ <span class="fd-menu__title">Menu Item</span>
804
+ <span class="fd-menu__subtitle">Sub-menu List Item</span>
805
+ </div>
806
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
807
+ </span>
808
+
809
+ <ul
810
+ class="fd-menu__sublist fd-menu__sublist--icons"
811
+ id="EX100M2A"
812
+ aria-hidden="false"
813
+ role="menu"
814
+ >
815
+ <li class="fd-menu__item" role="presentation">
816
+ <a class="fd-menu__link" href="#" role="menuitem">
817
+ <span class="fd-menu__addon-before"
818
+ ><i class="sap-icon--card" role="presentation"></i
819
+ ></span>
820
+ <span class="fd-menu__title">Sub-menu Item</span>
821
+ </a>
822
+ </li>
823
+ <li class="fd-menu__item" role="presentation">
824
+ <a class="fd-menu__link" href="#" role="menuitem">
825
+ <span class="fd-menu__title">Sub-menu Item</span>
826
+ </a>
827
+ </li>
828
+ </ul>
829
+ </li>
830
+
831
+ <li class="fd-menu__item" role="presentation">
832
+ <a class="fd-menu__link" href="#" role="menuitem">
833
+ <span class="fd-menu__addon-before">
834
+ <i class="sap-icon--official-service" role="presentation"></i>
835
+ </span>
836
+ <span class="fd-menu__title">Legal Information</span>
837
+ </a>
838
+ </li>
839
+
840
+ <li class="fd-menu__item" role="presentation">
841
+ <a class="fd-menu__link" href="#" role="menuitem">
842
+ <span class="fd-menu__addon-before">
843
+ <i class="sap-icon--message-information" role="presentation"></i>
844
+ </span>
845
+ <span class="fd-menu__title">About</span>
846
+ </a>
847
+ </li>
848
+ </ul>
849
+ </nav>
850
+ </div>
851
+ </div>
852
+ </div>
853
+ <div class="fd-bar fd-bar--footer">
854
+ <div class="fd-bar__right">
855
+ <div class="fd-bar__element">
856
+ <button aria-label="button" class="fd-button fd-button--transparent">
857
+ <i class="sap-icon--log"></i>
858
+ <span class="fd-button__text"> Sign Out</span>
859
+ </button>
860
+ </div>
861
+ </div>
862
+ </div>
863
+ </div>
864
+ </div>
865
+
866
+ <div class="fd-popover fd-popover--right fd-user-menu">
867
+ <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
868
+ <div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
869
+ <div class="fd-user-menu__body">
870
+ <div class="fd-user-menu__header">
871
+ <span
872
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
873
+ aria-label="Avatar"
874
+
875
+ >
876
+ <i
877
+ class="fd-avatar__zoom-icon sap-icon--edit"
878
+ aria-label="Edit"
879
+ role="presentation"
880
+ aria-hidden="true"
881
+ ></i>
882
+ </span>
883
+ <div class="fd-user-menu__header-container">
884
+ <div class="fd-user-menu__user-name">Lisa Miller</div>
885
+ <div class="fd-user-menu__subline">lisa.miller@test.com</div>
886
+ <div class="fd-user-menu__subline">User Experience Designer</div>
887
+ <div class="fd-user-menu__subline">Primary Employment</div>
888
+ </div>
889
+ <div class="fd-user-menu__header-content-area">
890
+ <div
891
+ role="note"
892
+ aria-labelledby="message-strip-hidden-text-2 message-strip-text-2"
893
+ class="fd-message-strip fd-message-strip--information"
894
+ >
895
+ <span class="fd-message-strip__sr-only" id="message-strip-hidden-text-2"
896
+ >Information Bar Closable</span
897
+ >
898
+
899
+ <div class="fd-message-strip__icon-container" aria-hidden="true">
900
+ <span
901
+ class="sap-icon sap-icon--message-information"
902
+ role="presentation"
903
+ aria-hidden="true"
904
+ ></span>
905
+ </div>
906
+
907
+ <p class="fd-message-strip__text" id="message-strip-text-2">
908
+ This is an information massage.
909
+ </p>
910
+ </div>
911
+ </div>
912
+ <button aria-label="Manage Account" class="fd-button">
913
+ <i class="sap-icon--user-settings"></i>
914
+ <span class="fd-button__text">Manage Account</span>
915
+ </button>
916
+ </div>
917
+ <div class="fd-user-menu__content-container">
918
+ <div class="fd-panel fd-user-menu__panel" aria-labelledby="__panel-title-8" role="form">
919
+ <div class="fd-panel__header">
920
+ <div class="fd-panel__expand">
921
+ <button
922
+ class="fd-button fd-button--transparent fd-panel__button"
923
+ aria-expanded="true"
924
+ aria-haspopup="true"
925
+ aria-label="expand/collapse panel"
926
+ aria-controls="__panel-8"
927
+ >
928
+ <i class="sap-icon--slim-arrow-down"></i>
929
+ </button>
930
+ </div>
931
+ <h4 class="fd-panel__title" id="__panel-title-8">Accounts (3)</h4>
932
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
933
+ <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
934
+ <button
935
+ class="fd-button fd-button--transparent"
936
+ aria-label="Add Account"
937
+ title="Add Account"
938
+ >
939
+ <i class="sap-icon--user-edit"></i>
940
+ </button>
941
+ </div>
942
+ </div>
943
+ <div
944
+ role="region"
945
+ aria-labelledby="__panel-title-8"
946
+ class="fd-panel__content fd-panel__content--no-padding"
947
+ aria-hidden="false"
948
+ id="__panel-8"
949
+ >
950
+ <ul class="fd-list fd-list--subline" role="list">
951
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
952
+ <span
953
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail"
954
+
955
+ role="img"
956
+ aria-label="Jane Doe"
957
+ ></span>
958
+ <div class="fd-list__content">
959
+ <div class="fd-list__title">Lisa Miller Lorem</div>
960
+ <div class="fd-list__subline">lisa.miller@test.com</div>
961
+ <div class="fd-list__subline">Delivery Manager</div>
962
+ </div>
963
+ <span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
964
+ </li>
965
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
966
+ <span
967
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail"
968
+
969
+ role="img"
970
+ aria-label="John Doe"
971
+ ></span>
972
+ <div class="fd-list__content">
973
+ <div class="fd-list__title">John Doe</div>
974
+ <div class="fd-list__subline">john.doe@test.com</div>
975
+ <div class="fd-list__subline">Project Manager</div>
976
+ </div>
977
+ </li>
978
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
979
+ <span
980
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10"
981
+ aria-role="img"
982
+ aria-label="Jane Doe"
983
+ >JD</span
984
+ >
985
+ <div class="fd-list__content">
986
+ <div class="fd-list__title">Jane Doe</div>
987
+ <div class="fd-list__subline">jane.doe@test.com</div>
988
+ <div class="fd-list__subline">User Experience Designer</div>
989
+ </div>
990
+ </li>
991
+ </ul>
992
+ </div>
993
+ </div>
994
+ <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
995
+ <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
996
+ <li class="fd-menu__item" role="presentation">
997
+ <a class="fd-menu__link" href="#" role="menuitem">
998
+ <span class="fd-menu__addon-before">
999
+ <i class="sap-icon--action-settings" role="presentation"></i>
1000
+ </span>
1001
+ <span class="fd-menu__title">Settings</span>
1002
+ </a>
1003
+ </li>
1004
+
1005
+ <li class="fd-menu__item" role="presentation">
1006
+ <span
1007
+ class="fd-menu__link has-child is-expanded"
1008
+ aria-controls="EX100M2B"
1009
+ aria-expanded="true"
1010
+ aria-haspopup="true"
1011
+ role="menuitem"
1012
+ >
1013
+ <span class="fd-menu__addon-before">
1014
+ <i class="sap-icon--card" role="presentation"></i>
1015
+ </span>
1016
+ <div class="fd-menu__content">
1017
+ <span class="fd-menu__title"
1018
+ >Menu Item Lorem ipsum dolor sit amet consectetur, adipisicing
1019
+ elit.</span
1020
+ >
1021
+ <span class="fd-menu__subtitle"
1022
+ >Sub-menu List Item Consectetur reprehenderit, cumque iusto molestiae
1023
+ doloribus assumenda omnis eveniet</span
1024
+ >
1025
+ </div>
1026
+
1027
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
1028
+ </span>
1029
+
1030
+ <ul class="fd-menu__sublist" id="EX100M2B" aria-hidden="false" role="menu">
1031
+ <li class="fd-menu__item" role="presentation">
1032
+ <a class="fd-menu__link" href="#" role="menuitem">
1033
+ <div class="fd-menu__content">
1034
+ <span class="fd-menu__title"
1035
+ >Sub-menu Item 1 Consectetur reprehenderit, cumque iusto
1036
+ molestiae doloribus assumenda omnis eveniet</span
1037
+ >
1038
+ </div>
1039
+ <span class="fd-menu__addon-after fd-menu__addon-after--active"
1040
+ ><i class="sap-icon--accept" role="presentation"></i
1041
+ ></span>
1042
+ </a>
1043
+ </li>
1044
+ <li class="fd-menu__item" role="presentation">
1045
+ <a class="fd-menu__link" href="#" role="menuitem">
1046
+ <span class="fd-menu__title fd-menu__title--truncate"
1047
+ >Sub-menu Item 2 Consectetur reprehenderit, cumque iusto molestiae
1048
+ doloribus assumenda omnis eveniet</span
1049
+ >
1050
+ </a>
1051
+ </li>
1052
+ </ul>
1053
+ </li>
1054
+
1055
+ <li class="fd-menu__item" role="presentation">
1056
+ <a class="fd-menu__link" href="#" role="menuitem">
1057
+ <span class="fd-menu__addon-before">
1058
+ <i class="sap-icon--official-service" role="presentation"></i>
1059
+ </span>
1060
+ <div class="fd-menu__content">
1061
+ <span class="fd-menu__title fd-menu__title--truncate"
1062
+ >Menu Item Lorem ipsum dolor sit amet consectetur, adipisicing
1063
+ elit.</span
1064
+ >
1065
+ <span class="fd-menu__subtitle fd-menu__subtitle--truncate"
1066
+ >Sub-menu List Item Consectetur reprehenderit, cumque iusto molestiae
1067
+ doloribus assumenda omnis eveniet</span
1068
+ >
1069
+ </div>
1070
+ </a>
1071
+ </li>
1072
+
1073
+ <li class="fd-menu__item" role="presentation">
1074
+ <a class="fd-menu__link" href="#" role="menuitem">
1075
+ <span class="fd-menu__addon-before">
1076
+ <i class="sap-icon--message-information" role="presentation"></i>
1077
+ </span>
1078
+ <span class="fd-menu__title">About</span>
1079
+ </a>
1080
+ </li>
1081
+ </ul>
1082
+ </nav>
1083
+ </div>
1084
+ </div>
1085
+ </div>
1086
+ <div class="fd-bar fd-bar--footer">
1087
+ <div class="fd-bar__right">
1088
+ <div class="fd-bar__element">
1089
+ <button aria-label="button" class="fd-button fd-button--transparent">
1090
+ <i class="sap-icon--log"></i>
1091
+ <span class="fd-button__text"> Sign Out</span>
1092
+ </button>
1093
+ </div>
1094
+ </div>
1095
+ </div>
1096
+
1097
+ <div class="fd-popover fd-popover--right fd-user-menu">
1098
+ <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
1099
+ <div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
1100
+ <div class="fd-user-menu__body">
1101
+ <div class="fd-user-menu__header">
1102
+ <span
1103
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
1104
+ aria-label="Avatar"
1105
+
1106
+ >
1107
+ <i
1108
+ class="fd-avatar__zoom-icon sap-icon--edit"
1109
+ aria-label="Edit"
1110
+ role="presentation"
1111
+ aria-hidden="true"
1112
+ ></i>
1113
+ </span>
1114
+ <div class="fd-user-menu__header-container">
1115
+ <div class="fd-user-menu__user-name">
1116
+ Lisa Miller Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa consequuntur
1117
+ cum voluptate iure tenetu!
1118
+ </div>
1119
+ <div class="fd-user-menu__subline">
1120
+ lisa.miller@test.com Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
1121
+ quod accusamus quis magnam, reprehenderit anim.
1122
+ </div>
1123
+ <div class="fd-user-menu__subline">
1124
+ A very long subline 2 that can be displayed by wrapping behaviour in the subtitle like
1125
+ this.
1126
+ </div>
1127
+ <div class="fd-user-menu__subline fd-user-menu__subline--truncate">
1128
+ A very long subline 3 that can be truncated with ellipsis
1129
+ </div>
1130
+ </div>
1131
+ <button aria-label="Manage Account" class="fd-button">
1132
+ <i class="sap-icon--user-settings"></i>
1133
+ <span class="fd-button__text">Manage Account</span>
1134
+ </button>
1135
+ </div>
1136
+ <div class="fd-user-menu__content-container">
1137
+ <div class="fd-panel fd-user-menu__panel" aria-labelledby="__panel-title-8" role="form">
1138
+ <div class="fd-panel__header">
1139
+ <div class="fd-panel__expand">
1140
+ <button
1141
+ class="fd-button fd-button--transparent fd-panel__button"
1142
+ aria-expanded="true"
1143
+ aria-haspopup="true"
1144
+ aria-label="expand/collapse panel"
1145
+ aria-controls="__panel-8"
1146
+ >
1147
+ <i class="sap-icon--slim-arrow-down"></i>
1148
+ </button>
1149
+ </div>
1150
+ <h4 class="fd-panel__title" id="__panel-title-8">Accounts (3)</h4>
1151
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
1152
+ <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
1153
+ <button
1154
+ class="fd-button fd-button--transparent"
1155
+ aria-label="Add Account"
1156
+ title="Add Account"
1157
+ >
1158
+ <i class="sap-icon--user-edit"></i>
1159
+ </button>
1160
+ </div>
1161
+ </div>
1162
+ <div
1163
+ role="region"
1164
+ aria-labelledby="__panel-title-8"
1165
+ class="fd-panel__content fd-panel__content--no-padding"
1166
+ aria-hidden="false"
1167
+ id="__panel-8"
1168
+ >
1169
+ <ul class="fd-list fd-list--subline" role="list">
1170
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
1171
+ <span
1172
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail"
1173
+
1174
+ role="img"
1175
+ aria-label="Jane Doe"
1176
+ ></span>
1177
+ <div class="fd-list__content">
1178
+ <div class="fd-list__title">
1179
+ Lisa Miller Lorem, ipsum dolor sit amet consectetur adipisicing elit.
1180
+ Autem minima ex distinctio dolores vitae!
1181
+ </div>
1182
+ <div class="fd-list__subline">
1183
+ lisa.miller@test.com Lorem, ipsum dolor sit amet consectetur adipisicing
1184
+ elit.
1185
+ </div>
1186
+ <div class="fd-list__subline">
1187
+ Delivery Manager Lorem ipsum dolor sit amet consectetur adipisicing
1188
+ elit.
1189
+ </div>
1190
+ </div>
1191
+ <span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
1192
+ </li>
1193
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
1194
+ <span
1195
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail"
1196
+
1197
+ role="img"
1198
+ aria-label="John Doe"
1199
+ ></span>
1200
+ <div class="fd-list__content">
1201
+ <div class="fd-list__title fd-list__title--truncate">
1202
+ John Doe Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem
1203
+ minima ex distinctio dolores vitae!
1204
+ </div>
1205
+ <div class="fd-list__subline fd-list__subline--truncate">
1206
+ john.doe@test.com ipsum dolor sit amet consectetur adipisicing elit.
1207
+ Autem minima ex distinctio dolores vitae!
1208
+ </div>
1209
+ <div class="fd-list__subline fd-list__subline--truncate">
1210
+ Project Manager ipsum dolor sit amet consectetur adipisicing elit. Autem
1211
+ minima ex distinctio dolores vitae!
1212
+ </div>
1213
+ </div>
1214
+ </li>
1215
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
1216
+ <span
1217
+ class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10"
1218
+ aria-role="img"
1219
+ aria-label="Jane Doe"
1220
+ >JD</span
1221
+ >
1222
+ <div class="fd-list__content">
1223
+ <div class="fd-list__title">Jane Doe</div>
1224
+ <div class="fd-list__subline">jane.doe@test.com</div>
1225
+ <div class="fd-list__subline">User Experience Designer</div>
1226
+ </div>
1227
+ </li>
1228
+ </ul>
1229
+ </div>
1230
+ </div>
1231
+ <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
1232
+ <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
1233
+ <li class="fd-menu__item" role="presentation">
1234
+ <a class="fd-menu__link" href="#" role="menuitem">
1235
+ <span class="fd-menu__addon-before">
1236
+ <i class="sap-icon--action-settings" role="presentation"></i>
1237
+ </span>
1238
+ <span class="fd-menu__title">Settings</span>
1239
+ </a>
1240
+ </li>
1241
+
1242
+ <li class="fd-menu__item" role="presentation">
1243
+ <span
1244
+ class="fd-menu__link has-child"
1245
+ aria-expanded="false"
1246
+ aria-haspopup="true"
1247
+ role="menuitem"
1248
+ >
1249
+ <span class="fd-menu__addon-before">
1250
+ <i class="sap-icon--card" role="presentation"></i>
1251
+ </span>
1252
+ <span class="fd-menu__title">Menu Item</span>
1253
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
1254
+ </span>
1255
+ </li>
1256
+
1257
+ <li class="fd-menu__item" role="presentation">
1258
+ <a class="fd-menu__link" href="#" role="menuitem">
1259
+ <span class="fd-menu__addon-before">
1260
+ <i class="sap-icon--official-service" role="presentation"></i>
1261
+ </span>
1262
+ <span class="fd-menu__title">Legal Information</span>
1263
+ </a>
1264
+ </li>
1265
+
1266
+ <li class="fd-menu__item" role="presentation">
1267
+ <a class="fd-menu__link" href="#" role="menuitem">
1268
+ <span class="fd-menu__addon-before">
1269
+ <i class="sap-icon--message-information" role="presentation"></i>
1270
+ </span>
1271
+ <span class="fd-menu__title">About</span>
1272
+ </a>
1273
+ </li>
1274
+ </ul>
1275
+ </nav>
1276
+ </div>
1277
+ </div>
1278
+ </div>
1279
+ <div class="fd-bar fd-bar--footer">
1280
+ <div class="fd-bar__right">
1281
+ <div class="fd-bar__element">
1282
+ <button aria-label="button" class="fd-button fd-button--transparent">
1283
+ <i class="sap-icon--log"></i>
1284
+ <span class="fd-button__text"> Sign Out</span>
1285
+ </button>
1286
+ </div>
1287
+ </div>
1288
+ </div>
1289
+ </div>
1290
+ ```
1291
+
1292
+ ## Accessibility
1293
+
1294
+ - Use semantic HTML elements where appropriate
1295
+ - Include proper ARIA attributes for interactive elements
1296
+ - Ensure keyboard navigation support
1297
+ - Provide adequate color contrast
1298
+
1299
+ ## Source
1300
+
1301
+ This documentation was automatically generated from: `packages/styles/stories/Components/user-menu/user-menu.stories.js`
1302
+
1303
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).