@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-2.md ADDED
@@ -0,0 +1,906 @@
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
+ generatedAt: 2026-05-28T16:01:41.792Z
9
+ ---
10
+
11
+ # Components/User Menu
12
+
13
+ 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.
14
+ <br>
15
+ The User Menu can display the following:
16
+ <ul>
17
+ <li>Current user information</li>
18
+ <li>Switch between accounts</li>
19
+ <li>User Menu items</li>
20
+ </ul>
21
+
22
+ ### When to use
23
+ <ul>
24
+ <li>To present user-specific information, settings, and actions.</li>
25
+ <li>To enable account switching.</li>
26
+ <li>To display product-related and legal information.</li>
27
+ <li>To facilitate Sign In or Sign Out actions.</li>
28
+ </ul>
29
+
30
+ ### When not to use
31
+ <ul>
32
+ <li>Navigation: Avoid including navigational elements.</li>
33
+ <li>Home Page Customization: Exclude items related to customizing the home page.</li>
34
+ <li>Inactive Items: Hide inactive items instead of displaying them as disabled.</li>
35
+ <li>Content Overload: Keep the menu concise by limiting links to essential items only.</li>
36
+ <li>Dynamic Content: Avoid altering the menu content within the product.</li>
37
+ </ul>
38
+
39
+ ### Anatomy
40
+ The User Menu popover is composed of the following components:
41
+
42
+ <b>Custom Popover Header</b><br>
43
+ Represents the current user and includes:
44
+
45
+ <ul>
46
+ <li>Popover: Contains the entire User Menu content.</li>
47
+ <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>
48
+ <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>
49
+ <li>Subtitle 1 (subline): An optional secondary identifier, such as user ID or email.</li>
50
+ <li>Subtitle 2 (subline): An optional identifier, such as role, position, organization, or unit.</li>
51
+ <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>
52
+ <li>Manage Account Button: Links to account settings.</li>
53
+ </ul>
54
+
55
+ <b>Content Container</b><br>
56
+ Holds user account and menu items:
57
+
58
+ <ul>
59
+ <li>
60
+ Panel
61
+ <ul>
62
+ <li>Includes a header with an Add Account button and a list of accounts.</li>
63
+ <li>The Other Accounts section (optional) allows users to sign in with or switch between accounts.</li>
64
+ </ul>
65
+ </li>
66
+ <li>
67
+ List
68
+ <ul>
69
+ <li>Displays List Items for user accounts.</li>
70
+ <li>Hosts mandatory menu items (e.g., Settings, Legal Information, About, Sign In/Out) and custom items.</li>
71
+ </ul>
72
+ </li>
73
+ </ul>
74
+
75
+ ## Installation
76
+
77
+ ```bash
78
+ npm install fundamental-styles
79
+ ```
80
+
81
+ ```html
82
+ <!-- Include theme -->
83
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
84
+
85
+ <!-- Include component CSS -->
86
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
87
+ ```
88
+
89
+ ## Basic Usage
90
+
91
+ ```html
92
+ <div class="fddocs-container" style="margin-bottom: 500px; flex-wrap: wrap; gap: 5rem;">
93
+ <div class="fd-popover fd-popover--right fd-user-menu">
94
+ <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
95
+ <div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
96
+ <div class="fd-user-menu__body">
97
+ <div class="fd-user-menu__header">
98
+ <span
99
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
100
+ aria-label="Avatar"
101
+ style="background-image: url('/assets/images/portraits/L_80x80_F3.png');">
102
+ <i class="fd-avatar__zoom-icon sap-icon--edit" aria-label="Edit" role="presentation" aria-hidden="true"></i>
103
+ </span>
104
+ <div class="fd-user-menu__header-container">
105
+ <div class="fd-user-menu__user-name">Lisa Miller</div>
106
+ <div class="fd-user-menu__subline">lisa.miller@test.com</div>
107
+ <div class="fd-user-menu__subline">User Experience Designer</div>
108
+ <div class="fd-user-menu__subline">Primary Employment</div>
109
+ </div>
110
+ </div>
111
+ <div class="fd-user-menu__content-container">
112
+ <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
113
+ <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
114
+ <li class="fd-menu__item" role="presentation">
115
+ <a class="fd-menu__link" href="#" role="menuitem">
116
+ <span class="fd-menu__addon-before">
117
+ <i class="sap-icon--action-settings" role="presentation"></i>
118
+ </span>
119
+ <span class="fd-menu__title">Settings</span>
120
+ </a>
121
+ </li>
122
+
123
+ <li class="fd-menu__item" role="presentation">
124
+ <span
125
+ class="fd-menu__link has-child is-expanded"
126
+ aria-controls="EX100M2A"
127
+ aria-expanded="true"
128
+ aria-haspopup="true"
129
+ role="menuitem">
130
+ <span class="fd-menu__addon-before">
131
+ <i class="sap-icon--card" role="presentation"></i>
132
+ </span>
133
+ <div class="fd-menu__content">
134
+ <span class="fd-menu__title">Menu Item</span>
135
+ <span class="fd-menu__subtitle">Sub-menu List Item</span>
136
+ </div>
137
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
138
+ </span>
139
+
140
+ <ul class="fd-menu__sublist fd-menu__sublist--icons" id="EX100M2A" aria-hidden="false" role="menu">
141
+ <li class="fd-menu__item" role="presentation">
142
+ <a class="fd-menu__link" href="#" role="menuitem">
143
+ <span class="fd-menu__addon-before"><i class="sap-icon--card" role="presentation"></i></span>
144
+ <span class="fd-menu__title">Sub-menu Item</span>
145
+ </a>
146
+ </li>
147
+ <li class="fd-menu__item" role="presentation">
148
+ <a class="fd-menu__link" href="#" role="menuitem">
149
+ <span class="fd-menu__title">Sub-menu Item</span>
150
+ </a>
151
+ </li>
152
+ </ul>
153
+ </li>
154
+
155
+ <li class="fd-menu__item" role="presentation">
156
+ <a class="fd-menu__link" href="#" role="menuitem">
157
+ <span class="fd-menu__addon-before">
158
+ <i class="sap-icon--official-service" role="presentation"></i>
159
+ </span>
160
+ <span class="fd-menu__title">Legal Information</span>
161
+ </a>
162
+ </li>
163
+
164
+ <li class="fd-menu__item" role="presentation">
165
+ <a class="fd-menu__link" href="#" role="menuitem">
166
+ <span class="fd-menu__addon-before">
167
+ <i class="sap-icon--message-information" role="presentation"></i>
168
+ </span>
169
+ <span class="fd-menu__title">About</span>
170
+ </a>
171
+ </li>
172
+
173
+ </ul>
174
+ </nav>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ <div class="fd-bar fd-bar--footer">
179
+ <div class="fd-bar__right">
180
+ <div class="fd-bar__element">
181
+ <button aria-label="button" class="fd-button fd-button--transparent">
182
+ <i class="sap-icon--log"></i>
183
+ <span class="fd-button__text"> Sign Out</span>
184
+ </button>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <div class="fddocs-container" style="margin-bottom: 900px; flex-wrap: wrap; gap: 5rem;">
193
+ <div class="fd-popover fd-popover--right fd-user-menu">
194
+ <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
195
+ <div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
196
+ <div class="fd-user-menu__body">
197
+ <div class="fd-user-menu__header">
198
+ <span
199
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
200
+ aria-label="Avatar"
201
+ style="background-image: url('/assets/images/portraits/L_80x80_F3.png');">
202
+ <i class="fd-avatar__zoom-icon sap-icon--edit" aria-label="Edit" role="presentation" aria-hidden="true"></i>
203
+ </span>
204
+ <div class="fd-user-menu__header-container">
205
+ <div class="fd-user-menu__user-name">Lisa Miller</div>
206
+ <div class="fd-user-menu__subline">lisa.miller@test.com</div>
207
+ <div class="fd-user-menu__subline">User Experience Designer</div>
208
+ <div class="fd-user-menu__subline">Primary Employment</div>
209
+ </div>
210
+ <button aria-label="Manage Account" class="fd-button">
211
+ <i class="sap-icon--user-settings"></i>
212
+ <span class="fd-button__text">Manage Account</span>
213
+ </button>
214
+ </div>
215
+ <div class="fd-user-menu__content-container">
216
+ <div class="fd-panel fd-user-menu__panel" aria-labelledby="__panel-title-8" role="form">
217
+ <div class="fd-panel__header">
218
+ <div class="fd-panel__expand">
219
+ <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="true"
220
+ aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-8">
221
+ <i class="sap-icon--slim-arrow-down"></i>
222
+ </button>
223
+ </div>
224
+ <h4 class="fd-panel__title" id="__panel-title-8">Accounts (3)</h4>
225
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
226
+ <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
227
+ <button class="fd-button fd-button--transparent" aria-label="Add Account" title="Add Account">
228
+ <i class="sap-icon--user-edit"></i>
229
+ </button>
230
+ </div>
231
+ </div>
232
+ <div role="region" aria-labelledby="__panel-title-8" class="fd-panel__content fd-panel__content--no-padding" aria-hidden="false" id="__panel-8">
233
+ <ul class="fd-list fd-list--subline" role="list">
234
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
235
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_F3.png')" role="img" aria-label="Jane Doe"></span>
236
+ <div class="fd-list__content">
237
+ <div class="fd-list__title">Lisa Miller Lorem</div>
238
+ <div class="fd-list__subline">lisa.miller@test.com</div>
239
+ <div class="fd-list__subline">Delivery Manager</div>
240
+ </div>
241
+ <span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
242
+ </li>
243
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
244
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" role="img" aria-label="John Doe"></span>
245
+ <div class="fd-list__content">
246
+ <div class="fd-list__title">John Doe</div>
247
+ <div class="fd-list__subline">john.doe@test.com</div>
248
+ <div class="fd-list__subline">Project Manager</div>
249
+ </div>
250
+
251
+ </li>
252
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
253
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" aria-role="img" aria-label="Jane Doe">JD</span>
254
+ <div class="fd-list__content">
255
+ <div class="fd-list__title">Jane Doe</div>
256
+ <div class="fd-list__subline">jane.doe@test.com</div>
257
+ <div class="fd-list__subline">User Experience Designer</div>
258
+ </div>
259
+ </li>
260
+ </ul>
261
+
262
+ </div>
263
+ </div>
264
+ <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
265
+ <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
266
+ <li class="fd-menu__item" role="presentation">
267
+ <a class="fd-menu__link" href="#" role="menuitem">
268
+ <span class="fd-menu__addon-before">
269
+ <i class="sap-icon--action-settings" role="presentation"></i>
270
+ </span>
271
+ <span class="fd-menu__title">Settings</span>
272
+ </a>
273
+ </li>
274
+
275
+ <li class="fd-menu__item" role="presentation">
276
+ <span
277
+ class="fd-menu__link has-child is-expanded"
278
+ aria-controls="EX100M2B"
279
+ aria-expanded="true"
280
+ aria-haspopup="true"
281
+ role="menuitem">
282
+ <span class="fd-menu__addon-before">
283
+ <i class="sap-icon--card" role="presentation"></i>
284
+ </span>
285
+ <div class="fd-menu__content">
286
+ <span class="fd-menu__title">Menu Item Lorem ipsum dolor sit amet consectetur, adipisicing elit.</span>
287
+ <span class="fd-menu__subtitle">Sub-menu List Item Consectetur reprehenderit, cumque iusto molestiae doloribus assumenda omnis eveniet</span>
288
+ </div>
289
+
290
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
291
+ </span>
292
+
293
+ <ul class="fd-menu__sublist" id="EX100M2B" aria-hidden="false" role="menu">
294
+ <li class="fd-menu__item" role="presentation">
295
+ <a class="fd-menu__link" href="#" role="menuitem">
296
+ <div class="fd-menu__content">
297
+ <span class="fd-menu__title">Sub-menu Item 1 Consectetur reprehenderit, cumque iusto molestiae doloribus assumenda omnis eveniet</span>
298
+ </div>
299
+ <span class="fd-menu__addon-after fd-menu__addon-after--active"><i class="sap-icon--accept" role="presentation"></i></span>
300
+ </a>
301
+ </li>
302
+ <li class="fd-menu__item" role="presentation">
303
+ <a class="fd-menu__link" href="#" role="menuitem">
304
+ <span class="fd-menu__title fd-menu__title--truncate">Sub-menu Item 2 Consectetur reprehenderit, cumque iusto molestiae doloribus assumenda omnis eveniet</span>
305
+ </a>
306
+ </li>
307
+ </ul>
308
+ </li>
309
+
310
+ <li class="fd-menu__item" role="presentation">
311
+ <a class="fd-menu__link" href="#" role="menuitem">
312
+ <span class="fd-menu__addon-before">
313
+ <i class="sap-icon--official-service" role="presentation"></i>
314
+ </span>
315
+ <div class="fd-menu__content">
316
+ <span class="fd-menu__title fd-menu__title--truncate">Menu Item Lorem ipsum dolor sit amet consectetur, adipisicing elit.</span>
317
+ <span class="fd-menu__subtitle fd-menu__subtitle--truncate">Sub-menu List Item Consectetur reprehenderit, cumque iusto molestiae doloribus assumenda omnis eveniet</span>
318
+ </div>
319
+ </a>
320
+ </li>
321
+
322
+ <li class="fd-menu__item" role="presentation">
323
+ <a class="fd-menu__link" href="#" role="menuitem">
324
+ <span class="fd-menu__addon-before">
325
+ <i class="sap-icon--message-information" role="presentation"></i>
326
+ </span>
327
+ <span class="fd-menu__title">About</span>
328
+ </a>
329
+ </li>
330
+
331
+ </ul>
332
+ </nav>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ <div class="fd-bar fd-bar--footer">
337
+ <div class="fd-bar__right">
338
+ <div class="fd-bar__element">
339
+ <button aria-label="button" class="fd-button fd-button--transparent">
340
+ <i class="sap-icon--log"></i>
341
+ <span class="fd-button__text"> Sign Out</span>
342
+ </button>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <div class="fddocs-container" style="margin-bottom: 1000px; flex-wrap: wrap; gap: 5rem;">
351
+ <div class="fd-popover fd-popover--right fd-user-menu">
352
+ <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
353
+ <div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
354
+ <div class="fd-user-menu__body">
355
+ <div class="fd-user-menu__header">
356
+ <span
357
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
358
+ aria-label="Avatar"
359
+ style="background-image: url('/assets/images/portraits/L_80x80_F3.png');">
360
+ <i class="fd-avatar__zoom-icon sap-icon--edit" aria-label="Edit" role="presentation" aria-hidden="true"></i>
361
+ </span>
362
+ <div class="fd-user-menu__header-container">
363
+ <div class="fd-user-menu__user-name">Lisa Miller Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa consequuntur cum voluptate iure tenetu!</div>
364
+ <div class="fd-user-menu__subline">lisa.miller@test.com Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quod accusamus quis magnam, reprehenderit anim.</div>
365
+ <div class="fd-user-menu__subline">A very long subline 2 that can be displayed by wrapping behaviour in the subtitle like this.</div>
366
+ <div class="fd-user-menu__subline fd-user-menu__subline--truncate">A very long subline 3 that can be truncated with ellipsis</div>
367
+ </div>
368
+ <button aria-label="Manage Account" class="fd-button">
369
+ <i class="sap-icon--user-settings"></i>
370
+ <span class="fd-button__text">Manage Account</span>
371
+ </button>
372
+ </div>
373
+ <div class="fd-user-menu__content-container">
374
+ <div class="fd-panel fd-user-menu__panel" aria-labelledby="__panel-title-8" role="form">
375
+ <div class="fd-panel__header">
376
+ <div class="fd-panel__expand">
377
+ <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="true"
378
+ aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-8">
379
+ <i class="sap-icon--slim-arrow-down"></i>
380
+ </button>
381
+ </div>
382
+ <h4 class="fd-panel__title" id="__panel-title-8">Accounts (3)</h4>
383
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
384
+ <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
385
+ <button class="fd-button fd-button--transparent" aria-label="Add Account" title="Add Account">
386
+ <i class="sap-icon--user-edit"></i>
387
+ </button>
388
+ </div>
389
+ </div>
390
+ <div role="region" aria-labelledby="__panel-title-8" class="fd-panel__content fd-panel__content--no-padding" aria-hidden="false" id="__panel-8">
391
+ <ul class="fd-list fd-list--subline" role="list">
392
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
393
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_F3.png')" role="img" aria-label="Jane Doe"></span>
394
+ <div class="fd-list__content">
395
+ <div class="fd-list__title">Lisa Miller Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem minima ex distinctio dolores vitae!</div>
396
+ <div class="fd-list__subline">lisa.miller@test.com Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
397
+ <div class="fd-list__subline">Delivery Manager Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
398
+ </div>
399
+ <span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
400
+ </li>
401
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
402
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" role="img" aria-label="John Doe"></span>
403
+ <div class="fd-list__content">
404
+ <div class="fd-list__title fd-list__title--truncate">John Doe Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem minima ex distinctio dolores vitae!</div>
405
+ <div class="fd-list__subline fd-list__subline--truncate">john.doe@test.com ipsum dolor sit amet consectetur adipisicing elit. Autem minima ex distinctio dolores vitae!</div>
406
+ <div class="fd-list__subline fd-list__subline--truncate">Project Manager ipsum dolor sit amet consectetur adipisicing elit. Autem minima ex distinctio dolores vitae!</div>
407
+ </div>
408
+
409
+ </li>
410
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
411
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" aria-role="img" aria-label="Jane Doe">JD</span>
412
+ <div class="fd-list__content">
413
+ <div class="fd-list__title">Jane Doe</div>
414
+ <div class="fd-list__subline">jane.doe@test.com</div>
415
+ <div class="fd-list__subline">User Experience Designer</div>
416
+ </div>
417
+ </li>
418
+ </ul>
419
+
420
+ </div>
421
+ </div>
422
+ <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
423
+ <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
424
+ <li class="fd-menu__item" role="presentation">
425
+ <a class="fd-menu__link" href="#" role="menuitem">
426
+ <span class="fd-menu__addon-before">
427
+ <i class="sap-icon--action-settings" role="presentation"></i>
428
+ </span>
429
+ <span class="fd-menu__title">Settings</span>
430
+ </a>
431
+ </li>
432
+
433
+ <li class="fd-menu__item" role="presentation">
434
+ <span
435
+ class="fd-menu__link has-child"
436
+ aria-expanded="false"
437
+ aria-haspopup="true"
438
+ role="menuitem">
439
+ <span class="fd-menu__addon-before">
440
+ <i class="sap-icon--card" role="presentation"></i>
441
+ </span>
442
+ <span class="fd-menu__title">Menu Item</span>
443
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
444
+ </span>
445
+ </li>
446
+
447
+ <li class="fd-menu__item" role="presentation">
448
+ <a class="fd-menu__link" href="#" role="menuitem">
449
+ <span class="fd-menu__addon-before">
450
+ <i class="sap-icon--official-service" role="presentation"></i>
451
+ </span>
452
+ <span class="fd-menu__title">Legal Information</span>
453
+ </a>
454
+ </li>
455
+
456
+ <li class="fd-menu__item" role="presentation">
457
+ <a class="fd-menu__link" href="#" role="menuitem">
458
+ <span class="fd-menu__addon-before">
459
+ <i class="sap-icon--message-information" role="presentation"></i>
460
+ </span>
461
+ <span class="fd-menu__title">About</span>
462
+ </a>
463
+ </li>
464
+
465
+ </ul>
466
+ </nav>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ <div class="fd-bar fd-bar--footer">
471
+ <div class="fd-bar__right">
472
+ <div class="fd-bar__element">
473
+ <button aria-label="button" class="fd-button fd-button--transparent">
474
+ <i class="sap-icon--log"></i>
475
+ <span class="fd-button__text"> Sign Out</span>
476
+ </button>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ ```
484
+
485
+ ## Modifiers
486
+
487
+ | Class | Description |
488
+ |-------|-------------|
489
+ | `fd-popover--right` | Style variant |
490
+
491
+ ## States
492
+
493
+ | Class | Description |
494
+ |-------|-------------|
495
+ | `is-expanded` | Expanded state |
496
+
497
+ ## Examples
498
+
499
+ ### Default
500
+
501
+ ```html
502
+ <div class="fddocs-container" style="margin-bottom: 500px; flex-wrap: wrap; gap: 5rem;">
503
+ <div class="fd-popover fd-popover--right fd-user-menu">
504
+ <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
505
+ <div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
506
+ <div class="fd-user-menu__body">
507
+ <div class="fd-user-menu__header">
508
+ <span
509
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
510
+ aria-label="Avatar"
511
+ style="background-image: url('/assets/images/portraits/L_80x80_F3.png');">
512
+ <i class="fd-avatar__zoom-icon sap-icon--edit" aria-label="Edit" role="presentation" aria-hidden="true"></i>
513
+ </span>
514
+ <div class="fd-user-menu__header-container">
515
+ <div class="fd-user-menu__user-name">Lisa Miller</div>
516
+ <div class="fd-user-menu__subline">lisa.miller@test.com</div>
517
+ <div class="fd-user-menu__subline">User Experience Designer</div>
518
+ <div class="fd-user-menu__subline">Primary Employment</div>
519
+ </div>
520
+ </div>
521
+ <div class="fd-user-menu__content-container">
522
+ <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
523
+ <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
524
+ <li class="fd-menu__item" role="presentation">
525
+ <a class="fd-menu__link" href="#" role="menuitem">
526
+ <span class="fd-menu__addon-before">
527
+ <i class="sap-icon--action-settings" role="presentation"></i>
528
+ </span>
529
+ <span class="fd-menu__title">Settings</span>
530
+ </a>
531
+ </li>
532
+
533
+ <li class="fd-menu__item" role="presentation">
534
+ <span
535
+ class="fd-menu__link has-child is-expanded"
536
+ aria-controls="EX100M2A"
537
+ aria-expanded="true"
538
+ aria-haspopup="true"
539
+ role="menuitem">
540
+ <span class="fd-menu__addon-before">
541
+ <i class="sap-icon--card" role="presentation"></i>
542
+ </span>
543
+ <div class="fd-menu__content">
544
+ <span class="fd-menu__title">Menu Item</span>
545
+ <span class="fd-menu__subtitle">Sub-menu List Item</span>
546
+ </div>
547
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
548
+ </span>
549
+
550
+ <ul class="fd-menu__sublist fd-menu__sublist--icons" id="EX100M2A" aria-hidden="false" role="menu">
551
+ <li class="fd-menu__item" role="presentation">
552
+ <a class="fd-menu__link" href="#" role="menuitem">
553
+ <span class="fd-menu__addon-before"><i class="sap-icon--card" role="presentation"></i></span>
554
+ <span class="fd-menu__title">Sub-menu Item</span>
555
+ </a>
556
+ </li>
557
+ <li class="fd-menu__item" role="presentation">
558
+ <a class="fd-menu__link" href="#" role="menuitem">
559
+ <span class="fd-menu__title">Sub-menu Item</span>
560
+ </a>
561
+ </li>
562
+ </ul>
563
+ </li>
564
+
565
+ <li class="fd-menu__item" role="presentation">
566
+ <a class="fd-menu__link" href="#" role="menuitem">
567
+ <span class="fd-menu__addon-before">
568
+ <i class="sap-icon--official-service" role="presentation"></i>
569
+ </span>
570
+ <span class="fd-menu__title">Legal Information</span>
571
+ </a>
572
+ </li>
573
+
574
+ <li class="fd-menu__item" role="presentation">
575
+ <a class="fd-menu__link" href="#" role="menuitem">
576
+ <span class="fd-menu__addon-before">
577
+ <i class="sap-icon--message-information" role="presentation"></i>
578
+ </span>
579
+ <span class="fd-menu__title">About</span>
580
+ </a>
581
+ </li>
582
+
583
+ </ul>
584
+ </nav>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ <div class="fd-bar fd-bar--footer">
589
+ <div class="fd-bar__right">
590
+ <div class="fd-bar__element">
591
+ <button aria-label="button" class="fd-button fd-button--transparent">
592
+ <i class="sap-icon--log"></i>
593
+ <span class="fd-button__text"> Sign Out</span>
594
+ </button>
595
+ </div>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+
602
+ <div class="fddocs-container" style="margin-bottom: 900px; flex-wrap: wrap; gap: 5rem;">
603
+ <div class="fd-popover fd-popover--right fd-user-menu">
604
+ <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
605
+ <div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
606
+ <div class="fd-user-menu__body">
607
+ <div class="fd-user-menu__header">
608
+ <span
609
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
610
+ aria-label="Avatar"
611
+ style="background-image: url('/assets/images/portraits/L_80x80_F3.png');">
612
+ <i class="fd-avatar__zoom-icon sap-icon--edit" aria-label="Edit" role="presentation" aria-hidden="true"></i>
613
+ </span>
614
+ <div class="fd-user-menu__header-container">
615
+ <div class="fd-user-menu__user-name">Lisa Miller</div>
616
+ <div class="fd-user-menu__subline">lisa.miller@test.com</div>
617
+ <div class="fd-user-menu__subline">User Experience Designer</div>
618
+ <div class="fd-user-menu__subline">Primary Employment</div>
619
+ </div>
620
+ <button aria-label="Manage Account" class="fd-button">
621
+ <i class="sap-icon--user-settings"></i>
622
+ <span class="fd-button__text">Manage Account</span>
623
+ </button>
624
+ </div>
625
+ <div class="fd-user-menu__content-container">
626
+ <div class="fd-panel fd-user-menu__panel" aria-labelledby="__panel-title-8" role="form">
627
+ <div class="fd-panel__header">
628
+ <div class="fd-panel__expand">
629
+ <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="true"
630
+ aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-8">
631
+ <i class="sap-icon--slim-arrow-down"></i>
632
+ </button>
633
+ </div>
634
+ <h4 class="fd-panel__title" id="__panel-title-8">Accounts (3)</h4>
635
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
636
+ <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
637
+ <button class="fd-button fd-button--transparent" aria-label="Add Account" title="Add Account">
638
+ <i class="sap-icon--user-edit"></i>
639
+ </button>
640
+ </div>
641
+ </div>
642
+ <div role="region" aria-labelledby="__panel-title-8" class="fd-panel__content fd-panel__content--no-padding" aria-hidden="false" id="__panel-8">
643
+ <ul class="fd-list fd-list--subline" role="list">
644
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
645
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_F3.png')" role="img" aria-label="Jane Doe"></span>
646
+ <div class="fd-list__content">
647
+ <div class="fd-list__title">Lisa Miller Lorem</div>
648
+ <div class="fd-list__subline">lisa.miller@test.com</div>
649
+ <div class="fd-list__subline">Delivery Manager</div>
650
+ </div>
651
+ <span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
652
+ </li>
653
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
654
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" role="img" aria-label="John Doe"></span>
655
+ <div class="fd-list__content">
656
+ <div class="fd-list__title">John Doe</div>
657
+ <div class="fd-list__subline">john.doe@test.com</div>
658
+ <div class="fd-list__subline">Project Manager</div>
659
+ </div>
660
+
661
+ </li>
662
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
663
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" aria-role="img" aria-label="Jane Doe">JD</span>
664
+ <div class="fd-list__content">
665
+ <div class="fd-list__title">Jane Doe</div>
666
+ <div class="fd-list__subline">jane.doe@test.com</div>
667
+ <div class="fd-list__subline">User Experience Designer</div>
668
+ </div>
669
+ </li>
670
+ </ul>
671
+
672
+ </div>
673
+ </div>
674
+ <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
675
+ <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
676
+ <li class="fd-menu__item" role="presentation">
677
+ <a class="fd-menu__link" href="#" role="menuitem">
678
+ <span class="fd-menu__addon-before">
679
+ <i class="sap-icon--action-settings" role="presentation"></i>
680
+ </span>
681
+ <span class="fd-menu__title">Settings</span>
682
+ </a>
683
+ </li>
684
+
685
+ <li class="fd-menu__item" role="presentation">
686
+ <span
687
+ class="fd-menu__link has-child is-expanded"
688
+ aria-controls="EX100M2B"
689
+ aria-expanded="true"
690
+ aria-haspopup="true"
691
+ role="menuitem">
692
+ <span class="fd-menu__addon-before">
693
+ <i class="sap-icon--card" role="presentation"></i>
694
+ </span>
695
+ <div class="fd-menu__content">
696
+ <span class="fd-menu__title">Menu Item Lorem ipsum dolor sit amet consectetur, adipisicing elit.</span>
697
+ <span class="fd-menu__subtitle">Sub-menu List Item Consectetur reprehenderit, cumque iusto molestiae doloribus assumenda omnis eveniet</span>
698
+ </div>
699
+
700
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
701
+ </span>
702
+
703
+ <ul class="fd-menu__sublist" id="EX100M2B" aria-hidden="false" role="menu">
704
+ <li class="fd-menu__item" role="presentation">
705
+ <a class="fd-menu__link" href="#" role="menuitem">
706
+ <div class="fd-menu__content">
707
+ <span class="fd-menu__title">Sub-menu Item 1 Consectetur reprehenderit, cumque iusto molestiae doloribus assumenda omnis eveniet</span>
708
+ </div>
709
+ <span class="fd-menu__addon-after fd-menu__addon-after--active"><i class="sap-icon--accept" role="presentation"></i></span>
710
+ </a>
711
+ </li>
712
+ <li class="fd-menu__item" role="presentation">
713
+ <a class="fd-menu__link" href="#" role="menuitem">
714
+ <span class="fd-menu__title fd-menu__title--truncate">Sub-menu Item 2 Consectetur reprehenderit, cumque iusto molestiae doloribus assumenda omnis eveniet</span>
715
+ </a>
716
+ </li>
717
+ </ul>
718
+ </li>
719
+
720
+ <li class="fd-menu__item" role="presentation">
721
+ <a class="fd-menu__link" href="#" role="menuitem">
722
+ <span class="fd-menu__addon-before">
723
+ <i class="sap-icon--official-service" role="presentation"></i>
724
+ </span>
725
+ <div class="fd-menu__content">
726
+ <span class="fd-menu__title fd-menu__title--truncate">Menu Item Lorem ipsum dolor sit amet consectetur, adipisicing elit.</span>
727
+ <span class="fd-menu__subtitle fd-menu__subtitle--truncate">Sub-menu List Item Consectetur reprehenderit, cumque iusto molestiae doloribus assumenda omnis eveniet</span>
728
+ </div>
729
+ </a>
730
+ </li>
731
+
732
+ <li class="fd-menu__item" role="presentation">
733
+ <a class="fd-menu__link" href="#" role="menuitem">
734
+ <span class="fd-menu__addon-before">
735
+ <i class="sap-icon--message-information" role="presentation"></i>
736
+ </span>
737
+ <span class="fd-menu__title">About</span>
738
+ </a>
739
+ </li>
740
+
741
+ </ul>
742
+ </nav>
743
+ </div>
744
+ </div>
745
+ </div>
746
+ <div class="fd-bar fd-bar--footer">
747
+ <div class="fd-bar__right">
748
+ <div class="fd-bar__element">
749
+ <button aria-label="button" class="fd-button fd-button--transparent">
750
+ <i class="sap-icon--log"></i>
751
+ <span class="fd-button__text"> Sign Out</span>
752
+ </button>
753
+ </div>
754
+ </div>
755
+ </div>
756
+ </div>
757
+ </div>
758
+ </div>
759
+
760
+ <div class="fddocs-container" style="margin-bottom: 1000px; flex-wrap: wrap; gap: 5rem;">
761
+ <div class="fd-popover fd-popover--right fd-user-menu">
762
+ <div class="fd-popover__body fd-popover__body--right" aria-hidden="false" id="userMenu1">
763
+ <div class="fd-popover__wrapper fd-user-menu__popover-wrapper">
764
+ <div class="fd-user-menu__body">
765
+ <div class="fd-user-menu__header">
766
+ <span
767
+ class="fd-avatar fd-avatar--lg fd-avatar--circle fd-avatar--thumbnail"
768
+ aria-label="Avatar"
769
+ style="background-image: url('/assets/images/portraits/L_80x80_F3.png');">
770
+ <i class="fd-avatar__zoom-icon sap-icon--edit" aria-label="Edit" role="presentation" aria-hidden="true"></i>
771
+ </span>
772
+ <div class="fd-user-menu__header-container">
773
+ <div class="fd-user-menu__user-name">Lisa Miller Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa consequuntur cum voluptate iure tenetu!</div>
774
+ <div class="fd-user-menu__subline">lisa.miller@test.com Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quod accusamus quis magnam, reprehenderit anim.</div>
775
+ <div class="fd-user-menu__subline">A very long subline 2 that can be displayed by wrapping behaviour in the subtitle like this.</div>
776
+ <div class="fd-user-menu__subline fd-user-menu__subline--truncate">A very long subline 3 that can be truncated with ellipsis</div>
777
+ </div>
778
+ <button aria-label="Manage Account" class="fd-button">
779
+ <i class="sap-icon--user-settings"></i>
780
+ <span class="fd-button__text">Manage Account</span>
781
+ </button>
782
+ </div>
783
+ <div class="fd-user-menu__content-container">
784
+ <div class="fd-panel fd-user-menu__panel" aria-labelledby="__panel-title-8" role="form">
785
+ <div class="fd-panel__header">
786
+ <div class="fd-panel__expand">
787
+ <button class="fd-button fd-button--transparent fd-panel__button" aria-expanded="true"
788
+ aria-haspopup="true" aria-label="expand/collapse panel" aria-controls="__panel-8">
789
+ <i class="sap-icon--slim-arrow-down"></i>
790
+ </button>
791
+ </div>
792
+ <h4 class="fd-panel__title" id="__panel-title-8">Accounts (3)</h4>
793
+ <div class="fd-toolbar fd-toolbar--clear fd-toolbar--transparent">
794
+ <span class="fd-toolbar__spacer fd-toolbar__spacer--auto"> </span>
795
+ <button class="fd-button fd-button--transparent" aria-label="Add Account" title="Add Account">
796
+ <i class="sap-icon--user-edit"></i>
797
+ </button>
798
+ </div>
799
+ </div>
800
+ <div role="region" aria-labelledby="__panel-title-8" class="fd-panel__content fd-panel__content--no-padding" aria-hidden="false" id="__panel-8">
801
+ <ul class="fd-list fd-list--subline" role="list">
802
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
803
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_F3.png')" role="img" aria-label="Jane Doe"></span>
804
+ <div class="fd-list__content">
805
+ <div class="fd-list__title">Lisa Miller Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem minima ex distinctio dolores vitae!</div>
806
+ <div class="fd-list__subline">lisa.miller@test.com Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
807
+ <div class="fd-list__subline">Delivery Manager Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
808
+ </div>
809
+ <span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
810
+ </li>
811
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
812
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail" style="background-image: url('/assets/images/portraits/L_80x80_M1.png')" role="img" aria-label="John Doe"></span>
813
+ <div class="fd-list__content">
814
+ <div class="fd-list__title fd-list__title--truncate">John Doe Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem minima ex distinctio dolores vitae!</div>
815
+ <div class="fd-list__subline fd-list__subline--truncate">john.doe@test.com ipsum dolor sit amet consectetur adipisicing elit. Autem minima ex distinctio dolores vitae!</div>
816
+ <div class="fd-list__subline fd-list__subline--truncate">Project Manager ipsum dolor sit amet consectetur adipisicing elit. Autem minima ex distinctio dolores vitae!</div>
817
+ </div>
818
+
819
+ </li>
820
+ <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
821
+ <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" aria-role="img" aria-label="Jane Doe">JD</span>
822
+ <div class="fd-list__content">
823
+ <div class="fd-list__title">Jane Doe</div>
824
+ <div class="fd-list__subline">jane.doe@test.com</div>
825
+ <div class="fd-list__subline">User Experience Designer</div>
826
+ </div>
827
+ </li>
828
+ </ul>
829
+
830
+ </div>
831
+ </div>
832
+ <nav class="fd-menu fd-menu--icons fd-user-menu__menu">
833
+ <ul class="fd-menu__list fd-user-menu__menu-list" role="menu">
834
+ <li class="fd-menu__item" role="presentation">
835
+ <a class="fd-menu__link" href="#" role="menuitem">
836
+ <span class="fd-menu__addon-before">
837
+ <i class="sap-icon--action-settings" role="presentation"></i>
838
+ </span>
839
+ <span class="fd-menu__title">Settings</span>
840
+ </a>
841
+ </li>
842
+
843
+ <li class="fd-menu__item" role="presentation">
844
+ <span
845
+ class="fd-menu__link has-child"
846
+ aria-expanded="false"
847
+ aria-haspopup="true"
848
+ role="menuitem">
849
+ <span class="fd-menu__addon-before">
850
+ <i class="sap-icon--card" role="presentation"></i>
851
+ </span>
852
+ <span class="fd-menu__title">Menu Item</span>
853
+ <span class="fd-menu__addon-after fd-menu__addon-after--submenu"></span>
854
+ </span>
855
+ </li>
856
+
857
+ <li class="fd-menu__item" role="presentation">
858
+ <a class="fd-menu__link" href="#" role="menuitem">
859
+ <span class="fd-menu__addon-before">
860
+ <i class="sap-icon--official-service" role="presentation"></i>
861
+ </span>
862
+ <span class="fd-menu__title">Legal Information</span>
863
+ </a>
864
+ </li>
865
+
866
+ <li class="fd-menu__item" role="presentation">
867
+ <a class="fd-menu__link" href="#" role="menuitem">
868
+ <span class="fd-menu__addon-before">
869
+ <i class="sap-icon--message-information" role="presentation"></i>
870
+ </span>
871
+ <span class="fd-menu__title">About</span>
872
+ </a>
873
+ </li>
874
+
875
+ </ul>
876
+ </nav>
877
+ </div>
878
+ </div>
879
+ </div>
880
+ <div class="fd-bar fd-bar--footer">
881
+ <div class="fd-bar__right">
882
+ <div class="fd-bar__element">
883
+ <button aria-label="button" class="fd-button fd-button--transparent">
884
+ <i class="sap-icon--log"></i>
885
+ <span class="fd-button__text"> Sign Out</span>
886
+ </button>
887
+ </div>
888
+ </div>
889
+ </div>
890
+ </div>
891
+ </div>
892
+ </div>
893
+ ```
894
+
895
+ ## Accessibility
896
+
897
+ - Use semantic HTML elements where appropriate
898
+ - Include proper ARIA attributes for interactive elements
899
+ - Ensure keyboard navigation support
900
+ - Provide adequate color contrast
901
+
902
+ ## Source
903
+
904
+ This documentation was automatically generated from: `packages/styles/stories/Components/user-menu/user-menu.stories.js`
905
+
906
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).