@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/input-group.md ADDED
@@ -0,0 +1,2068 @@
1
+ ---
2
+ component: fd-input-group
3
+ title: Components/Cx Side Navigation
4
+ category: Components
5
+ selector: fd-input-group
6
+ cssFile: input-group.css
7
+ sourcePath: packages/cx/stories/Components/cx-side-navigation/cx-side-navigation.stories.js
8
+ tags: ["cx","theme"]
9
+ dependencies: ["side-nav"]
10
+ relatedComponents: ["side-nav"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.607Z
13
+ ---
14
+
15
+ # Components/Cx Side Navigation
16
+
17
+ The Side Navigation can display structures of up to three levels.
18
+ <br><br>In the <code>Wide</code> variant:
19
+ - The first levels always shows an icon
20
+ - If first-level items have children, they show the expand/collapse arrows
21
+ - Second level items do not display an icon and are not indented
22
+ - If second-level items have children, they show the expand/collapse arrows
23
+ - Third level items do not display an icon and are indented by 2 rem (32px)
24
+
25
+ <br>
26
+ In the <code>Narrow</code> variant:
27
+ - The first levels always shows an icon
28
+ - If first-level items have children, they show the expand/collapse arrows
29
+ - If first-level items have children, and they are clicked, the popover displays the First-level item in bold letters, then the second level items in regular.
30
+ - Second level items do not display an icon and are not indented
31
+ - If second-level items have children, they show the expand/collapse arrows
32
+ - Third level items do not display an icon and are indented by 2 rem (32px)
33
+
34
+ ## Dependencies
35
+
36
+ This component depends on the following CSS files:
37
+
38
+ - `side-nav.css`
39
+
40
+ ## Installation
41
+
42
+ ```bash
43
+ npm install fundamental-styles
44
+ ```
45
+
46
+ ```html
47
+ <!-- Include theme -->
48
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
49
+
50
+ <!-- Include component CSS -->
51
+ <link href="node_modules/fundamental-styles/dist/input-group.css" rel="stylesheet">
52
+
53
+ <!-- Include dependencies -->
54
+ <link href="node_modules/fundamental-styles/dist/side-nav.css" rel="stylesheet">
55
+ ```
56
+
57
+ ## Basic Usage
58
+
59
+ ```html
60
+ <div class="fdx-side-nav">
61
+ <nav class="fdx-side-nav__main-navigation" aria-label="Main Menu">
62
+ <ul class="fdx-nested-list level-1">
63
+ <li class="fdx-nested-list__item">
64
+ <a class="fdx-nested-list__link" href="#">
65
+ <div class="fdx-nested-list__link-container">
66
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
67
+ <span class="fdx-nested-list__title">Home</span>
68
+ </div>
69
+ </a>
70
+ </li>
71
+ <li class="fdx-nested-list__item">
72
+ <a class="fdx-nested-list__link is-selected" href="#">
73
+ <div class="fdx-nested-list__link-container">
74
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--unfavorite"></i>
75
+ <span class="fdx-nested-list__title">Favorites</span>
76
+ </div>
77
+ </a>
78
+ </li>
79
+ <li class="fdx-nested-list__item">
80
+ <a class="fdx-nested-list__link" href="#">
81
+ <div class="fdx-nested-list__link-container">
82
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--account"></i>
83
+ <span class="fdx-nested-list__title">Customer Management</span>
84
+ </div>
85
+ </a>
86
+ </li>
87
+ <li class="fdx-nested-list__item">
88
+ <a class="fdx-nested-list__link" href="#">
89
+ <div class="fdx-nested-list__link-container">
90
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--crm-sales"></i>
91
+ <span class="fdx-nested-list__title">Sales</span>
92
+ </div>
93
+ </a>
94
+ </li>
95
+ <li class="fdx-nested-list__item">
96
+ <a class="fdx-nested-list__link" href="#">
97
+ <div class="fdx-nested-list__link-container">
98
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--customer-view"></i>
99
+ <span class="fdx-nested-list__title">Products</span>
100
+ </div>
101
+ </a>
102
+ </li>
103
+ <li class="fdx-nested-list__item">
104
+ <a class="fdx-nested-list__link" href="#">
105
+ <div class="fdx-nested-list__link-container">
106
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--marketing-campaign"></i>
107
+ <span class="fdx-nested-list__title">Marketing</span>
108
+ </div>
109
+ </a>
110
+ </li>
111
+ <li class="fdx-nested-list__item">
112
+ <a class="fdx-nested-list__link" href="#">
113
+ <div class="fdx-nested-list__link-container">
114
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--manager-insight"></i>
115
+ <span class="fdx-nested-list__title">Reports</span>
116
+ </div>
117
+ </a>
118
+ </li>
119
+ <li class="fdx-nested-list__item">
120
+ <a class="fdx-nested-list__link" href="#">
121
+ <div class="fdx-nested-list__link-container">
122
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--official-service"></i>
123
+ <span class="fdx-nested-list__title">Manufacturing</span>
124
+ </div>
125
+ </a>
126
+ </li>
127
+ <li class="fdx-nested-list__item">
128
+ <a class="fdx-nested-list__link" href="#">
129
+ <div class="fdx-nested-list__link-container">
130
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--lead"></i>
131
+ <span class="fdx-nested-list__title">Cost</span>
132
+ </div>
133
+ </a>
134
+ </li>
135
+ <li class="fdx-nested-list__item">
136
+ <a class="fdx-nested-list__link" href="#">
137
+ <div class="fdx-nested-list__link-container">
138
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--sys-help"></i>
139
+ <span class="fdx-nested-list__title">Help</span>
140
+ </div>
141
+ </a>
142
+ </li>
143
+ <li class="fdx-nested-list__item">
144
+ <a class="fdx-nested-list__link" href="#">
145
+ <div class="fdx-nested-list__link-container">
146
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--customer-financial-fact-sheet"></i>
147
+ <span class="fdx-nested-list__title">Finance</span>
148
+ </div>
149
+ </a>
150
+ </li>
151
+ </ul>
152
+ </nav>
153
+ <nav class="fdx-side-nav__utility" aria-label="Utility Menu">
154
+ <ul class="fdx-nested-list level-1">
155
+ <li class="fdx-nested-list__item fdx-nested-list__item--quick-create">
156
+ <a class="fdx-nested-list__link" href="#">
157
+ <div class="fdx-nested-list__link-container">
158
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--add"></i>
159
+ <span class="fdx-nested-list__title">Quick Create</span>
160
+ </div>
161
+ </a>
162
+ </li>
163
+ <li class="fdx-nested-list__item">
164
+ <a class="fdx-nested-list__link" href="#">
165
+ <div class="fdx-nested-list__link-container">
166
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
167
+ <span class="fdx-nested-list__title">Product Settings</span>
168
+ </div>
169
+ </a>
170
+ </li>
171
+ </ul>
172
+ </nav>
173
+ </div>
174
+ ```
175
+
176
+ ## States
177
+
178
+ | Class | Description |
179
+ |-------|-------------|
180
+ | `is-selected` | Selected state |
181
+
182
+ ## BEM Elements
183
+
184
+ This component uses the following BEM elements:
185
+
186
+ - `fd-input-group__addon`
187
+ - `fd-input-group__addon--button`
188
+ - `fd-input-group__button`
189
+ - `fd-input-group__input`
190
+
191
+ ## Related Components
192
+
193
+ This component works with or depends on:
194
+
195
+ - `side-nav`
196
+
197
+ ## Examples
198
+
199
+ ### Cosy Wide With Icon, 1 Level
200
+
201
+ ```html
202
+ <div class="fdx-side-nav">
203
+ <nav class="fdx-side-nav__main-navigation" aria-label="Main Menu">
204
+ <ul class="fdx-nested-list level-1">
205
+ <li class="fdx-nested-list__item">
206
+ <a class="fdx-nested-list__link" href="#">
207
+ <div class="fdx-nested-list__link-container">
208
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
209
+ <span class="fdx-nested-list__title">Home</span>
210
+ </div>
211
+ </a>
212
+ </li>
213
+ <li class="fdx-nested-list__item">
214
+ <a class="fdx-nested-list__link is-selected" href="#">
215
+ <div class="fdx-nested-list__link-container">
216
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--unfavorite"></i>
217
+ <span class="fdx-nested-list__title">Favorites</span>
218
+ </div>
219
+ </a>
220
+ </li>
221
+ <li class="fdx-nested-list__item">
222
+ <a class="fdx-nested-list__link" href="#">
223
+ <div class="fdx-nested-list__link-container">
224
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--account"></i>
225
+ <span class="fdx-nested-list__title">Customer Management</span>
226
+ </div>
227
+ </a>
228
+ </li>
229
+ <li class="fdx-nested-list__item">
230
+ <a class="fdx-nested-list__link" href="#">
231
+ <div class="fdx-nested-list__link-container">
232
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--crm-sales"></i>
233
+ <span class="fdx-nested-list__title">Sales</span>
234
+ </div>
235
+ </a>
236
+ </li>
237
+ <li class="fdx-nested-list__item">
238
+ <a class="fdx-nested-list__link" href="#">
239
+ <div class="fdx-nested-list__link-container">
240
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--customer-view"></i>
241
+ <span class="fdx-nested-list__title">Products</span>
242
+ </div>
243
+ </a>
244
+ </li>
245
+ <li class="fdx-nested-list__item">
246
+ <a class="fdx-nested-list__link" href="#">
247
+ <div class="fdx-nested-list__link-container">
248
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--marketing-campaign"></i>
249
+ <span class="fdx-nested-list__title">Marketing</span>
250
+ </div>
251
+ </a>
252
+ </li>
253
+ <li class="fdx-nested-list__item">
254
+ <a class="fdx-nested-list__link" href="#">
255
+ <div class="fdx-nested-list__link-container">
256
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--manager-insight"></i>
257
+ <span class="fdx-nested-list__title">Reports</span>
258
+ </div>
259
+ </a>
260
+ </li>
261
+ <li class="fdx-nested-list__item">
262
+ <a class="fdx-nested-list__link" href="#">
263
+ <div class="fdx-nested-list__link-container">
264
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--official-service"></i>
265
+ <span class="fdx-nested-list__title">Manufacturing</span>
266
+ </div>
267
+ </a>
268
+ </li>
269
+ <li class="fdx-nested-list__item">
270
+ <a class="fdx-nested-list__link" href="#">
271
+ <div class="fdx-nested-list__link-container">
272
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--lead"></i>
273
+ <span class="fdx-nested-list__title">Cost</span>
274
+ </div>
275
+ </a>
276
+ </li>
277
+ <li class="fdx-nested-list__item">
278
+ <a class="fdx-nested-list__link" href="#">
279
+ <div class="fdx-nested-list__link-container">
280
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--sys-help"></i>
281
+ <span class="fdx-nested-list__title">Help</span>
282
+ </div>
283
+ </a>
284
+ </li>
285
+ <li class="fdx-nested-list__item">
286
+ <a class="fdx-nested-list__link" href="#">
287
+ <div class="fdx-nested-list__link-container">
288
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--customer-financial-fact-sheet"></i>
289
+ <span class="fdx-nested-list__title">Finance</span>
290
+ </div>
291
+ </a>
292
+ </li>
293
+ </ul>
294
+ </nav>
295
+ <nav class="fdx-side-nav__utility" aria-label="Utility Menu">
296
+ <ul class="fdx-nested-list level-1">
297
+ <li class="fdx-nested-list__item fdx-nested-list__item--quick-create">
298
+ <a class="fdx-nested-list__link" href="#">
299
+ <div class="fdx-nested-list__link-container">
300
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--add"></i>
301
+ <span class="fdx-nested-list__title">Quick Create</span>
302
+ </div>
303
+ </a>
304
+ </li>
305
+ <li class="fdx-nested-list__item">
306
+ <a class="fdx-nested-list__link" href="#">
307
+ <div class="fdx-nested-list__link-container">
308
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
309
+ <span class="fdx-nested-list__title">Product Settings</span>
310
+ </div>
311
+ </a>
312
+ </li>
313
+ </ul>
314
+ </nav>
315
+ </div>
316
+ ```
317
+
318
+ ### Cosy Wide Text Only, 1 Level
319
+
320
+ <b>Important: </b>This type of Side Navigation does not have <code>Narrow</code> variant.
321
+
322
+ ```html
323
+ <div class="fdx-side-nav">
324
+ <nav class="fdx-side-nav__main-navigation" aria-label="Main Menu">
325
+ <ul class="fdx-nested-list fdx-nested-list--text-only level-1" aria-label="Main Menu">
326
+ <li class="fdx-nested-list__item">
327
+ <a class="fdx-nested-list__link" href="#">
328
+ <div class="fdx-nested-list__link-container">
329
+ <span class="fdx-nested-list__title">Level 1 Item</span>
330
+ </div>
331
+ </a>
332
+ </li>
333
+ <li class="fdx-nested-list__item">
334
+ <a class="fdx-nested-list__link is-selected" href="#">
335
+ <div class="fdx-nested-list__link-container">
336
+ <span class="fdx-nested-list__title">Level 1 Item</span>
337
+ </div>
338
+ </a>
339
+ </li>
340
+ <li class="fdx-nested-list__item">
341
+ <a class="fdx-nested-list__link" href="#">
342
+ <div class="fdx-nested-list__link-container">
343
+ <span class="fdx-nested-list__title">Level 1 Item</span>
344
+ </div>
345
+ </a>
346
+ </li>
347
+ <li class="fdx-nested-list__item">
348
+ <a class="fdx-nested-list__link" href="#">
349
+ <div class="fdx-nested-list__link-container">
350
+ <span class="fdx-nested-list__title">Level 1 Item</span>
351
+ </div>
352
+ </a>
353
+ </li>
354
+ <li class="fdx-nested-list__item">
355
+ <a class="fdx-nested-list__link" href="#">
356
+ <div class="fdx-nested-list__link-container">
357
+ <span class="fdx-nested-list__title">Level 1 Item</span>
358
+ </div>
359
+ </a>
360
+ </li>
361
+
362
+ </ul>
363
+ </nav>
364
+ <nav class="fdx-side-nav__utility" aria-label="Utility Menu">
365
+ <ul class="fdx-nested-list fdx-nested-list--text-only level-1" aria-label="Utility Menu">
366
+ <li class="fdx-nested-list__item">
367
+ <a class="fdx-nested-list__link" href="#">
368
+ <div class="fdx-nested-list__link-container">
369
+ <span class="fdx-nested-list__title">Level 1 Item</span>
370
+ </div>
371
+ </a>
372
+ </li>
373
+ <li class="fdx-nested-list__item">
374
+ <a class="fdx-nested-list__link" href="#">
375
+ <div class="fdx-nested-list__link-container">
376
+ <span class="fdx-nested-list__title">Level 1 Item</span>
377
+ </div>
378
+ </a>
379
+ </li>
380
+ </ul>
381
+ </nav>
382
+ </div>
383
+ ```
384
+
385
+ ### Cosy Narrow Popover with Dynamic Width
386
+
387
+ Side Navigation can react dynamically to long label texts in navigational items. In such case the width of the Side Navigation is adapted by the longest label. The label does not wrap or truncate. Use the modifier class <code>.fdx-side-nav--dynamic-width</code> for Side Navigation with dynamic width.
388
+
389
+ ```html
390
+ <div class="fdx-side-nav fdx-side-nav--dynamic-width">
391
+ <nav class="fdx-side-nav__main-navigation fd-scrollbar" aria-label="Main Menu">
392
+ <ul class="fdx-nested-list level-1">
393
+ <li class="fdx-nested-list__item">
394
+ <a class="fdx-nested-list__link" href="#">
395
+ <div class="fdx-nested-list__link-container">
396
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
397
+ <span class="fdx-nested-list__title">Overview</span>
398
+ </div>
399
+ </a>
400
+ </li>
401
+ <li class="fdx-nested-list__item">
402
+ <a class="fdx-nested-list__link is-selected" href="#">
403
+ <div class="fdx-nested-list__link-container">
404
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--calendar"></i>
405
+ <span class="fdx-nested-list__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
406
+ </div>
407
+ </a>
408
+ </li>
409
+ <li class="fdx-nested-list__item">
410
+ <a class="fdx-nested-list__link" href="#">
411
+ <div class="fdx-nested-list__link-container">
412
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--employee"></i>
413
+ <span class="fdx-nested-list__title">Sed do eiusmod tempor incididunt ut labore</span>
414
+ </div>
415
+ </a>
416
+ </li>
417
+ <li class="fdx-nested-list__item">
418
+ <a class="fdx-nested-list__link" href="#">
419
+ <div class="fdx-nested-list__link-container">
420
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
421
+ <span class="fdx-nested-list__title">Nemo enim ipsam</span>
422
+ </div>
423
+ </a>
424
+ </li>
425
+ <li class="fdx-nested-list__item">
426
+ <a class="fdx-nested-list__link" href="#">
427
+ <div class="fdx-nested-list__link-container">
428
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--lightbulb"></i>
429
+ <span class="fdx-nested-list__title">Neque porro quisquam est, qui dolorem ipsum</span>
430
+ </div>
431
+ </a>
432
+ </li>
433
+ <li class="fdx-nested-list__item">
434
+ <a class="fdx-nested-list__link" href="#">
435
+ <div class="fdx-nested-list__link-container">
436
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--history"></i>
437
+ <span class="fdx-nested-list__title">Quis autem vel eum iure</span>
438
+ </div>
439
+ </a>
440
+ </li>
441
+ <li class="fdx-nested-list__item">
442
+ <a class="fdx-nested-list__link" href="#">
443
+ <div class="fdx-nested-list__link-container">
444
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--future"></i>
445
+ <span class="fdx-nested-list__title">Excepteur sint occaecat cupidatat</span>
446
+ </div>
447
+ </a>
448
+ </li>
449
+ <li class="fdx-nested-list__item">
450
+ <a class="fdx-nested-list__link" href="#">
451
+ <div class="fdx-nested-list__link-container">
452
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
453
+ <span class="fdx-nested-list__title">Ut enim ad minima veniam</span>
454
+ </div>
455
+ </a>
456
+ </li>
457
+ <li class="fdx-nested-list__item">
458
+ <a class="fdx-nested-list__link" href="#">
459
+ <div class="fdx-nested-list__link-container">
460
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--lead"></i>
461
+ <span class="fdx-nested-list__title">Neque porro quisquam</span>
462
+ </div>
463
+ </a>
464
+ </li>
465
+ <li class="fdx-nested-list__item">
466
+ <a class="fdx-nested-list__link" href="#">
467
+ <div class="fdx-nested-list__link-container">
468
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--notes"></i>
469
+ <span class="fdx-nested-list__title">Excepteur sint occaecat cupidatat</span>
470
+ </div>
471
+ </a>
472
+ </li>
473
+ <li class="fdx-nested-list__item">
474
+ <a class="fdx-nested-list__link" href="#">
475
+ <div class="fdx-nested-list__link-container">
476
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--map"></i>
477
+ <span class="fdx-nested-list__title">Neque porro quisquam</span>
478
+ </div>
479
+ </a>
480
+ </li>
481
+ <li class="fdx-nested-list__item">
482
+ <a class="fdx-nested-list__link" href="#">
483
+ <div class="fdx-nested-list__link-container">
484
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--log"></i>
485
+ <span class="fdx-nested-list__title">Ut enim ad minima veniam</span>
486
+ </div>
487
+ </a>
488
+ </li>
489
+ <li class="fdx-nested-list__item">
490
+ <a class="fdx-nested-list__link" href="#">
491
+ <div class="fdx-nested-list__link-container">
492
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--phone"></i>
493
+ <span class="fdx-nested-list__title">Excepteur sint occaecat cupidatat</span>
494
+ </div>
495
+ </a>
496
+ </li>
497
+ <li class="fdx-nested-list__item">
498
+ <a class="fdx-nested-list__link" href="#">
499
+ <div class="fdx-nested-list__link-container">
500
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--product"></i>
501
+ <span class="fdx-nested-list__title">Ut enim ad minima veniam</span>
502
+ </div>
503
+ </a>
504
+ </li>
505
+ </ul>
506
+ </nav>
507
+ <nav class="fdx-side-nav__utility" aria-label="Utility Menu">
508
+ <ul class="fdx-nested-list level-1">
509
+ <li class="fdx-nested-list__item">
510
+ <a class="fdx-nested-list__link" href="#">
511
+ <div class="fdx-nested-list__link-container">
512
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--compare"></i>
513
+ <span class="fdx-nested-list__title">Duis aute irure dolor </span>
514
+ </div>
515
+ </a>
516
+ </li>
517
+ <li class="fdx-nested-list__item">
518
+ <a class="fdx-nested-list__link" href="#">
519
+ <div class="fdx-nested-list__link-container">
520
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
521
+ <span class="fdx-nested-list__title">Neque porro quisquam</span>
522
+ </div>
523
+ </a>
524
+ </li>
525
+ </ul>
526
+ </nav>
527
+ </div>
528
+ ```
529
+
530
+ ### Cosy Wide Text Only, 3 Levels
531
+
532
+ <b>Important: </b>This type of Side Navigation does not have <code>Narrow</code> variant.
533
+
534
+ ```html
535
+ <div class="fdx-side-nav">
536
+ <nav class="fdx-side-nav__main-navigation" aria-label="Main Menu">
537
+ <ul class="fdx-nested-list fdx-nested-list--text-only level-1">
538
+ <li class="fdx-nested-list__item">
539
+ <a class="fdx-nested-list__link" href="#">
540
+ <div class="fdx-nested-list__link-container">
541
+ <span class="fdx-nested-list__title">Level 1 Item</span>
542
+ </div>
543
+ </a>
544
+ </li>
545
+ <li class="fdx-nested-list__item">
546
+ <a class="fdx-nested-list__link" href="#">
547
+ <div class="fdx-nested-list__link-container">
548
+ <span class="fdx-nested-list__title">Level 1 Item</span>
549
+ </div>
550
+ </a>
551
+ </li>
552
+ <li class="fdx-nested-list__item">
553
+ <button class="fdx-nested-list__link" aria-expanded="true" aria-label="Expand Level 2">
554
+ <div class="fdx-nested-list__link-container">
555
+ <span class="fdx-nested-list__title">Level 1 Item</span>
556
+ <i class="fdx-nested-list__arrow sap-icon--navigation-down-arrow" role="presentation"></i>
557
+ </div>
558
+ </button>
559
+ <ul class="fdx-nested-list level-2" aria-hidden="false">
560
+ <li class="fdx-nested-list__item">
561
+ <button class="fdx-nested-list__link is-selected" aria-expanded="true" aria-label="Expand Level 3">
562
+ <div class="fdx-nested-list__link-container">
563
+ <span class="fdx-nested-list__title">Level 2 Item</span>
564
+ <i class="fdx-nested-list__arrow sap-icon--navigation-down-arrow" role="presentation"></i>
565
+ </div>
566
+ </button>
567
+ <ul class="fdx-nested-list level-3" aria-hidden="false">
568
+ <li class="fdx-nested-list__item">
569
+ <a class="fdx-nested-list__link" href="#">
570
+ <div class="fdx-nested-list__link-container">
571
+ <span class="fdx-nested-list__title">Level 3 Item</span>
572
+ </div>
573
+ </a>
574
+ </li>
575
+ <li class="fdx-nested-list__item">
576
+ <a class="fdx-nested-list__link" href="#">
577
+ <div class="fdx-nested-list__link-container">
578
+ <span class="fdx-nested-list__title">Level 3 Item</span>
579
+ </div>
580
+ </a>
581
+ </li>
582
+ <li class="fdx-nested-list__item">
583
+ <a class="fdx-nested-list__link is-selected" href="#">
584
+ <div class="fdx-nested-list__link-container">
585
+ <span class="fdx-nested-list__title">Level 3 Item</span>
586
+ </div>
587
+ </a>
588
+ </li>
589
+ </ul>
590
+ </li>
591
+ <li class="fdx-nested-list__item">
592
+ <a class="fdx-nested-list__link" href="#">
593
+ <div class="fdx-nested-list__link-container">
594
+ <span class="fdx-nested-list__title">Level 2 Item</span>
595
+ </div>
596
+ </a>
597
+ </li>
598
+ <li class="fdx-nested-list__item">
599
+ <a class="fdx-nested-list__link" href="#">
600
+ <div class="fdx-nested-list__link-container">
601
+ <span class="fdx-nested-list__title">Level 3 Item</span>
602
+ </div>
603
+ </a>
604
+ </li>
605
+ </ul>
606
+ </li>
607
+ <li class="fdx-nested-list__item">
608
+ <a class="fdx-nested-list__link" href="#">
609
+ <div class="fdx-nested-list__link-container">
610
+ <span class="fdx-nested-list__title">Level 1 Item</span>
611
+ </div>
612
+ </a>
613
+ </li>
614
+ <li class="fdx-nested-list__item">
615
+ <a class="fdx-nested-list__link" href="#">
616
+ <div class="fdx-nested-list__link-container">
617
+ <span class="fdx-nested-list__title">Level 1 Item</span>
618
+ </div>
619
+ </a>
620
+ </li>
621
+ </ul>
622
+ </nav>
623
+ <nav class="fdx-side-nav__utility" aria-label="Utility Menu">
624
+ <ul class="fdx-nested-list fdx-nested-list--text-only level-1" aria-label="Utility Menu">
625
+ <li class="fdx-nested-list__item">
626
+ <a class="fdx-nested-list__link" href="#">
627
+ <div class="fdx-nested-list__link-container">
628
+ <span class="fdx-nested-list__title">Level 1 Item</span>
629
+ </div>
630
+ </a>
631
+ </li>
632
+ <li class="fdx-nested-list__item">
633
+ <a class="fdx-nested-list__link" href="#">
634
+ <div class="fdx-nested-list__link-container">
635
+ <span class="fdx-nested-list__title">Level 1 Item</span>
636
+ </div>
637
+ </a>
638
+ </li>
639
+ </ul>
640
+ </nav>
641
+ </div>
642
+ ```
643
+
644
+ ### Cosy Wide With Icons, 3 Levels, Collapse Only
645
+
646
+ ```html
647
+ <div class="fdx-side-nav">
648
+ <nav class="fdx-side-nav__main-navigation" aria-label="Main Menu">
649
+ <ul class="fdx-nested-list level-1" aria-labelledby="EX400H1">
650
+ <li class="fdx-nested-list__item">
651
+ <a class="fdx-nested-list__link" href="#">
652
+ <div class="fdx-nested-list__link-container">
653
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
654
+ <span class="fdx-nested-list__title">Level 1 Item</span>
655
+ </div>
656
+ </a>
657
+ </li>
658
+ <li class="fdx-nested-list__item">
659
+ <a class="fdx-nested-list__link" href="#">
660
+ <div class="fdx-nested-list__link-container">
661
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--map"></i>
662
+ <span class="fdx-nested-list__title">Level 1 Item</span>
663
+ </div>
664
+ </a>
665
+ </li>
666
+ <li class="fdx-nested-list__item">
667
+ <button class="fdx-nested-list__link" aria-expanded="true" aria-label="Expand Level 2">
668
+ <div class="fdx-nested-list__link-container">
669
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--calendar"></i>
670
+ <span class="fdx-nested-list__title">Level 1 Item</span>
671
+ <i class="fdx-nested-list__arrow sap-icon--navigation-down-arrow" role="presentation"></i>
672
+ </div>
673
+ </button>
674
+ <ul class="fdx-nested-list level-2" aria-hidden="false">
675
+ <li class="fdx-nested-list__item">
676
+ <button class="fdx-nested-list__link is-selected" aria-expanded="true" aria-label="Expand Level 3">
677
+ <div class="fdx-nested-list__link-container">
678
+ <span class="fdx-nested-list__title">Level 2 Item</span>
679
+ <i class="fdx-nested-list__arrow sap-icon--navigation-down-arrow" role="presentation"></i>
680
+ </div>
681
+ </button>
682
+ <ul class="fdx-nested-list level-3" aria-hidden="false">
683
+ <li class="fdx-nested-list__item">
684
+ <a class="fdx-nested-list__link" href="#">
685
+ <div class="fdx-nested-list__link-container">
686
+ <span class="fdx-nested-list__title">Level 3 Item</span>
687
+ </div>
688
+ </a>
689
+ </li>
690
+ <li class="fdx-nested-list__item">
691
+ <a class="fdx-nested-list__link is-selected" href="#">
692
+ <div class="fdx-nested-list__link-container">
693
+ <span class="fdx-nested-list__title">Level 3 Item</span>
694
+ </div>
695
+ </a>
696
+ </li>
697
+ <li class="fdx-nested-list__item">
698
+ <a class="fdx-nested-list__link" href="#">
699
+ <div class="fdx-nested-list__link-container">
700
+ <span class="fdx-nested-list__title">Level 3 Item</span>
701
+ </div>
702
+ </a>
703
+ </li>
704
+ </ul>
705
+ </li>
706
+ <li class="fdx-nested-list__item">
707
+ <a class="fdx-nested-list__link" href="#">
708
+ <div class="fdx-nested-list__link-container">
709
+ <span class="fdx-nested-list__title">Level 2 Item</span>
710
+ </div>
711
+ </a>
712
+ </li>
713
+ <li class="fdx-nested-list__item">
714
+ <a class="fdx-nested-list__link" href="#">
715
+ <div class="fdx-nested-list__link-container">
716
+ <span class="fdx-nested-list__title">Level 2 Item</span>
717
+ </div>
718
+ </a>
719
+ </li>
720
+ </ul>
721
+ </li>
722
+ <li class="fdx-nested-list__item">
723
+ <a class="fdx-nested-list__link" href="#">
724
+ <div class="fdx-nested-list__link-container">
725
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
726
+ <span class="fdx-nested-list__title">Level 1 Item</span>
727
+ </div>
728
+ </a>
729
+ </li>
730
+ </ul>
731
+ </nav>
732
+ <nav class="fdx-side-nav__utility" aria-label="Utility Menu">
733
+ <ul class="fdx-nested-list level-1" aria-label="Utility Menu">
734
+ <li class="fdx-nested-list__item">
735
+ <a class="fdx-nested-list__link" href="#">
736
+ <div class="fdx-nested-list__link-container">
737
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--compare"></i>
738
+ <span class="fdx-nested-list__title">Level 1 Item</span>
739
+ </div>
740
+ </a>
741
+ </li>
742
+ <li class="fdx-nested-list__item">
743
+ <a class="fdx-nested-list__link" href="#">
744
+ <div class="fdx-nested-list__link-container">
745
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
746
+ <span class="fdx-nested-list__title">Level 1 Item</span>
747
+ </div>
748
+ </a>
749
+ </li>
750
+ </ul>
751
+ </nav>
752
+ </div>
753
+ ```
754
+
755
+ ### Cosy Wide With Icons, 3 Levels, Navigation and Collapse
756
+
757
+ ```html
758
+ <div class="fdx-side-nav">
759
+ <nav class="fdx-side-nav__main-navigation" aria-label="Main Menu">
760
+ <ul class="fdx-nested-list level-1" aria-labelledby="EX400H1">
761
+ <li class="fdx-nested-list__item">
762
+ <a class="fdx-nested-list__link" href="#">
763
+ <div class="fdx-nested-list__link-container">
764
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
765
+ <span class="fdx-nested-list__title">Level 1 Item</span>
766
+ </div>
767
+ </a>
768
+ </li>
769
+ <li class="fdx-nested-list__item">
770
+ <a class="fdx-nested-list__link" href="#">
771
+ <div class="fdx-nested-list__link-container">
772
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--map"></i>
773
+ <span class="fdx-nested-list__title">Level 1 Item</span>
774
+ </div>
775
+ </a>
776
+ </li>
777
+ <li class="fdx-nested-list__item">
778
+ <div class="fdx-nested-list__link" aria-expanded="true" aria-label="Expand Level 2">
779
+ <a class="fdx-nested-list__link-container" href="#">
780
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--calendar"></i>
781
+ <span class="fdx-nested-list__title">Level 1 Item</span>
782
+ </a>
783
+ <button class="fdx-nested-list__button">
784
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
785
+ </button>
786
+ </div>
787
+ <ul class="fdx-nested-list level-2" aria-hidden="false">
788
+ <li class="fdx-nested-list__item">
789
+ <div class="fdx-nested-list__link is-selected" aria-expanded="true" aria-label="Expand Level 3">
790
+ <a class="fdx-nested-list__link-container" href="#">
791
+ <span class="fdx-nested-list__title">Level 2 Item</span>
792
+ </a>
793
+ <button class="fdx-nested-list__button">
794
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
795
+ </button>
796
+ </div>
797
+ <ul class="fdx-nested-list level-3" aria-hidden="false">
798
+ <li class="fdx-nested-list__item">
799
+ <a class="fdx-nested-list__link" href="#">
800
+ <div class="fdx-nested-list__link-container">
801
+ <span class="fdx-nested-list__title">Level 3 Item</span>
802
+ </div>
803
+ </a>
804
+ </li>
805
+ <li class="fdx-nested-list__item">
806
+ <a class="fdx-nested-list__link is-selected" href="#">
807
+ <div class="fdx-nested-list__link-container">
808
+ <span class="fdx-nested-list__title">Level 3 Item</span>
809
+ </div>
810
+ </a>
811
+ </li>
812
+ <li class="fdx-nested-list__item">
813
+ <a class="fdx-nested-list__link" href="#">
814
+ <div class="fdx-nested-list__link-container">
815
+ <span class="fdx-nested-list__title">Level 3 Item</span>
816
+ </div>
817
+ </a>
818
+ </li>
819
+ </ul>
820
+ </li>
821
+ <li class="fdx-nested-list__item">
822
+ <a class="fdx-nested-list__link" href="#">
823
+ <div class="fdx-nested-list__link-container">
824
+ <span class="fdx-nested-list__title">Level 2 Item</span>
825
+ </div>
826
+ </a>
827
+ </li>
828
+ <li class="fdx-nested-list__item">
829
+ <a class="fdx-nested-list__link" href="#">
830
+ <div class="fdx-nested-list__link-container">
831
+ <span class="fdx-nested-list__title">Level 2 Item</span>
832
+ </div>
833
+ </a>
834
+ </li>
835
+ </ul>
836
+ </li>
837
+ <li class="fdx-nested-list__item">
838
+ <a class="fdx-nested-list__link" href="#">
839
+ <div class="fdx-nested-list__link-container">
840
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
841
+ <span class="fdx-nested-list__title">Level 1 Item</span>
842
+ </div>
843
+ </a>
844
+ </li>
845
+ </ul>
846
+ </nav>
847
+ <nav class="fdx-side-nav__utility" aria-label="Utility Menu">
848
+ <ul class="fdx-nested-list level-1" aria-label="Utility Menu">
849
+ <li class="fdx-nested-list__item">
850
+ <a class="fdx-nested-list__link" href="#">
851
+ <div class="fdx-nested-list__link-container">
852
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--compare"></i>
853
+ <span class="fdx-nested-list__title">Level 1 Item</span>
854
+ </div>
855
+ </a>
856
+ </li>
857
+ <li class="fdx-nested-list__item">
858
+ <a class="fdx-nested-list__link" href="#">
859
+ <div class="fdx-nested-list__link-container">
860
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
861
+ <span class="fdx-nested-list__title">Level 1 Item</span>
862
+ </div>
863
+ </a>
864
+ </li>
865
+ </ul>
866
+ </nav>
867
+ </div>
868
+ ```
869
+
870
+ ### Compact Wide With Icons, Level 2 Collapsed
871
+
872
+ For compact Side Navigation apply the <code>.fdx-side-nav--compact</code> modifier class with <code>.fdx-side-nav</code> base class, and <code>.fdx-nested-list--compact</code> modifier class with <code>.fdx-nested-list</code> base class.
873
+
874
+ ```html
875
+ <div class="fdx-side-nav fdx-side-nav--compact">
876
+ <nav class="fdx-side-nav__main-navigation" aria-label="Main Menu">
877
+ <ul class="fdx-nested-list fdx-nested-list--compact level-1" aria-labelledby="EX500H1">
878
+ <li class="fdx-nested-list__item">
879
+ <a class="fdx-nested-list__link" href="#">
880
+ <div class="fdx-nested-list__link-container">
881
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
882
+ <span class="fdx-nested-list__title">Level 1 Item</span>
883
+ </div>
884
+ </a>
885
+ </li>
886
+ <li class="fdx-nested-list__item">
887
+ <a class="fdx-nested-list__link" href="#">
888
+ <div class="fdx-nested-list__link-container">
889
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--map"></i>
890
+ <span class="fdx-nested-list__title">Level 1 Item</span>
891
+ </div>
892
+ </a>
893
+ </li>
894
+ <li class="fdx-nested-list__item">
895
+ <button class="fdx-nested-list__link is-selected" aria-expanded="false" aria-label="Expand Level 2">
896
+ <div class="fdx-nested-list__link-container">
897
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--calendar"></i>
898
+ <span class="fdx-nested-list__title">Level 1 Item</span>
899
+ <i class="fdx-nested-list__arrow sap-icon--navigation-right-arrow" role="presentation"></i>
900
+ </div>
901
+ </button>
902
+
903
+ <ul class="fdx-nested-list level-2" aria-hidden="true">
904
+ <li class="fdx-nested-list__item">
905
+ <a class="fdx-nested-list__link" href="#">
906
+ <div class="fdx-nested-list__link-container">
907
+ <span class="fdx-nested-list__title">Level 2 Item</span>
908
+ </div>
909
+ </a>
910
+ </li>
911
+ <li class="fdx-nested-list__item">
912
+ <a class="fdx-nested-list__link" href="#">
913
+ <div class="fdx-nested-list__link-container">
914
+ <span class="fdx-nested-list__title">Level 2 Item</span>
915
+ </div>
916
+ </a>
917
+ </li>
918
+ <li class="fdx-nested-list__item">
919
+ <a class="fdx-nested-list__link" href="#">
920
+ <div class="fdx-nested-list__link-container">
921
+ <span class="fdx-nested-list__title">Level 2 Item</span>
922
+ </div>
923
+ </a>
924
+ </li>
925
+ </ul>
926
+ </li>
927
+ <li class="fdx-nested-list__item">
928
+ <a class="fdx-nested-list__link" href="#">
929
+ <div class="fdx-nested-list__link-container">
930
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
931
+ <span class="fdx-nested-list__title">Level 1 Item</span>
932
+ </div>
933
+ </a>
934
+ </li>
935
+ </ul>
936
+ </nav>
937
+ <nav class="fdx-side-nav__utility" aria-label="Utility Menu">
938
+ <ul class="fdx-nested-list fdx-nested-list--compact level-1" aria-label="Utility Menu">
939
+ <li class="fdx-nested-list__item">
940
+ <a class="fdx-nested-list__link" href="#">
941
+ <div class="fdx-nested-list__link-container">
942
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--compare"></i>
943
+ <span class="fdx-nested-list__title">Level 1 Item</span>
944
+ </div>
945
+ </a>
946
+ </li>
947
+ <li class="fdx-nested-list__item">
948
+ <a class="fdx-nested-list__link" href="#">
949
+ <div class="fdx-nested-list__link-container">
950
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
951
+ <span class="fdx-nested-list__title">Level 1 Item</span>
952
+ </div>
953
+ </a>
954
+ </li>
955
+ </ul>
956
+ </nav>
957
+ </div>
958
+ ```
959
+
960
+ ### Compact Wide With Icons, Level 2 Collapsed, Navigation and Collapse
961
+
962
+ For compact Side Navigation apply the <code>.fdx-side-nav--compact</code> modifier class with <code>.fdx-side-nav</code> base class, and <code>.fdx-nested-list--compact</code> modifier class with <code>.fdx-nested-list</code> base class.
963
+
964
+ ```html
965
+ <div class="fdx-side-nav fdx-side-nav--compact">
966
+ <nav class="fdx-side-nav__main-navigation" aria-label="Main Menu">
967
+ <ul class="fdx-nested-list fdx-nested-list--compact level-1" aria-labelledby="EX500H1">
968
+ <li class="fdx-nested-list__item">
969
+ <a class="fdx-nested-list__link" href="#">
970
+ <div class="fdx-nested-list__link-container">
971
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
972
+ <span class="fdx-nested-list__title">Level 1 Item</span>
973
+ </div>
974
+ </a>
975
+ </li>
976
+ <li class="fdx-nested-list__item">
977
+ <a class="fdx-nested-list__link" href="#">
978
+ <div class="fdx-nested-list__link-container">
979
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--map"></i>
980
+ <span class="fdx-nested-list__title">Level 1 Item</span>
981
+ </div>
982
+ </a>
983
+ </li>
984
+ <li class="fdx-nested-list__item">
985
+ <div class="fdx-nested-list__link is-selected" aria-expanded="false" aria-label="Expand Level 2">
986
+ <a class="fdx-nested-list__link-container" href="#">
987
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--calendar"></i>
988
+ <span class="fdx-nested-list__title">Level 1 Item</span>
989
+ </a>
990
+ <button class="fdx-nested-list__button">
991
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
992
+ </button>
993
+ </div>
994
+
995
+ <ul class="fdx-nested-list level-2" aria-hidden="true">
996
+ <li class="fdx-nested-list__item">
997
+ <a class="fdx-nested-list__link" href="#">
998
+ <div class="fdx-nested-list__link-container">
999
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1000
+ </div>
1001
+ </a>
1002
+ </li>
1003
+ <li class="fdx-nested-list__item">
1004
+ <a class="fdx-nested-list__link" href="#">
1005
+ <div class="fdx-nested-list__link-container">
1006
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1007
+ </div>
1008
+ </a>
1009
+ </li>
1010
+ <li class="fdx-nested-list__item">
1011
+ <a class="fdx-nested-list__link" href="#">
1012
+ <div class="fdx-nested-list__link-container">
1013
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1014
+ </div>
1015
+ </a>
1016
+ </li>
1017
+ </ul>
1018
+ </li>
1019
+ <li class="fdx-nested-list__item">
1020
+ <a class="fdx-nested-list__link" href="#">
1021
+ <div class="fdx-nested-list__link-container">
1022
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
1023
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1024
+ </div>
1025
+ </a>
1026
+ </li>
1027
+ </ul>
1028
+ </nav>
1029
+ <nav class="fdx-side-nav__utility" aria-label="Utility Menu">
1030
+ <ul class="fdx-nested-list fdx-nested-list--compact level-1" aria-label="Utility Menu">
1031
+ <li class="fdx-nested-list__item">
1032
+ <a class="fdx-nested-list__link" href="#">
1033
+ <div class="fdx-nested-list__link-container">
1034
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--compare"></i>
1035
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1036
+ </div>
1037
+ </a>
1038
+ </li>
1039
+ <li class="fdx-nested-list__item">
1040
+ <a class="fdx-nested-list__link" href="#">
1041
+ <div class="fdx-nested-list__link-container">
1042
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
1043
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1044
+ </div>
1045
+ </a>
1046
+ </li>
1047
+ </ul>
1048
+ </nav>
1049
+ </div>
1050
+ ```
1051
+
1052
+ ### Cosy Narrow, Levels 2 and 3 in Popover Hidden
1053
+
1054
+ For <code>Narrow</code> variant of Side Navigation apply <code>.fdx-side-nav--narrow</code> modifier class to <code>.fdx-side-nav</code> base class.
1055
+
1056
+ ```html
1057
+ <script>
1058
+ const togglerButton = document.getElementById("navigation_toggler");
1059
+
1060
+ togglerButton.addEventListener("click", () => {
1061
+ const navigation = document.getElementById("narrow_navigation");
1062
+ let shouldExpand = navigation.classList.contains("fdx-side-nav--narrow");
1063
+
1064
+ if (shouldExpand) {
1065
+ navigation.classList.remove("fdx-side-nav--narrow");
1066
+ } else {
1067
+ navigation.classList.add("fdx-side-nav--narrow");
1068
+ }
1069
+
1070
+ setTimeout(() => {
1071
+ if (shouldExpand) {
1072
+ navigation.classList.remove("fdx-side-nav--narrow-animated-items");
1073
+ } else {
1074
+ navigation.classList.add("fdx-side-nav--narrow-animated-items");
1075
+ }
1076
+ }, shouldExpand ? 200 : 0);
1077
+ });
1078
+ </script>
1079
+
1080
+ <button class="fd-button" id="navigation_toggler">Toggle navigation narrow state</button>
1081
+
1082
+ <div class="fdx-side-nav fdx-side-nav--narrow fdx-side-nav--narrow-animated-items" id="narrow_navigation">
1083
+ <nav class="fdx-side-nav__main-navigation">
1084
+ <ul class="fdx-nested-list level-1">
1085
+ <li class="fdx-nested-list__item">
1086
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1087
+ <div class="fdx-nested-list__link-container">
1088
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
1089
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1090
+ </div>
1091
+ </a>
1092
+ </li>
1093
+ <li class="fdx-nested-list__item">
1094
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1095
+ <div class="fdx-nested-list__link-container">
1096
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--map"></i>
1097
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1098
+ </div>
1099
+ </a>
1100
+ </li>
1101
+ <li class="fdx-nested-list__item fd-popover">
1102
+ <button class="fdx-nested-list__link fd-popover__control is-selected" aria-expanded="false" aria-label="Expand Level 2">
1103
+ <div class="fdx-nested-list__link-container">
1104
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--calendar"></i>
1105
+ <span class="fdx-nested-list__title">Level 1 Item with some long text to display line wrapping</span>
1106
+ <i class="fdx-nested-list__arrow sap-icon--navigation-right-arrow" role="presentation"></i>
1107
+ </div>
1108
+ </button>
1109
+ </li>
1110
+
1111
+ <li class="fdx-nested-list__item fd-popover">
1112
+ <div class="fdx-nested-list__link fd-popover__control" aria-expanded="false" aria-label="Expand Level 2">
1113
+ <a class="fdx-nested-list__link-container" href="#">
1114
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--calendar"></i>
1115
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1116
+ </a>
1117
+ <button class="fdx-nested-list__button">
1118
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1119
+ </button>
1120
+ </div>
1121
+ </li>
1122
+
1123
+ <li class="fdx-nested-list__item">
1124
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1125
+ <div class="fdx-nested-list__link-container">
1126
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
1127
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1128
+ </div>
1129
+ </a>
1130
+ </li>
1131
+ <li class="fdx-nested-list__item">
1132
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1133
+ <div class="fdx-nested-list__link-container">
1134
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--bar-chart"></i>
1135
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1136
+ </div>
1137
+ </a>
1138
+ </li>
1139
+ </ul>
1140
+ </nav>
1141
+ <nav class="fdx-side-nav__utility">
1142
+ <ul class="fdx-nested-list level-1">
1143
+ <li class="fdx-nested-list__item">
1144
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1145
+ <div class="fdx-nested-list__link-container">
1146
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--compare"></i>
1147
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1148
+ </div>
1149
+ </a>
1150
+ </li>
1151
+ <li class="fdx-nested-list__item">
1152
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1153
+ <div class="fdx-nested-list__link-container">
1154
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
1155
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1156
+ </div>
1157
+ </a>
1158
+ </li>
1159
+ </ul>
1160
+ </nav>
1161
+ </div>
1162
+ ```
1163
+
1164
+ ### Cosy Narrow with Vertical Overflow Behaviour, Levels 2 and 3 in Popover Hidden
1165
+
1166
+ ```html
1167
+ <div class="fdx-side-nav fdx-side-nav--narrow">
1168
+ <nav class="fdx-side-nav__main-navigation">
1169
+ <button class="fd-button fd-button--standard fdx-side-nav__button" aria-label="Move up"><i class="sap-icon--navigation-up-arrow"></i></button>
1170
+ <ul class="fdx-nested-list level-1">
1171
+ <li class="fdx-nested-list__item">
1172
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1173
+ <div class="fdx-nested-list__link-container">
1174
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
1175
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1176
+ </div>
1177
+ </a>
1178
+ </li>
1179
+ <li class="fdx-nested-list__item">
1180
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1181
+ <div class="fdx-nested-list__link-container">
1182
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--map"></i>
1183
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1184
+ </div>
1185
+ </a>
1186
+ </li>
1187
+ <li class="fdx-nested-list__item fd-popover">
1188
+ <button class="fdx-nested-list__link fd-popover__control is-selected" aria-expanded="false" aria-label="Expand Level 2">
1189
+ <div class="fdx-nested-list__link-container">
1190
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--calendar"></i>
1191
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1192
+ <i class="fdx-nested-list__arrow sap-icon--navigation-right-arrow" role="presentation"></i>
1193
+ </div>
1194
+ </button>
1195
+ </li>
1196
+ <li class="fdx-nested-list__item">
1197
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1198
+ <div class="fdx-nested-list__link-container">
1199
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
1200
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1201
+ </div>
1202
+ </a>
1203
+ </li>
1204
+ <li class="fdx-nested-list__item">
1205
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1206
+ <div class="fdx-nested-list__link-container">
1207
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--bar-chart"></i>
1208
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1209
+ </div>
1210
+ </a>
1211
+ </li>
1212
+ </ul>
1213
+ <button class="fd-button fd-button--standard fdx-side-nav__button" aria-label="Move up"><i class="sap-icon--navigation-down-arrow"></i></button>
1214
+ </nav>
1215
+ <nav class="fdx-side-nav__utility">
1216
+ <ul class="fdx-nested-list level-1">
1217
+ <li class="fdx-nested-list__item">
1218
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1219
+ <div class="fdx-nested-list__link-container">
1220
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--compare"></i>
1221
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1222
+ </div>
1223
+ </a>
1224
+ </li>
1225
+ <li class="fdx-nested-list__item">
1226
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1227
+ <div class="fdx-nested-list__link-container">
1228
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
1229
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1230
+ </div>
1231
+ </a>
1232
+ </li>
1233
+ </ul>
1234
+ </nav>
1235
+ </div>
1236
+ ```
1237
+
1238
+ ### CosyNarrowPopover
1239
+
1240
+ ```html
1241
+ <h3>Level 1 Header</h3>
1242
+ <div class="fd-popover">
1243
+ <div class="fd-popover__control">
1244
+
1245
+ <nav class="fdx-side-nav__popover-body fd-popover__body fd-popover__body--no-arrow"">
1246
+ <ul class="fdx-nested-list level-2">
1247
+ <li class="fdx-nested-list__item fdx-nested-list__item--header">
1248
+ <h3 class="fdx-nested-list__link">
1249
+ <div class="fdx-nested-list__link-container">
1250
+ <span class="fdx-nested-list__title">Sales</span>
1251
+ </div>
1252
+ </h3>
1253
+ </li>
1254
+ <li class="fdx-nested-list__item">
1255
+ <a class="fdx-nested-list__link" href="#">
1256
+ <div class="fdx-nested-list__link-container">
1257
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1258
+ </div>
1259
+ </a>
1260
+ </li>
1261
+ <li class="fdx-nested-list__item">
1262
+ <button class="fdx-nested-list__link is-selected" aria-expanded="true" aria-label="Expand Level 3">
1263
+ <div class="fdx-nested-list__link-container">
1264
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1265
+ <i class="fdx-nested-list__arrow sap-icon--navigation-down-arrow" role="presentation"></i>
1266
+ </div>
1267
+ </button>
1268
+ <ul class="fdx-nested-list level-3" aria-hidden="false">
1269
+ <li class="fdx-nested-list__item">
1270
+ <a class="fdx-nested-list__link" href="#">
1271
+ <div class="fdx-nested-list__link-container">
1272
+ <span class="fdx-nested-list__title">Level 3 Item</span>
1273
+ </div>
1274
+ </a>
1275
+ </li>
1276
+ <li class="fdx-nested-list__item">
1277
+ <a class="fdx-nested-list__link" href="#">
1278
+ <div class="fdx-nested-list__link-container">
1279
+ <span class="fdx-nested-list__title">Level 3 Item</span>
1280
+ </div>
1281
+ </a>
1282
+ </li>
1283
+ <li class="fdx-nested-list__item">
1284
+ <a class="fdx-nested-list__link" href="#">
1285
+ <div class="fdx-nested-list__link-container">
1286
+ <span class="fdx-nested-list__title">Level 3 Item</span>
1287
+ </div>
1288
+ </a>
1289
+ </li>
1290
+ </ul>
1291
+ </li>
1292
+ <li class="fdx-nested-list__item">
1293
+ <a class="fdx-nested-list__link" href="#">
1294
+ <div class="fdx-nested-list__link-container">
1295
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1296
+ </div>
1297
+ </a>
1298
+ </li>
1299
+ <li class="fdx-nested-list__item">
1300
+ <a class="fdx-nested-list__link" href="#">
1301
+ <div class="fdx-nested-list__link-container">
1302
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1303
+ </div>
1304
+ </a>
1305
+ </li>
1306
+ </ul>
1307
+ </nav>
1308
+ </div>
1309
+ </div>
1310
+
1311
+ <h3>Level 1 Navigation</h3>
1312
+ <div class="fd-popover">
1313
+ <div class="fd-popover__control">
1314
+
1315
+ <nav class="fdx-side-nav__popover-body fd-popover__body fd-popover__body--no-arrow"">
1316
+ <ul class="fdx-nested-list level-2">
1317
+ <li class="fdx-nested-list__item fdx-nested-list__item--header">
1318
+ <a class="fdx-nested-list__link">
1319
+ <div class="fdx-nested-list__link-container">
1320
+ <span class="fdx-nested-list__title">Sales</span>
1321
+ </div>
1322
+ </a>
1323
+ </li>
1324
+ <li class="fdx-nested-list__item">
1325
+ <a class="fdx-nested-list__link" href="#">
1326
+ <div class="fdx-nested-list__link-container">
1327
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1328
+ </div>
1329
+ </a>
1330
+ </li>
1331
+ <li class="fdx-nested-list__item">
1332
+ <button class="fdx-nested-list__link is-selected" aria-expanded="true" aria-label="Expand Level 3">
1333
+ <div class="fdx-nested-list__link-container">
1334
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1335
+ <i class="fdx-nested-list__arrow sap-icon--navigation-down-arrow" role="presentation"></i>
1336
+ </div>
1337
+ </button>
1338
+ <ul class="fdx-nested-list level-3" aria-hidden="false">
1339
+ <li class="fdx-nested-list__item">
1340
+ <a class="fdx-nested-list__link" href="#">
1341
+ <div class="fdx-nested-list__link-container">
1342
+ <span class="fdx-nested-list__title">Level 3 Item</span>
1343
+ </div>
1344
+ </a>
1345
+ </li>
1346
+ <li class="fdx-nested-list__item">
1347
+ <a class="fdx-nested-list__link" href="#">
1348
+ <div class="fdx-nested-list__link-container">
1349
+ <span class="fdx-nested-list__title">Level 3 Item</span>
1350
+ </div>
1351
+ </a>
1352
+ </li>
1353
+ <li class="fdx-nested-list__item">
1354
+ <a class="fdx-nested-list__link" href="#">
1355
+ <div class="fdx-nested-list__link-container">
1356
+ <span class="fdx-nested-list__title">Level 3 Item</span>
1357
+ </div>
1358
+ </a>
1359
+ </li>
1360
+ </ul>
1361
+ </li>
1362
+ <li class="fdx-nested-list__item">
1363
+ <a class="fdx-nested-list__link" href="#">
1364
+ <div class="fdx-nested-list__link-container">
1365
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1366
+ </div>
1367
+ </a>
1368
+ </li>
1369
+ <li class="fdx-nested-list__item">
1370
+ <a class="fdx-nested-list__link" href="#">
1371
+ <div class="fdx-nested-list__link-container">
1372
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1373
+ </div>
1374
+ </a>
1375
+ </li>
1376
+ </ul>
1377
+ </nav>
1378
+ </div>
1379
+ </div>
1380
+ ```
1381
+
1382
+ ### Cosy Narrow Popover with Dynamic Width
1383
+
1384
+ Side Navigation Popover can react dynamically to long label texts in navigational items. In such case the width of the Side Navigation Popover is adapted by the longest label. The label does not wrap or truncate. Use the modifier class <code>.fdx-side-nav__popover-body--dynamic-width</code> modifier class with <code>.fdx-side-nav__popover-body</code> base class for Side Navigation Popover with dynamic width.
1385
+
1386
+ ```html
1387
+ <div class="fd-popover">
1388
+ <div class="fd-popover__control">
1389
+
1390
+ <nav class="fdx-side-nav__popover-body fdx-side-nav__popover-body--dynamic-width fd-popover__body fd-popover__body--no-arrow"">
1391
+ <ul class="fdx-nested-list level-2">
1392
+ <li class="fdx-nested-list__item fdx-nested-list__item--header">
1393
+ <h3 class="fdx-nested-list__link">
1394
+ <div class="fdx-nested-list__link-container">
1395
+ <span class="fdx-nested-list__title">Sales</span>
1396
+ </div>
1397
+ </h3>
1398
+ </li>
1399
+ <li class="fdx-nested-list__item">
1400
+ <a class="fdx-nested-list__link" href="#">
1401
+ <div class="fdx-nested-list__link-container">
1402
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1403
+ </div>
1404
+ </a>
1405
+ </li>
1406
+ <li class="fdx-nested-list__item">
1407
+ <button class="fdx-nested-list__link is-selected" aria-expanded="true" aria-label="Expand Level 3">
1408
+ <div class="fdx-nested-list__link-container">
1409
+ <span class="fdx-nested-list__title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
1410
+ <i class="fdx-nested-list__arrow sap-icon--navigation-down-arrow" role="presentation"></i>
1411
+ </div>
1412
+ </button>
1413
+ <ul class="fdx-nested-list level-3" aria-hidden="false">
1414
+ <li class="fdx-nested-list__item">
1415
+ <a class="fdx-nested-list__link" href="#">
1416
+ <div class="fdx-nested-list__link-container">
1417
+ <span class="fdx-nested-list__title">Level 3 Item</span>
1418
+ </div>
1419
+ </a>
1420
+ </li>
1421
+ <li class="fdx-nested-list__item">
1422
+ <a class="fdx-nested-list__link" href="#">
1423
+ <div class="fdx-nested-list__link-container">
1424
+ <span class="fdx-nested-list__title">Level 3 Item</span>
1425
+ </div>
1426
+ </a>
1427
+ </li>
1428
+ <li class="fdx-nested-list__item">
1429
+ <a class="fdx-nested-list__link" href="#">
1430
+ <div class="fdx-nested-list__link-container">
1431
+ <span class="fdx-nested-list__title">Level 3 Item</span>
1432
+ </div>
1433
+ </a>
1434
+ </li>
1435
+ </ul>
1436
+ </li>
1437
+ <li class="fdx-nested-list__item">
1438
+ <a class="fdx-nested-list__link" href="#">
1439
+ <div class="fdx-nested-list__link-container">
1440
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1441
+ </div>
1442
+ </a>
1443
+ </li>
1444
+ <li class="fdx-nested-list__item">
1445
+ <a class="fdx-nested-list__link" href="#">
1446
+ <div class="fdx-nested-list__link-container">
1447
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1448
+ </div>
1449
+ </a>
1450
+ </li>
1451
+ </ul>
1452
+ </nav>
1453
+ </div>
1454
+ </div>
1455
+ ```
1456
+
1457
+ ### CompactNarrow
1458
+
1459
+ For <code>Narrow</code> variant of Side Navigation in compact mode apply <code>.fdx-side-nav--narrow</code> and <code>.fdx-side-nav--compact</code> modifier classed to <code>.fdx-side-nav</code> base class.
1460
+
1461
+ ```html
1462
+ <div class="fdx-side-nav fdx-side-nav--compact fdx-side-nav--narrow">
1463
+ <nav class="fdx-side-nav__main-navigation">
1464
+ <ul class="fdx-nested-list fdx-nested-list--compact level-1">
1465
+ <li class="fdx-nested-list__item">
1466
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1467
+ <div class="fdx-nested-list__link-container">
1468
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
1469
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1470
+ </div>
1471
+ </a>
1472
+ </li>
1473
+ <li class="fdx-nested-list__item">
1474
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1475
+ <div class="fdx-nested-list__link-container">
1476
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--map"></i>
1477
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1478
+ </div>
1479
+ </a>
1480
+ </li>
1481
+ <li class="fdx-nested-list__item fd-popover">
1482
+ <button class="fdx-nested-list__link fd-popover__control is-selected" aria-expanded="false" aria-label="Expand Level 2">
1483
+ <div class="fdx-nested-list__link-container">
1484
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--calendar"></i>
1485
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1486
+ <i class="fdx-nested-list__arrow sap-icon--navigation-right-arrow" role="presentation"></i>
1487
+ </div>
1488
+ </button>
1489
+ </li>
1490
+ <li class="fdx-nested-list__item">
1491
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1492
+ <div class="fdx-nested-list__link-container">
1493
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
1494
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1495
+ </div>
1496
+ </a>
1497
+ </li>
1498
+ <li class="fdx-nested-list__item">
1499
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1500
+ <div class="fdx-nested-list__link-container">
1501
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--bar-chart"></i>
1502
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1503
+ </div>
1504
+ </a>
1505
+ </li>
1506
+ </ul>
1507
+ </nav>
1508
+ <nav class="fdx-side-nav__utility">
1509
+ <ul class="fdx-nested-list fdx-nested-list--compact level-1" aria-label="Utility Menu">
1510
+ <li class="fdx-nested-list__item">
1511
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1512
+ <div class="fdx-nested-list__link-container">
1513
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--compare"></i>
1514
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1515
+ </div>
1516
+ </a>
1517
+ </li>
1518
+ <li class="fdx-nested-list__item">
1519
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1520
+ <div class="fdx-nested-list__link-container">
1521
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
1522
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1523
+ </div>
1524
+ </a>
1525
+ </li>
1526
+ </ul>
1527
+ </nav>
1528
+ </div>
1529
+ ```
1530
+
1531
+ ### Compact Narrow with Vertical Overflow Behaviour, Levels 2 and 3 in Popover Hidden
1532
+
1533
+ ```html
1534
+ <div class="fdx-side-nav fdx-side-nav--compact fdx-side-nav--narrow">
1535
+ <nav class="fdx-side-nav__main-navigation">
1536
+ <button class="fd-button fd-button--standard fd-button--compact fdx-side-nav__button" aria-label="Move up"><i class="sap-icon--navigation-up-arrow"></i></button>
1537
+ <ul class="fdx-nested-list fdx-nested-list--compact level-1">
1538
+ <li class="fdx-nested-list__item">
1539
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1540
+ <div class="fdx-nested-list__link-container">
1541
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
1542
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1543
+ </div>
1544
+ </a>
1545
+ </li>
1546
+ <li class="fdx-nested-list__item">
1547
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1548
+ <div class="fdx-nested-list__link-container">
1549
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--map"></i>
1550
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1551
+ </div>
1552
+ </a>
1553
+ </li>
1554
+ <li class="fdx-nested-list__item fd-popover">
1555
+ <button class="fdx-nested-list__link fd-popover__control is-selected" aria-expanded="false" aria-label="Expand Level 2">
1556
+ <div class="fdx-nested-list__link-container">
1557
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--calendar"></i>
1558
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1559
+ <i class="fdx-nested-list__arrow sap-icon--navigation-right-arrow" role="presentation"></i>
1560
+ </div>
1561
+ </button>
1562
+ </li>
1563
+ <li class="fdx-nested-list__item">
1564
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1565
+ <div class="fdx-nested-list__link-container">
1566
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
1567
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1568
+ </div>
1569
+ </a>
1570
+ </li>
1571
+ <li class="fdx-nested-list__item">
1572
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1573
+ <div class="fdx-nested-list__link-container">
1574
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--bar-chart"></i>
1575
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1576
+ </div>
1577
+ </a>
1578
+ </li>
1579
+ </ul>
1580
+ <button class="fd-button fd-button--standard fd-button--compact fdx-side-nav__button" aria-label="Move up"><i class="sap-icon--navigation-down-arrow"></i></button>
1581
+ </nav>
1582
+ <nav class="fdx-side-nav__utility">
1583
+ <ul class="fdx-nested-list fdx-nested-list--compact level-1">
1584
+ <li class="fdx-nested-list__item">
1585
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1586
+ <div class="fdx-nested-list__link-container">
1587
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--compare"></i>
1588
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1589
+ </div>
1590
+ </a>
1591
+ </li>
1592
+ <li class="fdx-nested-list__item">
1593
+ <a class="fdx-nested-list__link" href="#" aria-label="Level 1 Item">
1594
+ <div class="fdx-nested-list__link-container">
1595
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
1596
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1597
+ </div>
1598
+ </a>
1599
+ </li>
1600
+ </ul>
1601
+ </nav>
1602
+ </div>
1603
+ ```
1604
+
1605
+ ### CompactNarrowPopover
1606
+
1607
+ ```html
1608
+ <div class="fd-popover">
1609
+ <div class="fd-popover__control">
1610
+
1611
+ <nav class="fdx-side-nav__popover-body fd-popover__body fd-popover__body--no-arrow"">
1612
+ <ul class="fdx-nested-list fdx-nested-list--compact level-2">
1613
+ <li class="fdx-nested-list__item fdx-nested-list__item--header">
1614
+ <h3 class="fdx-nested-list__link">
1615
+ <div class="fdx-nested-list__link-container">
1616
+ <span class="fdx-nested-list__title">Sales</span>
1617
+ </div>
1618
+ </h3>
1619
+ </li>
1620
+ <li class="fdx-nested-list__item">
1621
+ <a class="fdx-nested-list__link" href="#">
1622
+ <div class="fdx-nested-list__link-container">
1623
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1624
+ </div>
1625
+ </a>
1626
+ </li>
1627
+ <li class="fdx-nested-list__item">
1628
+ <button class="fdx-nested-list__link is-selected" aria-expanded="true" aria-label="Expand Level 3">
1629
+ <div class="fdx-nested-list__link-container">
1630
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1631
+ <i class="fdx-nested-list__arrow sap-icon--navigation-down-arrow" role="presentation"></i>
1632
+ </div>
1633
+ </button>
1634
+ <ul class="fdx-nested-list level-3" aria-hidden="false">
1635
+ <li class="fdx-nested-list__item">
1636
+ <a class="fdx-nested-list__link" href="#">
1637
+ <div class="fdx-nested-list__link-container">
1638
+ <span class="fdx-nested-list__title">Level 3 Item</span>
1639
+ </div>
1640
+ </a>
1641
+ </li>
1642
+ <li class="fdx-nested-list__item">
1643
+ <a class="fdx-nested-list__link" href="#">
1644
+ <div class="fdx-nested-list__link-container">
1645
+ <span class="fdx-nested-list__title">Level 3 Item</span>
1646
+ </div>
1647
+ </a>
1648
+ </li>
1649
+ <li class="fdx-nested-list__item">
1650
+ <a class="fdx-nested-list__link" href="#">
1651
+ <div class="fdx-nested-list__link-container">
1652
+ <span class="fdx-nested-list__title">Level 3 Item</span>
1653
+ </div>
1654
+ </a>
1655
+ </li>
1656
+ </ul>
1657
+ </li>
1658
+ <li class="fdx-nested-list__item">
1659
+ <a class="fdx-nested-list__link" href="#">
1660
+ <div class="fdx-nested-list__link-container">
1661
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1662
+ </div>
1663
+ </a>
1664
+ </li>
1665
+ <li class="fdx-nested-list__item">
1666
+ <a class="fdx-nested-list__link" href="#">
1667
+ <div class="fdx-nested-list__link-container">
1668
+ <span class="fdx-nested-list__title">Level 2 Item</span>
1669
+ </div>
1670
+ </a>
1671
+ </li>
1672
+ </ul>
1673
+ </nav>
1674
+ </div>
1675
+ </div>
1676
+ ```
1677
+
1678
+ ### Cosy Wide With Icon and Filter Integration, 1 Level
1679
+
1680
+ ```html
1681
+ <div class="fdx-side-nav">
1682
+ <nav class="fdx-side-nav__main-navigation" aria-label="Main Menu">
1683
+ <div class="fd-input-group fdx-side-nav__input-group">
1684
+ <input class="fd-input fd-input-group__input" type="text" placeholder="Filter">
1685
+ <span class="fd-input-group__addon fd-input-group__addon--button">
1686
+ <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent" aria-label="Search">
1687
+ <i class="sap-icon--search"></i>
1688
+ </button>
1689
+ </span>
1690
+ </div>
1691
+ <ul class="fdx-nested-list level-1">
1692
+ <li class="fdx-nested-list__item">
1693
+ <a class="fdx-nested-list__link" href="#">
1694
+ <div class="fdx-nested-list__link-container">
1695
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
1696
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1697
+ </div>
1698
+ </a>
1699
+ </li>
1700
+ <li class="fdx-nested-list__item">
1701
+ <a class="fdx-nested-list__link is-selected" href="#">
1702
+ <div class="fdx-nested-list__link-container">
1703
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--calendar"></i>
1704
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1705
+ </div>
1706
+ </a>
1707
+ </li>
1708
+ <li class="fdx-nested-list__item">
1709
+ <a class="fdx-nested-list__link" href="#">
1710
+ <div class="fdx-nested-list__link-container">
1711
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--employee"></i>
1712
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1713
+ </div>
1714
+ </a>
1715
+ </li>
1716
+ <li class="fdx-nested-list__item">
1717
+ <a class="fdx-nested-list__link" href="#">
1718
+ <div class="fdx-nested-list__link-container">
1719
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
1720
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1721
+ </div>
1722
+ </a>
1723
+ </li>
1724
+ <li class="fdx-nested-list__item">
1725
+ <a class="fdx-nested-list__link" href="#">
1726
+ <div class="fdx-nested-list__link-container">
1727
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--lightbulb"></i>
1728
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1729
+ </div>
1730
+ </a>
1731
+ </li>
1732
+ </ul>
1733
+ </nav>
1734
+ <nav class="fdx-side-nav__utility" aria-label="Utility Menu">
1735
+ <ul class="fdx-nested-list level-1">
1736
+ <li class="fdx-nested-list__item">
1737
+ <a class="fdx-nested-list__link" href="#">
1738
+ <div class="fdx-nested-list__link-container">
1739
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--compare"></i>
1740
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1741
+ </div>
1742
+ </a>
1743
+ </li>
1744
+ <li class="fdx-nested-list__item">
1745
+ <a class="fdx-nested-list__link" href="#">
1746
+ <div class="fdx-nested-list__link-container">
1747
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
1748
+ <span class="fdx-nested-list__title">Level 1 Item</span>
1749
+ </div>
1750
+ </a>
1751
+ </li>
1752
+ </ul>
1753
+ </nav>
1754
+ </div>
1755
+ ```
1756
+
1757
+ ### WrappingLongText
1758
+
1759
+ By default, side navigation will wrap long text into multiple lines if the width of the nav is not enough. Developers can modify this behaviour by adding <code>.fdx-side-nav--single-line</code> class modifier.
1760
+
1761
+ ```html
1762
+ <div class="fdx-side-nav">
1763
+ <nav class="fdx-side-nav__main-navigation" aria-label="Main Menu">
1764
+ <ul class="fdx-nested-list level-1">
1765
+ <li class="fdx-nested-list__item fdx-nested-list__item--group">
1766
+ <span class="fdx-nested-list__title">Group Header</span>
1767
+ </li>
1768
+ <li class="fdx-nested-list__item">
1769
+ <a class="fdx-nested-list__link" href="#">
1770
+ <div class="fdx-nested-list__link-container">
1771
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
1772
+ <span class="fdx-nested-list__title">Overview</span>
1773
+ </a>
1774
+ </li>
1775
+ <li class="fdx-nested-list__item">
1776
+ <a class="fdx-nested-list__link is-selected" href="#">
1777
+ <div class="fdx-nested-list__link-container">
1778
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--calendar"></i>
1779
+ <span class="fdx-nested-list__title"
1780
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit</span
1781
+ >
1782
+ </div>
1783
+ </a>
1784
+ </li>
1785
+ <li class="fdx-nested-list__item">
1786
+ <a class="fdx-nested-list__link" href="#">
1787
+ <div class="fdx-nested-list__link-container">
1788
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--employee"></i>
1789
+ <span class="fdx-nested-list__title">Sed do eiusmod tempor incididunt ut labore</span>
1790
+ </div>
1791
+ </a>
1792
+ </li>
1793
+ <li class="fdx-nested-list__item">
1794
+ <a class="fdx-nested-list__link" href="#">
1795
+ <div class="fdx-nested-list__link-container">
1796
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
1797
+ <span class="fdx-nested-list__title">Nemo enim ipsam</span>
1798
+ </div>
1799
+ </a>
1800
+ </li>
1801
+ <li class="fdx-nested-list__item fdx-nested-list__item--group">
1802
+ <span class="fdx-nested-list__title">Group Header</span>
1803
+ </li>
1804
+ <li class="fdx-nested-list__item">
1805
+ <a class="fdx-nested-list__link" href="#">
1806
+ <div class="fdx-nested-list__link-container">
1807
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--lightbulb"></i>
1808
+ <span class="fdx-nested-list__title">Neque porro quisquam est, qui dolorem ipsum</span>
1809
+ </div>
1810
+ </a>
1811
+ </li>
1812
+ <li class="fdx-nested-list__item">
1813
+ <a class="fdx-nested-list__link" href="#">
1814
+ <div class="fdx-nested-list__link-container">
1815
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--history"></i>
1816
+ <span class="fdx-nested-list__title">Quis autem vel eum iure</span>
1817
+ </div>
1818
+ </a>
1819
+ </li>
1820
+ <li class="fdx-nested-list__item">
1821
+ <a class="fdx-nested-list__link" href="#">
1822
+ <div class="fdx-nested-list__link-container">
1823
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--future"></i>
1824
+ <span class="fdx-nested-list__title">Excepteur sint occaecat cupidatat</span>
1825
+ </div>
1826
+ </a>
1827
+ </li>
1828
+ <li class="fdx-nested-list__item">
1829
+ <a class="fdx-nested-list__link" href="#">
1830
+ <div class="fdx-nested-list__link-container">
1831
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
1832
+ <span class="fdx-nested-list__title">Ut enim ad minima veniam</span>
1833
+ </div>
1834
+ </a>
1835
+ </li>
1836
+ <li class="fdx-nested-list__item">
1837
+ <a class="fdx-nested-list__link" href="#">
1838
+ <div class="fdx-nested-list__link-container">
1839
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--lead"></i>
1840
+ <span class="fdx-nested-list__title">Neque porro quisquam</span>
1841
+ </div>
1842
+ </a>
1843
+ </li>
1844
+ <li class="fdx-nested-list__item">
1845
+ <a class="fdx-nested-list__link" href="#">
1846
+ <div class="fdx-nested-list__link-container">
1847
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--notes"></i>
1848
+ <span class="fdx-nested-list__title">Excepteur sint occaecat cupidatat</span>
1849
+ </div>
1850
+ </a>
1851
+ </li>
1852
+ <li class="fdx-nested-list__item">
1853
+ <a class="fdx-nested-list__link" href="#">
1854
+ <div class="fdx-nested-list__link-container">
1855
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--map"></i>
1856
+ <span class="fdx-nested-list__title">Neque porro quisquam</span>
1857
+ </div>
1858
+ </a>
1859
+ </li>
1860
+ <li class="fdx-nested-list__item">
1861
+ <a class="fdx-nested-list__link" href="#">
1862
+ <div class="fdx-nested-list__link-container">
1863
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--log"></i>
1864
+ <span class="fdx-nested-list__title">Ut enim ad minima veniam</span>
1865
+ </div>
1866
+ </a>
1867
+ </li>
1868
+ <li class="fdx-nested-list__item">
1869
+ <a class="fdx-nested-list__link" href="#">
1870
+ <div class="fdx-nested-list__link-container">
1871
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--phone"></i>
1872
+ <span class="fdx-nested-list__title">Excepteur sint occaecat cupidatat</span>
1873
+ </div>
1874
+ </a>
1875
+ </li>
1876
+ <li class="fdx-nested-list__item">
1877
+ <a class="fdx-nested-list__link" href="#">
1878
+ <div class="fdx-nested-list__link-container">
1879
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--product"></i>
1880
+ <span class="fdx-nested-list__title">Ut enim ad minima veniam</span>
1881
+ </div>
1882
+ </a>
1883
+ </li>
1884
+ </ul>
1885
+ </nav>
1886
+ <nav class="fdx-side-nav__utility" aria-label="Utility Menu">
1887
+ <ul class="fdx-nested-list level-1">
1888
+ <li class="fdx-nested-list__item">
1889
+ <a class="fdx-nested-list__link" href="#">
1890
+ <div class="fdx-nested-list__link-container">
1891
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--compare"></i>
1892
+ <span class="fdx-nested-list__title">Duis aute irure dolor </span>
1893
+ </div>
1894
+ </a>
1895
+ </li>
1896
+ <li class="fdx-nested-list__item">
1897
+ <a class="fdx-nested-list__link" href="#">
1898
+ <div class="fdx-nested-list__link-container">
1899
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
1900
+ <span class="fdx-nested-list__title">Neque porro quisquam</span>
1901
+ </div>
1902
+ </a>
1903
+ </li>
1904
+ </ul>
1905
+ </nav>
1906
+ </div>
1907
+
1908
+ <div class="fdx-side-nav fdx-side-nav--single-line">
1909
+ <nav class="fdx-side-nav__main-navigation" aria-label="Main Menu">
1910
+ <ul class="fdx-nested-list level-1">
1911
+ <li class="fdx-nested-list__item fdx-nested-list__item--group">
1912
+ <span class="fdx-nested-list__title">Group Header</span>
1913
+ </li>
1914
+ <li class="fdx-nested-list__item">
1915
+ <a class="fdx-nested-list__link" href="#">
1916
+ <div class="fdx-nested-list__link-container">
1917
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--home"></i>
1918
+ <span class="fdx-nested-list__title">Overview</span>
1919
+ </div>
1920
+ </a>
1921
+ </li>
1922
+ <li class="fdx-nested-list__item">
1923
+ <a class="fdx-nested-list__link is-selected" href="#">
1924
+ <div class="fdx-nested-list__link-container">
1925
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--calendar"></i>
1926
+ <span class="fdx-nested-list__title"
1927
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit</span
1928
+ >
1929
+ </div>
1930
+ </a>
1931
+ </li>
1932
+ <li class="fdx-nested-list__item">
1933
+ <a class="fdx-nested-list__link" href="#">
1934
+ <div class="fdx-nested-list__link-container">
1935
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--employee"></i>
1936
+ <span class="fdx-nested-list__title">Sed do eiusmod tempor incididunt ut labore</span>
1937
+ </div>
1938
+ </a>
1939
+ </li>
1940
+ <li class="fdx-nested-list__item">
1941
+ <a class="fdx-nested-list__link" href="#">
1942
+ <div class="fdx-nested-list__link-container">
1943
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
1944
+ <span class="fdx-nested-list__title">Nemo enim ipsam</span>
1945
+ </div>
1946
+ </a>
1947
+ </li>
1948
+ <li class="fdx-nested-list__item fdx-nested-list__item--group">
1949
+ <span class="fdx-nested-list__title">Group Header</span>
1950
+ </li>
1951
+ <li class="fdx-nested-list__item">
1952
+ <a class="fdx-nested-list__link" href="#">
1953
+ <div class="fdx-nested-list__link-container">
1954
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--lightbulb"></i>
1955
+ <span class="fdx-nested-list__title">Neque porro quisquam est, qui dolorem ipsum</span>
1956
+ </div>
1957
+ </a>
1958
+ </li>
1959
+ <li class="fdx-nested-list__item">
1960
+ <a class="fdx-nested-list__link" href="#">
1961
+ <div class="fdx-nested-list__link-container">
1962
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--history"></i>
1963
+ <span class="fdx-nested-list__title">Quis autem vel eum iure</span>
1964
+ </div>
1965
+ </a>
1966
+ </li>
1967
+ <li class="fdx-nested-list__item">
1968
+ <a class="fdx-nested-list__link" href="#">
1969
+ <div class="fdx-nested-list__link-container">
1970
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--future"></i>
1971
+ <span class="fdx-nested-list__title">Excepteur sint occaecat cupidatat</span>
1972
+ </div>
1973
+ </a>
1974
+ </li>
1975
+ <li class="fdx-nested-list__item">
1976
+ <a class="fdx-nested-list__link" href="#">
1977
+ <div class="fdx-nested-list__link-container">
1978
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--activities"></i>
1979
+ <span class="fdx-nested-list__title">Ut enim ad minima veniam</span>
1980
+ </div>
1981
+ </a>
1982
+ </li>
1983
+ <li class="fdx-nested-list__item">
1984
+ <a class="fdx-nested-list__link" href="#">
1985
+ <div class="fdx-nested-list__link-container">
1986
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--lead"></i>
1987
+ <span class="fdx-nested-list__title">Neque porro quisquam</span>
1988
+ </div>
1989
+ </a>
1990
+ </li>
1991
+ <li class="fdx-nested-list__item">
1992
+ <a class="fdx-nested-list__link" href="#">
1993
+ <div class="fdx-nested-list__link-container">
1994
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--notes"></i>
1995
+ <span class="fdx-nested-list__title">Excepteur sint occaecat cupidatat</span>
1996
+ </div>
1997
+ </a>
1998
+ </li>
1999
+ <li class="fdx-nested-list__item">
2000
+ <a class="fdx-nested-list__link" href="#">
2001
+ <div class="fdx-nested-list__link-container">
2002
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--map"></i>
2003
+ <span class="fdx-nested-list__title">Neque porro quisquam</span>
2004
+ </div>
2005
+ </a>
2006
+ </li>
2007
+ <li class="fdx-nested-list__item">
2008
+ <a class="fdx-nested-list__link" href="#">
2009
+ <div class="fdx-nested-list__link-container">
2010
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--log"></i>
2011
+ <span class="fdx-nested-list__title">Ut enim ad minima veniam</span>
2012
+ </div>
2013
+ </a>
2014
+ </li>
2015
+ <li class="fdx-nested-list__item">
2016
+ <a class="fdx-nested-list__link" href="#">
2017
+ <div class="fdx-nested-list__link-container">
2018
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--phone"></i>
2019
+ <span class="fdx-nested-list__title">Excepteur sint occaecat cupidatat</span>
2020
+ </div>
2021
+ </a>
2022
+ </li>
2023
+ <li class="fdx-nested-list__item">
2024
+ <a class="fdx-nested-list__link" href="#">
2025
+ <div class="fdx-nested-list__link-container">
2026
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--product"></i>
2027
+ <span class="fdx-nested-list__title">Ut enim ad minima veniam</span>
2028
+ </div>
2029
+ </a>
2030
+ </li>
2031
+ </ul>
2032
+ </nav>
2033
+ <nav class="fdx-side-nav__utility" aria-label="Utility Menu">
2034
+ <ul class="fdx-nested-list level-1">
2035
+ <li class="fdx-nested-list__item">
2036
+ <a class="fdx-nested-list__link" href="#">
2037
+ <div class="fdx-nested-list__link-container">
2038
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--compare"></i>
2039
+ <span class="fdx-nested-list__title">Duis aute irure dolor </span>
2040
+ </div>
2041
+ </a>
2042
+ </li>
2043
+ <li class="fdx-nested-list__item">
2044
+ <a class="fdx-nested-list__link" href="#">
2045
+ <div class="fdx-nested-list__link-container">
2046
+ <i role="presentation" class="fdx-nested-list__icon sap-icon--chain-link"></i>
2047
+ <span class="fdx-nested-list__title">Neque porro quisquam</span>
2048
+ </div>
2049
+ </a>
2050
+ </li>
2051
+ </ul>
2052
+ </nav>
2053
+ </div>
2054
+ </div>
2055
+ ```
2056
+
2057
+ ## Accessibility
2058
+
2059
+ - Use semantic HTML elements where appropriate
2060
+ - Include proper ARIA attributes for interactive elements
2061
+ - Ensure keyboard navigation support
2062
+ - Provide adequate color contrast
2063
+
2064
+ ## Source
2065
+
2066
+ This documentation was automatically generated from: `packages/cx/stories/Components/cx-side-navigation/cx-side-navigation.stories.js`
2067
+
2068
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).