@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/navigation-menu.md ADDED
@@ -0,0 +1,366 @@
1
+ ---
2
+ component: fd-navigation-menu
3
+ title: Dev/Navigation Menu
4
+ category: BTP
5
+ selector: fd-navigation-menu
6
+ cssFile: navigation-menu.css
7
+ sourcePath: packages/styles/stories/BTP/navigation-menu/navigation-menu.stories.js
8
+ tags: ["btp","horizon-only"]
9
+ dependencies: ["icon","navigation-menu"]
10
+ relatedComponents: ["icon","navigation-menu"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.743Z
13
+ ---
14
+
15
+ # Dev/Navigation Menu
16
+
17
+
18
+
19
+ ## Dependencies
20
+
21
+ This component depends on the following CSS files:
22
+
23
+ - `icon.css`
24
+ - `navigation-menu.css`
25
+
26
+ ## Installation
27
+
28
+ ```bash
29
+ npm install fundamental-styles
30
+ ```
31
+
32
+ ```html
33
+ <!-- Include theme -->
34
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
35
+
36
+ <!-- Include component CSS -->
37
+ <link href="node_modules/fundamental-styles/dist/navigation-menu.css" rel="stylesheet">
38
+
39
+ <!-- Include dependencies -->
40
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
41
+ <link href="node_modules/fundamental-styles/dist/navigation-menu.css" rel="stylesheet">
42
+ ```
43
+
44
+ ## Basic Usage
45
+
46
+ ```html
47
+ <div class="fd-navigation-menu">
48
+ <div class="fd-navigation-menu__item" tabindex="0">
49
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
50
+ <span class="fd-navigation-menu__text">
51
+ Menu Item (normal)
52
+ </span>
53
+ </div>
54
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--has-children" tabindex="0">
55
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
56
+ <span class="fd-navigation-menu__text">
57
+ Menu Item with children
58
+ </span>
59
+ </div>
60
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--has-children" aria-expanded="true" tabindex="0">
61
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
62
+ <span class="fd-navigation-menu__text">
63
+ Menu Item with children (expanded)
64
+ </span>
65
+ </div>
66
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--has-link-indicator" tabindex="0">
67
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
68
+ <span class="fd-navigation-menu__text">
69
+ Menu Item with external link indicator
70
+ </span>
71
+ </div>
72
+ <div class="fd-navigation-menu__item is-hover" tabindex="0">
73
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
74
+ <span class="fd-navigation-menu__text">
75
+ Menu Item (hover)
76
+ </span>
77
+ </div>
78
+ <div class="fd-navigation-menu__item is-active" tabindex="0">
79
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
80
+ <span class="fd-navigation-menu__text">
81
+ Menu Item (active)
82
+ </span>
83
+ </div>
84
+ <div class="fd-navigation-menu__item is-selected" tabindex="0">
85
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
86
+ <span class="fd-navigation-menu__text">
87
+ Menu Item (selected)
88
+ </span>
89
+ </div>
90
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--has-children is-selected" tabindex="0">
91
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
92
+ <span class="fd-navigation-menu__text">
93
+ Menu Item (selected) with children
94
+ </span>
95
+ </div>
96
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--has-link-indicator is-selected" tabindex="0">
97
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
98
+ <span class="fd-navigation-menu__text">
99
+ Menu Item (selected) with external link indicator
100
+ </span>
101
+ </div>
102
+ <div class="fd-navigation-menu__item is-focus" tabindex="0">
103
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
104
+ <span class="fd-navigation-menu__text">
105
+ Menu Item (focus)
106
+ </span>
107
+ </div>
108
+ <div class="fd-navigation-menu__item is-disabled" tabindex="-1">
109
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
110
+ <span class="fd-navigation-menu__text">
111
+ Menu Item (disabled)
112
+ </span>
113
+ </div>
114
+ </div>
115
+ ```
116
+
117
+ ## States
118
+
119
+ | Class | Description |
120
+ |-------|-------------|
121
+ | `is-active` | Active state |
122
+ | `is-disabled` | Disabled state |
123
+ | `is-focus` | Focus state |
124
+ | `is-hover` | Hover state |
125
+ | `is-selected` | Selected state |
126
+
127
+ ## BEM Elements
128
+
129
+ This component uses the following BEM elements:
130
+
131
+ - `fd-navigation-menu__icon`
132
+ - `fd-navigation-menu__item`
133
+ - `fd-navigation-menu__item--child`
134
+ - `fd-navigation-menu__item--group`
135
+ - `fd-navigation-menu__item--has-children`
136
+ - `fd-navigation-menu__item--has-link-indicator`
137
+ - `fd-navigation-menu__text`
138
+
139
+ ## Related Components
140
+
141
+ This component works with or depends on:
142
+
143
+ - `icon`
144
+ - `navigation-menu`
145
+
146
+ ## Design Tokens
147
+
148
+ Key CSS variables used by this component:
149
+
150
+ - `--child`
151
+ - `--fdNavigationMenu_Item_Background`
152
+ - `--fdNavigationMenu_Item_Border_Bottom_Color`
153
+ - `--fdNavigationMenu_Item_Border_Bottom_Color_Normal`
154
+ - `--fdNavigationMenu_Item_Border_Color`
155
+ - `--fdNavigationMenu_Item_Border_Color_Active`
156
+ - `--fdNavigationMenu_Item_Border_Color_Hover`
157
+ - `--fdNavigationMenu_Item_Border_Color_Normal`
158
+ - `--fdNavigationMenu_Item_Border_Color_Selected`
159
+ - `--fdNavigationMenu_Item_Border_Radius`
160
+ - `--fdNavigationMenu_Item_Child_Indicator_Size`
161
+ - `--fdNavigationMenu_Item_Font_Size`
162
+ - `--fdNavigationMenu_Item_Font_Weight`
163
+ - `--fdNavigationMenu_Item_Has_Child_Indicator_Icon`
164
+ - `--fdNavigationMenu_Item_Has_Link_Indicator_Icon`
165
+
166
+ *...and 5 more*
167
+
168
+ ## Examples
169
+
170
+ ### Parent Navigation Menu Item
171
+
172
+ The Parent Navigation Menu Item has base class <code>.fd-navigation-menu__item</code>. <br>
173
+ When the item has children use the <code>fd-navigation-menu__item--has-children</code> modifier class. <br>
174
+ For item with external link indicator apply the <code>fd-navigation-menu__item--has-link-indicator</code> modifier class.
175
+
176
+ ```html
177
+ <div class="fd-navigation-menu">
178
+ <div class="fd-navigation-menu__item" tabindex="0">
179
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
180
+ <span class="fd-navigation-menu__text">
181
+ Menu Item (normal)
182
+ </span>
183
+ </div>
184
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--has-children" tabindex="0">
185
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
186
+ <span class="fd-navigation-menu__text">
187
+ Menu Item with children
188
+ </span>
189
+ </div>
190
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--has-children" aria-expanded="true" tabindex="0">
191
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
192
+ <span class="fd-navigation-menu__text">
193
+ Menu Item with children (expanded)
194
+ </span>
195
+ </div>
196
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--has-link-indicator" tabindex="0">
197
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
198
+ <span class="fd-navigation-menu__text">
199
+ Menu Item with external link indicator
200
+ </span>
201
+ </div>
202
+ <div class="fd-navigation-menu__item is-hover" tabindex="0">
203
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
204
+ <span class="fd-navigation-menu__text">
205
+ Menu Item (hover)
206
+ </span>
207
+ </div>
208
+ <div class="fd-navigation-menu__item is-active" tabindex="0">
209
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
210
+ <span class="fd-navigation-menu__text">
211
+ Menu Item (active)
212
+ </span>
213
+ </div>
214
+ <div class="fd-navigation-menu__item is-selected" tabindex="0">
215
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
216
+ <span class="fd-navigation-menu__text">
217
+ Menu Item (selected)
218
+ </span>
219
+ </div>
220
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--has-children is-selected" tabindex="0">
221
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
222
+ <span class="fd-navigation-menu__text">
223
+ Menu Item (selected) with children
224
+ </span>
225
+ </div>
226
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--has-link-indicator is-selected" tabindex="0">
227
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
228
+ <span class="fd-navigation-menu__text">
229
+ Menu Item (selected) with external link indicator
230
+ </span>
231
+ </div>
232
+ <div class="fd-navigation-menu__item is-focus" tabindex="0">
233
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
234
+ <span class="fd-navigation-menu__text">
235
+ Menu Item (focus)
236
+ </span>
237
+ </div>
238
+ <div class="fd-navigation-menu__item is-disabled" tabindex="-1">
239
+ <span class="fd-navigation-menu__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
240
+ <span class="fd-navigation-menu__text">
241
+ Menu Item (disabled)
242
+ </span>
243
+ </div>
244
+ </div>
245
+ ```
246
+
247
+ ### Child Navigation Menu Item
248
+
249
+ For Child Navigation Menu Item apply the <code>.fd-navigation-menu__item--child</code> modifier class to the <code>.fd-navigation-menu__item</code> base class.
250
+
251
+ ```html
252
+ <div class="fd-navigation-menu">
253
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--child" tabindex="0">
254
+ <span class="fd-navigation-menu__text">
255
+ Menu Item (normal)
256
+ </span>
257
+ </div>
258
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--child fd-navigation-menu__item--has-children" tabindex="0">
259
+ <span class="fd-navigation-menu__text">
260
+ Menu Item with children
261
+ </span>
262
+ </div>
263
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--child fd-navigation-menu__item--has-children" aria-expanded="true" tabindex="0">
264
+ <span class="fd-navigation-menu__text">
265
+ Menu Item with children (expanded)
266
+ </span>
267
+ </div>
268
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--child fd-navigation-menu__item--has-link-indicator" tabindex="0">
269
+ <span class="fd-navigation-menu__text">
270
+ Menu Item with external link indicator
271
+ </span>
272
+ </div>
273
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--child is-hover" tabindex="0">
274
+ <span class="fd-navigation-menu__text">
275
+ Menu Item (hover)
276
+ </span>
277
+ </div>
278
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--child is-active" tabindex="0">
279
+ <span class="fd-navigation-menu__text">
280
+ Menu Item (active)
281
+ </span>
282
+ </div>
283
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--child is-selected" tabindex="0">
284
+ <span class="fd-navigation-menu__text">
285
+ Menu Item (selected)
286
+ </span>
287
+ </div>
288
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--child is-focus" tabindex="0">
289
+ <span class="fd-navigation-menu__text">
290
+ Menu Item (focus)
291
+ </span>
292
+ </div>
293
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--child is-disabled" tabindex="-1">
294
+ <span class="fd-navigation-menu__text">
295
+ Menu Item (disabled)
296
+ </span>
297
+ </div>
298
+ </div>
299
+ ```
300
+
301
+ ### Group Navigation Menu Item
302
+
303
+ For Group Navigation Menu Item apply the <code>.fd-navigation-menu__item--group</code> modifier class to the <code>.fd-navigation-menu__item</code> base class.
304
+
305
+ ```html
306
+ <div class="fd-navigation-menu">
307
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--group" tabindex="0">
308
+ <span class="fd-navigation-menu__text">
309
+ Menu Item (normal)
310
+ </span>
311
+ </div>
312
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--group fd-navigation-menu__item--has-children" tabindex="0">
313
+ <span class="fd-navigation-menu__text">
314
+ Menu Item with children
315
+ </span>
316
+ </div>
317
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--group fd-navigation-menu__item--has-children" aria-expanded="true" tabindex="0">
318
+ <span class="fd-navigation-menu__text">
319
+ Menu Item with children (expanded)
320
+ </span>
321
+ </div>
322
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--group fd-navigation-menu__item--has-link-indicator" tabindex="0">
323
+ <span class="fd-navigation-menu__text">
324
+ Menu Item with external link indicator
325
+ </span>
326
+ </div>
327
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--group is-hover" tabindex="0">
328
+ <span class="fd-navigation-menu__text">
329
+ Menu Item (hover)
330
+ </span>
331
+ </div>
332
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--group is-active" tabindex="0">
333
+ <span class="fd-navigation-menu__text">
334
+ Menu Item (active)
335
+ </span>
336
+ </div>
337
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--group is-selected" tabindex="0">
338
+ <span class="fd-navigation-menu__text">
339
+ Menu Item (selected)
340
+ </span>
341
+ </div>
342
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--group is-focus" tabindex="0">
343
+ <span class="fd-navigation-menu__text">
344
+ Menu Item (focus)
345
+ </span>
346
+ </div>
347
+ <div class="fd-navigation-menu__item fd-navigation-menu__item--group is-disabled" tabindex="-1">
348
+ <span class="fd-navigation-menu__text">
349
+ Menu Item (disabled)
350
+ </span>
351
+ </div>
352
+ </div>
353
+ ```
354
+
355
+ ## Accessibility
356
+
357
+ - Use semantic HTML elements where appropriate
358
+ - Include proper ARIA attributes for interactive elements
359
+ - Ensure keyboard navigation support
360
+ - Provide adequate color contrast
361
+
362
+ ## Source
363
+
364
+ This documentation was automatically generated from: `packages/styles/stories/BTP/navigation-menu/navigation-menu.stories.js`
365
+
366
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).