@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/navigation-navigation.md ADDED
@@ -0,0 +1,1245 @@
1
+ ---
2
+ component: fd-navigation
3
+ title: BTP/Navigation/Horizontal Navigation
4
+ category: BTP
5
+ selector: fd-navigation
6
+ cssFile: navigation.css
7
+ sourcePath: packages/styles/stories/BTP/Navigation/horizontal/navigation-horizontal.stories.js
8
+ tags: ["btp","horizon-only"]
9
+ dependencies: []
10
+ relatedComponents: []
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.770Z
13
+ ---
14
+
15
+ # BTP/Navigation/Horizontal Navigation
16
+
17
+ The navigation is one of the signature design elements of BTP Tools.
18
+ ## Navigation Types:
19
+ - <b>Vertical Navigation - Expanded</b>. The default navigation visualization provides a logical grouping of navigation items and two levels of hierarchy.
20
+ - <b>Vertical Navigation - Snapped</b>. The snapped vertical navigation variant reduces the navigation width to free horizontal space.
21
+ - <b>Vertical Navigation - Popup</b>. An alternative to the expanded/snapped variant, which places the navigation items in a popup.
22
+ - <b>Horizontal Navigation</b>&nbsp;- The horizontal variant allows for infinite levels of navigation hierarchy through cascading menus.
23
+
24
+
25
+ ## Usage
26
+ ### Recommended
27
+ - Use the navigation to switch between different pages of your tool.
28
+ - Use expanded vertical navigation for unknown users.
29
+ - Use persistence and display the last state the vertical navigation was in for know users.
30
+ - Use the snapped variant when the content area displays multi-column content relationships.
31
+ - Use the popup variant to display between 3 and 7 navigation items without hierarchy.
32
+ - Use the horizontal navigation variant to display more than two levels of hierarchy.
33
+ - Use nouns for the titles of navigation items.
34
+
35
+ ### Not Recommended
36
+ - Avoid using the navigation for switching between tools. Use the mega menu instead.
37
+ - Avoid using the navigation to switch contexts or views. Use tabs or segmented buttons instead.
38
+ - Avoid using verbs for the titles of navigation items. Use nouns instead.
39
+ - Avoid using the Navigation Items for both navigation and groups. Use only one of the options.
40
+ - Avoid having more than three levels of hierarchy in the horizontal variant.
41
+ - Avoid using icons in secondary navigation and navigation groups.
42
+ - Avoid using spacers to separate navigation content. Use separators instead.
43
+ - Avoid using dividers to separate groups. Use separators instead.
44
+ - Avoid using the bottom navigation area for service information. Use settings and user menu instead.
45
+
46
+ ## Installation
47
+
48
+ ```bash
49
+ npm install fundamental-styles
50
+ ```
51
+
52
+ ```html
53
+ <!-- Include theme -->
54
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
55
+
56
+ <!-- Include component CSS -->
57
+ <link href="node_modules/fundamental-styles/dist/navigation.css" rel="stylesheet">
58
+
59
+ ```
60
+
61
+ ## Basic Usage
62
+
63
+ ```html
64
+ <nav
65
+ class="fd-navigation fd-navigation--horizontal"
66
+ aria-label="Horizontal Navigation">
67
+ <div class="fd-navigation__container">
68
+ <ul
69
+ class="fd-navigation__list"
70
+ role="menubar"
71
+ aria-label="Horizontal Navigation"
72
+ >
73
+ <li role="none" tabindex="-1" class="fd-navigation__list-item fd-navigation__list-item--home" aria-hidden="true">
74
+ <div
75
+ class="fd-navigation__item"
76
+ aria-current="page"
77
+ aria-selected="true"
78
+ aria-expanded="false"
79
+ role="menuitem"
80
+ >
81
+ <a class="fd-navigation__link" role="link" href="#">
82
+ <span class="fd-navigation__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
83
+ <span class="fd-navigation__text">Home</span>
84
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
85
+ </a>
86
+ </li>
87
+
88
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
89
+ <div
90
+ class="fd-navigation__item"
91
+ aria-current="false"
92
+ aria-expanded="false"
93
+ role="menuitem"
94
+ >
95
+ <a class="fd-navigation__link" role="link" href="#">
96
+ <span class="fd-navigation__icon sap-icon--calendar" role="presentation" aria-hidden="true"></span>
97
+ <span class="fd-navigation__text">Appointment</span>
98
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
99
+ </a>
100
+ </div>
101
+ </li>
102
+
103
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
104
+ <div
105
+ class="fd-navigation__item"
106
+ aria-current="false"
107
+ aria-expanded="false"
108
+ role="menuitem"
109
+ >
110
+ <a class="fd-navigation__link" role="link" href="#">
111
+ <span class="fd-navigation__icon sap-icon--database" role="presentation" aria-hidden="true"></span>
112
+ <span class="fd-navigation__text">Data</span>
113
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
114
+ </a>
115
+ </li>
116
+
117
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
118
+ <div
119
+ class="fd-navigation__item"
120
+ aria-current="false"
121
+ aria-expanded="false"
122
+ role="menuitem"
123
+ >
124
+ <a class="fd-navigation__link" role="link" href="#">
125
+ <span class="fd-navigation__icon sap-icon--attachment" role="presentation" aria-hidden="true"></span>
126
+ <span class="fd-navigation__text">Attachment</span>
127
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
128
+ </a>
129
+ </li>
130
+
131
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
132
+ <div
133
+ class="fd-navigation__item"
134
+ aria-current="false"
135
+ aria-expanded="false"
136
+ role="menuitem"
137
+ >
138
+ <a class="fd-navigation__link" role="link" href="#">
139
+ <span class="fd-navigation__icon sap-icon--create-entry-time" role="presentation" aria-hidden="true"></span>
140
+ <span class="fd-navigation__text">Time</span>
141
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
142
+ </a>
143
+ </li>
144
+
145
+ <li role="none" tabindex="-1" class="fd-navigation__list-item fd-popover" aria-hidden="true">
146
+ <div
147
+ class="fd-navigation__item fd-popover__control"
148
+ aria-current="false"
149
+ aria-expanded="true"
150
+ aria-haspopup="tree"
151
+ role="menuitem"
152
+ >
153
+ <a class="fd-navigation__link" role="button" tabindex="0">
154
+ <span class="fd-navigation__icon sap-icon--basket" role="presentation" aria-hidden="true"></span>
155
+ <span class="fd-navigation__text">Basket</span>
156
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
157
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator"></span>
158
+ </a>
159
+ <div class="fd-navigation__list-container fd-popover__body fd-popover__body--no-arrow" aria-hidden="false">
160
+ <div class="fd-navigation__list-wrapper fd-popover__wrapper">
161
+ <ul class="fd-navigation__list fd-navigation__list--child-items" role="tree" aria-roledescription="Navigation List Tree - Child Items" tabindex="-1" aria-hidden="true">
162
+ <li class="fd-navigation__list-item" aria-hidden="true">
163
+ <div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Future Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
164
+ <a class="fd-navigation__link" role="link" href="#">
165
+ <span class="fd-navigation__text">Future Orders</span>
166
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
167
+ </a>
168
+ </div>
169
+ </li>
170
+ <li class="fd-navigation__list-item" aria-hidden="true">
171
+ <div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Current Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="true">
172
+ <a class="fd-navigation__link" role="link" href="#">
173
+ <span class="fd-navigation__text">Current Orders (selected)</span>
174
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
175
+ </a>
176
+ </div>
177
+ </li>
178
+ <li class="fd-navigation__list-item" aria-hidden="true">
179
+ <div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Past Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
180
+ <a class="fd-navigation__link" role="link" href="#">
181
+ <span class="fd-navigation__text">Past Orders</span>
182
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
183
+ </a>
184
+ </div>
185
+ </li>
186
+ <li class="fd-navigation__list-item" aria-hidden="true">
187
+ <div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Lost Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
188
+ <a class="fd-navigation__link" role="link" href="#">
189
+ <span class="fd-navigation__text">Lost Orders</span>
190
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
191
+ </a>
192
+ </div>
193
+ </li>
194
+ <li class="fd-navigation__list-item" aria-hidden="true">
195
+ <div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Forgotten Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
196
+ <a class="fd-navigation__link" role="link" href="#">
197
+ <span class="fd-navigation__text">Forgotten Orders (external link)</span>
198
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
199
+ <span class="fd-navigation__external-link-indicator" role="presentation" aria-hidden="true" aria-label="external link indicator"></span>
200
+ </a>
201
+ </div>
202
+ </li>
203
+ </ul>
204
+ </div>
205
+ </div>
206
+ </li>
207
+
208
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
209
+ <div
210
+ class="fd-navigation__item"
211
+ aria-current="false"
212
+ aria-expanded="false"
213
+ role="menuitem"
214
+ >
215
+ <a class="fd-navigation__link" role="link" href="#">
216
+ <span class="fd-navigation__icon sap-icon--shield" role="presentation" aria-hidden="true"></span>
217
+ <span class="fd-navigation__text">Shield</span>
218
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
219
+ </a>
220
+ </li>
221
+
222
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
223
+ <div
224
+ class="fd-navigation__item"
225
+ aria-current="false"
226
+ aria-expanded="false"
227
+ role="menuitem"
228
+ >
229
+ <a class="fd-navigation__link" role="link" href="#">
230
+ <span class="fd-navigation__icon sap-icon--action-settings" role="presentation" aria-hidden="true"></span>
231
+ <span class="fd-navigation__text">Cog</span>
232
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
233
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
234
+ </a>
235
+ </li>
236
+
237
+ <li class="fd-navigation__list-item fd-navigation__list-item--spacer" role="presentation" aria-hidden="true">
238
+ </li>
239
+
240
+ <li role="none" tabindex="-1" class="fd-navigation__list-item fd-navigation__list-item--overflow" aria-hidden="true">
241
+ <div
242
+ class="fd-navigation__item"
243
+ aria-current="false"
244
+ aria-expanded="true"
245
+ role="menuitem"
246
+ >
247
+ <a class="fd-navigation__link" role="button" tabindex="0">
248
+ <span class="fd-navigation__icon sap-icon--overflow" role="presentation" aria-hidden="true"></span>
249
+ </a>
250
+ <div class="fd-navigation__list-container fd-navigation__list-container--menu fd-menu" aria-hidden="false" id="navMenuOverflow">
251
+ <div class="fd-navigation__list-wrapper">
252
+ <ul
253
+ class="fd-navigation__list fd-navigation__list--parent-items fd-menu__list"
254
+ role="menu"
255
+ aria-roledescription="Navigation List Tree"
256
+ tabindex="-1">
257
+
258
+ <li class="fd-navigation__list-item" aria-hidden="true">
259
+ <div
260
+ class="fd-navigation__item fd-navigation__item--overflow"
261
+ role="menuitem"
262
+ aria-disabled="false"
263
+ aria-posinset="1"
264
+ aria-setsize="3"
265
+ aria-haspopup="false"
266
+ aria-labelledby="txt-1"
267
+ aria-expanded="false"
268
+ >
269
+ <a class="fd-navigation__link" role="link" href="#">
270
+ <span class="fd-navigation__icon sap-icon--notes" role="presentation" aria-hidden="true"></span>
271
+ <span class="fd-navigation__text" id="txt-1">Parent Item</span>
272
+ <span class="fd-navigation__selection-indicator"></span>
273
+ </a>
274
+ </div>
275
+ </li>
276
+
277
+ <li class="fd-navigation__list-item" aria-hidden="true">
278
+ <div
279
+ class="fd-navigation__item fd-navigation__item--overflow"
280
+ role="menuitem"
281
+ aria-disabled="false"
282
+ aria-posinset="2"
283
+ aria-setsize="3"
284
+ aria-haspopup="menu"
285
+ aria-labelledby="txt-2"
286
+ aria-expanded="true"
287
+ aria-owns="children-menu"
288
+ >
289
+ <a class="fd-navigation__link" role="button" tabindex="0" aria-controls="navPopover3">
290
+ <span class="fd-navigation__icon sap-icon--horizontal-bar-chart" role="presentation" aria-hidden="true"></span>
291
+ <span class="fd-navigation__text" id="txt-2">Parent Item</span>
292
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
293
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
294
+ </a>
295
+ </div>
296
+ <div
297
+ class="fd-navigation__list-container fd-navigation__list-container--submenu"
298
+ aria-hidden="false">
299
+ <div class="fd-navigation__list-wrapper">
300
+ <ul
301
+ class="fd-navigation__list fd-navigation__list--child-items" id="children-menu"
302
+ role="menu"
303
+ aria-roledescription="Navigation List Tree - Children Items"
304
+ tabindex="-1"
305
+ >
306
+ <li class="fd-navigation__list-item" aria-hidden="true">
307
+ <div
308
+ class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
309
+ aria-labelledby="txt-child-1"
310
+ role="menuitem"
311
+ aria-posinset="1"
312
+ aria-setsize="3"
313
+ aria-disabled="false"
314
+ aria-selected="false"
315
+ >
316
+ <a class="fd-navigation__link" role="link" href="#">
317
+ <span class="fd-navigation__text" id="txt-child-1">Child Item</span>
318
+ <span class="fd-navigation__selection-indicator"></span>
319
+ </a>
320
+ </div>
321
+ </li>
322
+ <li class="fd-navigation__list-item" aria-hidden="true">
323
+ <div
324
+ class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
325
+ aria-labelledby="txt-child-2"
326
+ role="menuitem"
327
+ aria-posinset="2"
328
+ aria-setsize="3"
329
+ aria-disabled="false"
330
+ aria-selected="false"
331
+ >
332
+ <a class="fd-navigation__link" role="link" href="#">
333
+ <span class="fd-navigation__text" id="txt-child-2">Child Item</span>
334
+ <span class="fd-navigation__selection-indicator"></span>
335
+ </a>
336
+ </li>
337
+ <li class="fd-navigation__list-item" aria-hidden="true">
338
+ <div
339
+ class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
340
+ aria-labelledby="txt-child-3"
341
+ role="menuitem"
342
+ aria-posinset="3"
343
+ aria-setsize="3"
344
+ aria-disabled="false"
345
+ aria-selected="true"
346
+ >
347
+ <a class="fd-navigation__link" role="link" href="#">
348
+ <span class="fd-navigation__text" id="txt-child-3">Child Item</span>
349
+ <span class="fd-navigation__selection-indicator"></span>
350
+ </a>
351
+ </li>
352
+
353
+ </ul>
354
+ </li>
355
+
356
+ <li class="fd-navigation__list-item" aria-hidden="true">
357
+ <div
358
+ class="fd-navigation__item fd-navigation__item--overflow"
359
+ role="menuitem"
360
+ aria-disabled="false"
361
+ aria-posinset="3"
362
+ aria-setsize="3"
363
+ aria-haspopup="false"
364
+ aria-labelledby="txt-3"
365
+ aria-expanded="false"
366
+ >
367
+ <a class="fd-navigation__link" role="link" href="#">
368
+ <span class="fd-navigation__icon sap-icon--notes" role="presentation" aria-hidden="true"></span>
369
+ <span class="fd-navigation__text" id="txt-3">Parent Item</span>
370
+ <span class="fd-navigation__selection-indicator"></span>
371
+ </a>
372
+ </li>
373
+ </ul>
374
+ </li>
375
+ </ul>
376
+ </nav>
377
+ ```
378
+
379
+ ## Modifiers
380
+
381
+ | Class | Description |
382
+ |-------|-------------|
383
+ | `fd-navigation--horizontal` | Horizontal Navigation is an optional alternative to the Vertical Navigation variant. |
384
+
385
+ ## BEM Elements
386
+
387
+ This component uses the following BEM elements:
388
+
389
+ - `fd-navigation__container`
390
+ - `fd-navigation__external-link-indicator`
391
+ - `fd-navigation__has-children-indicator`
392
+ - `fd-navigation__icon`
393
+ - `fd-navigation__item`
394
+ - `fd-navigation__item--child`
395
+ - `fd-navigation__item--overflow`
396
+ - `fd-navigation__item--submenu-child`
397
+ - `fd-navigation__item--with-expander`
398
+ - `fd-navigation__link`
399
+ - `fd-navigation__list`
400
+ - `fd-navigation__list--child-items`
401
+ - `fd-navigation__list--parent-items`
402
+ - `fd-navigation__list-container`
403
+ - `fd-navigation__list-container--menu`
404
+ - `fd-navigation__list-container--submenu`
405
+ - `fd-navigation__list-item`
406
+ - `fd-navigation__list-item--home`
407
+ - `fd-navigation__list-item--overflow`
408
+ - `fd-navigation__list-item--spacer`
409
+ - `fd-navigation__list-wrapper`
410
+ - `fd-navigation__selection-indicator`
411
+ - `fd-navigation__text`
412
+
413
+ ## Examples
414
+
415
+ ### Horizontal Navigation
416
+
417
+ Horizontal Navigation is an optional alternative to the Vertical Navigation variant.
418
+
419
+ ```html
420
+ <nav
421
+ class="fd-navigation fd-navigation--horizontal"
422
+ aria-label="Horizontal Navigation">
423
+ <div class="fd-navigation__container">
424
+ <ul
425
+ class="fd-navigation__list"
426
+ role="menubar"
427
+ aria-label="Horizontal Navigation"
428
+ >
429
+ <li role="none" tabindex="-1" class="fd-navigation__list-item fd-navigation__list-item--home" aria-hidden="true">
430
+ <div
431
+ class="fd-navigation__item"
432
+ aria-current="page"
433
+ aria-selected="true"
434
+ aria-expanded="false"
435
+ role="menuitem"
436
+ >
437
+ <a class="fd-navigation__link" role="link" href="#">
438
+ <span class="fd-navigation__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
439
+ <span class="fd-navigation__text">Home</span>
440
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
441
+ </a>
442
+ </li>
443
+
444
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
445
+ <div
446
+ class="fd-navigation__item"
447
+ aria-current="false"
448
+ aria-expanded="false"
449
+ role="menuitem"
450
+ >
451
+ <a class="fd-navigation__link" role="link" href="#">
452
+ <span class="fd-navigation__icon sap-icon--calendar" role="presentation" aria-hidden="true"></span>
453
+ <span class="fd-navigation__text">Appointment</span>
454
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
455
+ </a>
456
+ </div>
457
+ </li>
458
+
459
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
460
+ <div
461
+ class="fd-navigation__item"
462
+ aria-current="false"
463
+ aria-expanded="false"
464
+ role="menuitem"
465
+ >
466
+ <a class="fd-navigation__link" role="link" href="#">
467
+ <span class="fd-navigation__icon sap-icon--database" role="presentation" aria-hidden="true"></span>
468
+ <span class="fd-navigation__text">Data</span>
469
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
470
+ </a>
471
+ </li>
472
+
473
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
474
+ <div
475
+ class="fd-navigation__item"
476
+ aria-current="false"
477
+ aria-expanded="false"
478
+ role="menuitem"
479
+ >
480
+ <a class="fd-navigation__link" role="link" href="#">
481
+ <span class="fd-navigation__icon sap-icon--attachment" role="presentation" aria-hidden="true"></span>
482
+ <span class="fd-navigation__text">Attachment</span>
483
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
484
+ </a>
485
+ </li>
486
+
487
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
488
+ <div
489
+ class="fd-navigation__item"
490
+ aria-current="false"
491
+ aria-expanded="false"
492
+ role="menuitem"
493
+ >
494
+ <a class="fd-navigation__link" role="link" href="#">
495
+ <span class="fd-navigation__icon sap-icon--create-entry-time" role="presentation" aria-hidden="true"></span>
496
+ <span class="fd-navigation__text">Time</span>
497
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
498
+ </a>
499
+ </li>
500
+
501
+ <li role="none" tabindex="-1" class="fd-navigation__list-item fd-popover" aria-hidden="true">
502
+ <div
503
+ class="fd-navigation__item fd-popover__control"
504
+ aria-current="false"
505
+ aria-expanded="true"
506
+ aria-haspopup="tree"
507
+ role="menuitem"
508
+ >
509
+ <a class="fd-navigation__link" role="button" tabindex="0">
510
+ <span class="fd-navigation__icon sap-icon--basket" role="presentation" aria-hidden="true"></span>
511
+ <span class="fd-navigation__text">Basket</span>
512
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
513
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator"></span>
514
+ </a>
515
+ <div class="fd-navigation__list-container fd-popover__body fd-popover__body--no-arrow" aria-hidden="false">
516
+ <div class="fd-navigation__list-wrapper fd-popover__wrapper">
517
+ <ul class="fd-navigation__list fd-navigation__list--child-items" role="tree" aria-roledescription="Navigation List Tree - Child Items" tabindex="-1" aria-hidden="true">
518
+ <li class="fd-navigation__list-item" aria-hidden="true">
519
+ <div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Future Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
520
+ <a class="fd-navigation__link" role="link" href="#">
521
+ <span class="fd-navigation__text">Future Orders</span>
522
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
523
+ </a>
524
+ </div>
525
+ </li>
526
+ <li class="fd-navigation__list-item" aria-hidden="true">
527
+ <div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Current Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="true">
528
+ <a class="fd-navigation__link" role="link" href="#">
529
+ <span class="fd-navigation__text">Current Orders (selected)</span>
530
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
531
+ </a>
532
+ </div>
533
+ </li>
534
+ <li class="fd-navigation__list-item" aria-hidden="true">
535
+ <div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Past Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
536
+ <a class="fd-navigation__link" role="link" href="#">
537
+ <span class="fd-navigation__text">Past Orders</span>
538
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
539
+ </a>
540
+ </div>
541
+ </li>
542
+ <li class="fd-navigation__list-item" aria-hidden="true">
543
+ <div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Lost Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
544
+ <a class="fd-navigation__link" role="link" href="#">
545
+ <span class="fd-navigation__text">Lost Orders</span>
546
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
547
+ </a>
548
+ </div>
549
+ </li>
550
+ <li class="fd-navigation__list-item" aria-hidden="true">
551
+ <div class="fd-navigation__item fd-navigation__item--child" aria-level="1" role="treeitem" title="Forgotten Orders" aria-roledescription="Navigation List Menu Item - Child" aria-expanded="false" aria-selected="false">
552
+ <a class="fd-navigation__link" role="link" href="#">
553
+ <span class="fd-navigation__text">Forgotten Orders (external link)</span>
554
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
555
+ <span class="fd-navigation__external-link-indicator" role="presentation" aria-hidden="true" aria-label="external link indicator"></span>
556
+ </a>
557
+ </div>
558
+ </li>
559
+ </ul>
560
+ </div>
561
+ </div>
562
+ </li>
563
+
564
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
565
+ <div
566
+ class="fd-navigation__item"
567
+ aria-current="false"
568
+ aria-expanded="false"
569
+ role="menuitem"
570
+ >
571
+ <a class="fd-navigation__link" role="link" href="#">
572
+ <span class="fd-navigation__icon sap-icon--shield" role="presentation" aria-hidden="true"></span>
573
+ <span class="fd-navigation__text">Shield</span>
574
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
575
+ </a>
576
+ </li>
577
+
578
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
579
+ <div
580
+ class="fd-navigation__item"
581
+ aria-current="false"
582
+ aria-expanded="false"
583
+ role="menuitem"
584
+ >
585
+ <a class="fd-navigation__link" role="link" href="#">
586
+ <span class="fd-navigation__icon sap-icon--action-settings" role="presentation" aria-hidden="true"></span>
587
+ <span class="fd-navigation__text">Cog</span>
588
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
589
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
590
+ </a>
591
+ </li>
592
+
593
+ <li class="fd-navigation__list-item fd-navigation__list-item--spacer" role="presentation" aria-hidden="true">
594
+ </li>
595
+
596
+ <li role="none" tabindex="-1" class="fd-navigation__list-item fd-navigation__list-item--overflow" aria-hidden="true">
597
+ <div
598
+ class="fd-navigation__item"
599
+ aria-current="false"
600
+ aria-expanded="true"
601
+ role="menuitem"
602
+ >
603
+ <a class="fd-navigation__link" role="button" tabindex="0">
604
+ <span class="fd-navigation__icon sap-icon--overflow" role="presentation" aria-hidden="true"></span>
605
+ </a>
606
+ <div class="fd-navigation__list-container fd-navigation__list-container--menu fd-menu" aria-hidden="false" id="navMenuOverflow">
607
+ <div class="fd-navigation__list-wrapper">
608
+ <ul
609
+ class="fd-navigation__list fd-navigation__list--parent-items fd-menu__list"
610
+ role="menu"
611
+ aria-roledescription="Navigation List Tree"
612
+ tabindex="-1">
613
+
614
+ <li class="fd-navigation__list-item" aria-hidden="true">
615
+ <div
616
+ class="fd-navigation__item fd-navigation__item--overflow"
617
+ role="menuitem"
618
+ aria-disabled="false"
619
+ aria-posinset="1"
620
+ aria-setsize="3"
621
+ aria-haspopup="false"
622
+ aria-labelledby="txt-1"
623
+ aria-expanded="false"
624
+ >
625
+ <a class="fd-navigation__link" role="link" href="#">
626
+ <span class="fd-navigation__icon sap-icon--notes" role="presentation" aria-hidden="true"></span>
627
+ <span class="fd-navigation__text" id="txt-1">Parent Item</span>
628
+ <span class="fd-navigation__selection-indicator"></span>
629
+ </a>
630
+ </div>
631
+ </li>
632
+
633
+ <li class="fd-navigation__list-item" aria-hidden="true">
634
+ <div
635
+ class="fd-navigation__item fd-navigation__item--overflow"
636
+ role="menuitem"
637
+ aria-disabled="false"
638
+ aria-posinset="2"
639
+ aria-setsize="3"
640
+ aria-haspopup="menu"
641
+ aria-labelledby="txt-2"
642
+ aria-expanded="true"
643
+ aria-owns="children-menu"
644
+ >
645
+ <a class="fd-navigation__link" role="button" tabindex="0" aria-controls="navPopover3">
646
+ <span class="fd-navigation__icon sap-icon--horizontal-bar-chart" role="presentation" aria-hidden="true"></span>
647
+ <span class="fd-navigation__text" id="txt-2">Parent Item</span>
648
+ <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
649
+ <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
650
+ </a>
651
+ </div>
652
+ <div
653
+ class="fd-navigation__list-container fd-navigation__list-container--submenu"
654
+ aria-hidden="false">
655
+ <div class="fd-navigation__list-wrapper">
656
+ <ul
657
+ class="fd-navigation__list fd-navigation__list--child-items" id="children-menu"
658
+ role="menu"
659
+ aria-roledescription="Navigation List Tree - Children Items"
660
+ tabindex="-1"
661
+ >
662
+ <li class="fd-navigation__list-item" aria-hidden="true">
663
+ <div
664
+ class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
665
+ aria-labelledby="txt-child-1"
666
+ role="menuitem"
667
+ aria-posinset="1"
668
+ aria-setsize="3"
669
+ aria-disabled="false"
670
+ aria-selected="false"
671
+ >
672
+ <a class="fd-navigation__link" role="link" href="#">
673
+ <span class="fd-navigation__text" id="txt-child-1">Child Item</span>
674
+ <span class="fd-navigation__selection-indicator"></span>
675
+ </a>
676
+ </div>
677
+ </li>
678
+ <li class="fd-navigation__list-item" aria-hidden="true">
679
+ <div
680
+ class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
681
+ aria-labelledby="txt-child-2"
682
+ role="menuitem"
683
+ aria-posinset="2"
684
+ aria-setsize="3"
685
+ aria-disabled="false"
686
+ aria-selected="false"
687
+ >
688
+ <a class="fd-navigation__link" role="link" href="#">
689
+ <span class="fd-navigation__text" id="txt-child-2">Child Item</span>
690
+ <span class="fd-navigation__selection-indicator"></span>
691
+ </a>
692
+ </li>
693
+ <li class="fd-navigation__list-item" aria-hidden="true">
694
+ <div
695
+ class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
696
+ aria-labelledby="txt-child-3"
697
+ role="menuitem"
698
+ aria-posinset="3"
699
+ aria-setsize="3"
700
+ aria-disabled="false"
701
+ aria-selected="true"
702
+ >
703
+ <a class="fd-navigation__link" role="link" href="#">
704
+ <span class="fd-navigation__text" id="txt-child-3">Child Item</span>
705
+ <span class="fd-navigation__selection-indicator"></span>
706
+ </a>
707
+ </li>
708
+
709
+ </ul>
710
+ </li>
711
+
712
+ <li class="fd-navigation__list-item" aria-hidden="true">
713
+ <div
714
+ class="fd-navigation__item fd-navigation__item--overflow"
715
+ role="menuitem"
716
+ aria-disabled="false"
717
+ aria-posinset="3"
718
+ aria-setsize="3"
719
+ aria-haspopup="false"
720
+ aria-labelledby="txt-3"
721
+ aria-expanded="false"
722
+ >
723
+ <a class="fd-navigation__link" role="link" href="#">
724
+ <span class="fd-navigation__icon sap-icon--notes" role="presentation" aria-hidden="true"></span>
725
+ <span class="fd-navigation__text" id="txt-3">Parent Item</span>
726
+ <span class="fd-navigation__selection-indicator"></span>
727
+ </a>
728
+ </li>
729
+ </ul>
730
+ </li>
731
+ </ul>
732
+ </nav>
733
+ ```
734
+
735
+ ### Horizontal Navigation - Two-Click Area
736
+
737
+ ```html
738
+ <nav class="fd-navigation fd-navigation--horizontal" aria-label="Horizontal Navigation">
739
+ <div class="fd-navigation__container">
740
+ <ul class="fd-navigation__list" role="menubar" aria-label="Horizontal Navigation">
741
+ <li
742
+ role="none"
743
+ tabindex="-1"
744
+ class="fd-navigation__list-item fd-navigation__list-item--home"
745
+ aria-hidden="true"
746
+ >
747
+ <div
748
+ class="fd-navigation__item"
749
+ aria-current="page"
750
+ aria-selected="false"
751
+ aria-expanded="false"
752
+ role="menuitem"
753
+ >
754
+ <a class="fd-navigation__link" role="link" href="#">
755
+ <span
756
+ class="fd-navigation__icon sap-icon--home"
757
+ role="presentation"
758
+ aria-hidden="true"
759
+ ></span>
760
+ <span class="fd-navigation__text">Home</span>
761
+ <span
762
+ class="fd-navigation__selection-indicator"
763
+ role="presentation"
764
+ aria-hidden="true"
765
+ aria-label="selection indicator"
766
+ ></span>
767
+ </a>
768
+ </li>
769
+
770
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
771
+ <div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
772
+ <a class="fd-navigation__link" role="link" href="#">
773
+ <span
774
+ class="fd-navigation__icon sap-icon--calendar"
775
+ role="presentation"
776
+ aria-hidden="true"
777
+ ></span>
778
+ <span class="fd-navigation__text">Appointment</span>
779
+ <span
780
+ class="fd-navigation__selection-indicator"
781
+ role="presentation"
782
+ aria-hidden="true"
783
+ aria-label="selection indicator"
784
+ ></span>
785
+ </a>
786
+ </div>
787
+ </li>
788
+
789
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
790
+ <div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
791
+ <a class="fd-navigation__link" role="link" href="#">
792
+ <span
793
+ class="fd-navigation__icon sap-icon--database"
794
+ role="presentation"
795
+ aria-hidden="true"
796
+ ></span>
797
+ <span class="fd-navigation__text">Data</span>
798
+ <span
799
+ class="fd-navigation__selection-indicator"
800
+ role="presentation"
801
+ aria-hidden="true"
802
+ aria-label="selection indicator"
803
+ ></span>
804
+ </a>
805
+ </div>
806
+ </li>
807
+
808
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
809
+ <div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
810
+ <a class="fd-navigation__link" role="link" href="#">
811
+ <span
812
+ class="fd-navigation__icon sap-icon--attachment"
813
+ role="presentation"
814
+ aria-hidden="true"
815
+ ></span>
816
+ <span class="fd-navigation__text">Attachment</span>
817
+ <span
818
+ class="fd-navigation__selection-indicator"
819
+ role="presentation"
820
+ aria-hidden="true"
821
+ aria-label="selection indicator"
822
+ ></span>
823
+ </a>
824
+ </div>
825
+ </li>
826
+
827
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
828
+ <div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
829
+ <a class="fd-navigation__link" role="link" href="#">
830
+ <span
831
+ class="fd-navigation__icon sap-icon--create-entry-time"
832
+ role="presentation"
833
+ aria-hidden="true"
834
+ ></span>
835
+ <span class="fd-navigation__text">Time</span>
836
+ <span
837
+ class="fd-navigation__selection-indicator"
838
+ role="presentation"
839
+ aria-hidden="true"
840
+ aria-label="selection indicator"
841
+ ></span>
842
+ </a>
843
+ </div>
844
+ </li>
845
+
846
+ <li role="none" tabindex="-1" class="fd-navigation__list-item fd-popover" aria-hidden="true">
847
+ <div
848
+ class="fd-navigation__item fd-navigation__item--with-expander fd-popover__control"
849
+ aria-current="false"
850
+ aria-expanded="true"
851
+ aria-haspopup="tree"
852
+ role="menuitem"
853
+ >
854
+ <a class="fd-navigation__link" role="button" tabindex="0">
855
+ <span
856
+ class="fd-navigation__icon sap-icon--basket"
857
+ role="presentation"
858
+ aria-hidden="true"
859
+ ></span>
860
+ <span class="fd-navigation__text">Basket</span>
861
+ <span
862
+ class="fd-navigation__selection-indicator"
863
+ role="presentation"
864
+ aria-hidden="true"
865
+ aria-label="selection indicator"
866
+ ></span>
867
+ </a>
868
+ <span
869
+ class="fd-navigation__has-children-indicator"
870
+ role="button"
871
+ aria-hidden="true"
872
+ aria-label="Expand/Collapse"
873
+ aria-expanded="true"
874
+ ></span>
875
+ </div>
876
+ <div
877
+ class="fd-navigation__list-container fd-popover__body fd-popover__body--no-arrow"
878
+ aria-hidden="false"
879
+ >
880
+ <div class="fd-navigation__list-wrapper fd-popover__wrapper">
881
+ <ul
882
+ class="fd-navigation__list fd-navigation__list--child-items"
883
+ role="tree"
884
+ aria-roledescription="Navigation List Tree - Child Items"
885
+ tabindex="-1"
886
+ aria-hidden="true"
887
+ >
888
+ <li class="fd-navigation__list-item" aria-hidden="true">
889
+ <div
890
+ class="fd-navigation__item fd-navigation__item--child"
891
+ aria-level="1"
892
+ role="treeitem"
893
+ title="Future Orders"
894
+ aria-roledescription="Navigation List Menu Item - Child"
895
+ aria-expanded="false"
896
+ aria-selected="false"
897
+ >
898
+ <a class="fd-navigation__link" role="link" href="#">
899
+ <span class="fd-navigation__text">Future Orders</span>
900
+ <span
901
+ class="fd-navigation__selection-indicator"
902
+ role="presentation"
903
+ aria-hidden="true"
904
+ aria-label="selection indicator"
905
+ ></span>
906
+ </a>
907
+ </div>
908
+ </li>
909
+ <li class="fd-navigation__list-item" aria-hidden="true">
910
+ <div
911
+ class="fd-navigation__item fd-navigation__item--child"
912
+ aria-level="1"
913
+ role="treeitem"
914
+ title="Current Orders"
915
+ aria-roledescription="Navigation List Menu Item - Child"
916
+ aria-expanded="false"
917
+ aria-selected="true"
918
+ >
919
+ <a class="fd-navigation__link" role="link" href="#">
920
+ <span class="fd-navigation__text">Current Orders (selected)</span>
921
+ <span
922
+ class="fd-navigation__selection-indicator"
923
+ role="presentation"
924
+ aria-hidden="true"
925
+ aria-label="selection indicator"
926
+ ></span>
927
+ </a>
928
+ </li>
929
+ <li class="fd-navigation__list-item" aria-hidden="true">
930
+ <div
931
+ class="fd-navigation__item fd-navigation__item--child"
932
+ aria-level="1"
933
+ role="treeitem"
934
+ title="Past Orders"
935
+ aria-roledescription="Navigation List Menu Item - Child"
936
+ aria-expanded="false"
937
+ aria-selected="false"
938
+ >
939
+ <a class="fd-navigation__link" role="link" href="#">
940
+ <span class="fd-navigation__text">Past Orders</span>
941
+ <span
942
+ class="fd-navigation__selection-indicator"
943
+ role="presentation"
944
+ aria-hidden="true"
945
+ aria-label="selection indicator"
946
+ ></span>
947
+ </a>
948
+ </li>
949
+ <li class="fd-navigation__list-item" aria-hidden="true">
950
+ <div
951
+ class="fd-navigation__item fd-navigation__item--child"
952
+ aria-level="1"
953
+ role="treeitem"
954
+ title="Lost Orders"
955
+ aria-roledescription="Navigation List Menu Item - Child"
956
+ aria-expanded="false"
957
+ aria-selected="false"
958
+ >
959
+ <a class="fd-navigation__link" role="link" href="#">
960
+ <span class="fd-navigation__text">Lost Orders</span>
961
+ <span
962
+ class="fd-navigation__selection-indicator"
963
+ role="presentation"
964
+ aria-hidden="true"
965
+ aria-label="selection indicator"
966
+ ></span>
967
+ </a>
968
+ </li>
969
+ <li class="fd-navigation__list-item" aria-hidden="true">
970
+ <div
971
+ class="fd-navigation__item fd-navigation__item--child"
972
+ aria-level="1"
973
+ role="treeitem"
974
+ title="Forgotten Orders"
975
+ aria-roledescription="Navigation List Menu Item - Child"
976
+ aria-expanded="false"
977
+ aria-selected="false"
978
+ >
979
+ <a class="fd-navigation__link" role="link" href="#">
980
+ <span class="fd-navigation__text">Forgotten Orders (external link)</span>
981
+ <span
982
+ class="fd-navigation__selection-indicator"
983
+ role="presentation"
984
+ aria-hidden="true"
985
+ aria-label="selection indicator"
986
+ ></span>
987
+ <span
988
+ class="fd-navigation__external-link-indicator"
989
+ role="presentation"
990
+ aria-hidden="true"
991
+ aria-label="external link indicator"
992
+ ></span>
993
+ </a>
994
+ </li>
995
+ </ul>
996
+ </li>
997
+
998
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
999
+ <div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
1000
+ <a class="fd-navigation__link" role="link" href="#">
1001
+ <span
1002
+ class="fd-navigation__icon sap-icon--shield"
1003
+ role="presentation"
1004
+ aria-hidden="true"
1005
+ ></span>
1006
+ <span class="fd-navigation__text">Shield</span>
1007
+ <span
1008
+ class="fd-navigation__selection-indicator"
1009
+ role="presentation"
1010
+ aria-hidden="true"
1011
+ aria-label="selection indicator"
1012
+ ></span>
1013
+ </a>
1014
+ </div>
1015
+ </li>
1016
+
1017
+ <li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
1018
+ <div
1019
+ class="fd-navigation__item fd-navigation__item--with-expander"
1020
+ aria-current="false"
1021
+ aria-expanded="false"
1022
+ aria-selected="true"
1023
+ role="menuitem"
1024
+ >
1025
+ <a class="fd-navigation__link" role="link" href="#">
1026
+ <span
1027
+ class="fd-navigation__icon sap-icon--action-settings"
1028
+ role="presentation"
1029
+ aria-hidden="true"
1030
+ ></span>
1031
+ <span class="fd-navigation__text">Cog</span>
1032
+ <span
1033
+ class="fd-navigation__selection-indicator"
1034
+ role="presentation"
1035
+ aria-hidden="true"
1036
+ aria-label="selection indicator"
1037
+ ></span>
1038
+ </a>
1039
+ <span
1040
+ class="fd-navigation__has-children-indicator"
1041
+ role="button"
1042
+ aria-hidden="true"
1043
+ aria-label="Expand/Collapse"
1044
+ ></span>
1045
+ </li>
1046
+
1047
+ <li
1048
+ class="fd-navigation__list-item fd-navigation__list-item--spacer"
1049
+ role="presentation"
1050
+ aria-hidden="true"
1051
+ ></li>
1052
+
1053
+ <li
1054
+ role="none"
1055
+ tabindex="-1"
1056
+ class="fd-navigation__list-item fd-navigation__list-item--overflow"
1057
+ aria-hidden="true"
1058
+ >
1059
+ <div class="fd-navigation__item" aria-current="false" aria-expanded="true" role="menuitem">
1060
+ <a class="fd-navigation__link" role="button" tabindex="0">
1061
+ <span
1062
+ class="fd-navigation__icon sap-icon--overflow"
1063
+ role="presentation"
1064
+ aria-hidden="true"
1065
+ ></span>
1066
+ </a>
1067
+ </div>
1068
+ <div
1069
+ class="fd-navigation__list-container fd-navigation__list-container--menu fd-menu"
1070
+ aria-hidden="false"
1071
+ id="navMenuOverflow"
1072
+ >
1073
+ <div class="fd-navigation__list-wrapper">
1074
+ <ul
1075
+ class="fd-navigation__list fd-navigation__list--parent-items fd-menu__list"
1076
+ role="menu"
1077
+ aria-roledescription="Navigation List Tree"
1078
+ tabindex="-1"
1079
+ >
1080
+ <li class="fd-navigation__list-item" aria-hidden="true">
1081
+ <div
1082
+ class="fd-navigation__item fd-navigation__item--overflow"
1083
+ role="menuitem"
1084
+ aria-disabled="false"
1085
+ aria-posinset="1"
1086
+ aria-setsize="3"
1087
+ aria-haspopup="false"
1088
+ aria-labelledby="txt-1"
1089
+ aria-expanded="false"
1090
+ >
1091
+ <a class="fd-navigation__link" role="link" href="#">
1092
+ <span
1093
+ class="fd-navigation__icon sap-icon--notes"
1094
+ role="presentation"
1095
+ aria-hidden="true"
1096
+ ></span>
1097
+ <span class="fd-navigation__text" id="txt-1">Parent Item</span>
1098
+ <span class="fd-navigation__selection-indicator"></span>
1099
+ </a>
1100
+ </div>
1101
+ </li>
1102
+
1103
+ <li class="fd-navigation__list-item" aria-hidden="true">
1104
+ <div
1105
+ class="fd-navigation__item fd-navigation__item--overflow"
1106
+ role="menuitem"
1107
+ aria-disabled="false"
1108
+ aria-posinset="2"
1109
+ aria-setsize="3"
1110
+ aria-haspopup="menu"
1111
+ aria-labelledby="txt-2"
1112
+ aria-expanded="true"
1113
+ aria-owns="children-menu"
1114
+ >
1115
+ <a
1116
+ class="fd-navigation__link"
1117
+ role="button"
1118
+ tabindex="0"
1119
+ aria-controls="navPopover3"
1120
+ >
1121
+ <span
1122
+ class="fd-navigation__icon sap-icon--horizontal-bar-chart"
1123
+ role="presentation"
1124
+ aria-hidden="true"
1125
+ ></span>
1126
+ <span class="fd-navigation__text" id="txt-2">Parent Item</span>
1127
+ <span
1128
+ class="fd-navigation__selection-indicator"
1129
+ role="presentation"
1130
+ aria-hidden="true"
1131
+ aria-label="selection indicator"
1132
+ ></span>
1133
+ <span
1134
+ class="fd-navigation__has-children-indicator"
1135
+ role="presentation"
1136
+ aria-hidden="true"
1137
+ aria-label="has children indicator, expanded"
1138
+ ></span>
1139
+ </a>
1140
+ <div
1141
+ class="fd-navigation__list-container fd-navigation__list-container--submenu"
1142
+ aria-hidden="false"
1143
+ >
1144
+ <div class="fd-navigation__list-wrapper">
1145
+ <ul
1146
+ class="fd-navigation__list fd-navigation__list--child-items"
1147
+ id="children-menu"
1148
+ role="menu"
1149
+ aria-roledescription="Navigation List Tree - Children Items"
1150
+ tabindex="-1"
1151
+ >
1152
+ <li class="fd-navigation__list-item" aria-hidden="true">
1153
+ <div
1154
+ class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
1155
+ aria-labelledby="txt-child-1"
1156
+ role="menuitem"
1157
+ aria-posinset="1"
1158
+ aria-setsize="3"
1159
+ aria-disabled="false"
1160
+ aria-selected="false"
1161
+ >
1162
+ <a class="fd-navigation__link" role="link" href="#">
1163
+ <span class="fd-navigation__text" id="txt-child-1"
1164
+ >Child Item</span
1165
+ >
1166
+ <span class="fd-navigation__selection-indicator"></span>
1167
+ </a>
1168
+ </div>
1169
+ </li>
1170
+ <li class="fd-navigation__list-item" aria-hidden="true">
1171
+ <div
1172
+ class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
1173
+ aria-labelledby="txt-child-2"
1174
+ role="menuitem"
1175
+ aria-posinset="2"
1176
+ aria-setsize="3"
1177
+ aria-disabled="false"
1178
+ aria-selected="false"
1179
+ >
1180
+ <a class="fd-navigation__link" role="link" href="#">
1181
+ <span class="fd-navigation__text" id="txt-child-2"
1182
+ >Child Item</span
1183
+ >
1184
+ <span class="fd-navigation__selection-indicator"></span>
1185
+ </a>
1186
+ </li>
1187
+ <li class="fd-navigation__list-item" aria-hidden="true">
1188
+ <div
1189
+ class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
1190
+ aria-labelledby="txt-child-3"
1191
+ role="menuitem"
1192
+ aria-posinset="3"
1193
+ aria-setsize="3"
1194
+ aria-disabled="false"
1195
+ aria-selected="true"
1196
+ >
1197
+ <a class="fd-navigation__link" role="link" href="#">
1198
+ <span class="fd-navigation__text" id="txt-child-3"
1199
+ >Child Item</span
1200
+ >
1201
+ <span class="fd-navigation__selection-indicator"></span>
1202
+ </a>
1203
+ </li>
1204
+ </ul>
1205
+ </li>
1206
+
1207
+ <li class="fd-navigation__list-item" aria-hidden="true">
1208
+ <div
1209
+ class="fd-navigation__item fd-navigation__item--overflow"
1210
+ role="menuitem"
1211
+ aria-disabled="false"
1212
+ aria-posinset="3"
1213
+ aria-setsize="3"
1214
+ aria-haspopup="false"
1215
+ aria-labelledby="txt-3"
1216
+ aria-expanded="false"
1217
+ >
1218
+ <a class="fd-navigation__link" role="link" href="#">
1219
+ <span
1220
+ class="fd-navigation__icon sap-icon--notes"
1221
+ role="presentation"
1222
+ aria-hidden="true"
1223
+ ></span>
1224
+ <span class="fd-navigation__text" id="txt-3">Parent Item</span>
1225
+ <span class="fd-navigation__selection-indicator"></span>
1226
+ </a>
1227
+ </li>
1228
+ </ul>
1229
+ </li>
1230
+ </ul>
1231
+ </nav>
1232
+ ```
1233
+
1234
+ ## Accessibility
1235
+
1236
+ - Use semantic HTML elements where appropriate
1237
+ - Include proper ARIA attributes for interactive elements
1238
+ - Ensure keyboard navigation support
1239
+ - Provide adequate color contrast
1240
+
1241
+ ## Source
1242
+
1243
+ This documentation was automatically generated from: `packages/styles/stories/BTP/Navigation/horizontal/navigation-horizontal.stories.js`
1244
+
1245
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).