@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/side-nav.md ADDED
@@ -0,0 +1,1562 @@
1
+ ---
2
+ component: fd-side-nav
3
+ title: Components/Side Navigation
4
+ category: Components
5
+ selector: fd-side-nav
6
+ cssFile: side-nav.css
7
+ sourcePath: packages/styles/stories/Components/side-navigation/side-navigation.stories.js
8
+ tags: []
9
+ dependencies: ["button","icon","navigation-list","popover","side-nav"]
10
+ relatedComponents: ["button","icon","navigation-list","popover","side-nav"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.594Z
13
+ ---
14
+
15
+ # Components/Side Navigation
16
+
17
+ The Side Navigation is an additional option to add a navigation to an application. Same as the vertical navigation it offers the user easy access to multiple pages per space. Side Navigation is triggered by the Menu Icon in Shellbar and can be hidden, collapsed or expanded.
18
+
19
+ ## Anatomy
20
+ The Side Navigation consists of the following elements: <br>
21
+ <ul>
22
+ <li>**<code>.fd-side-nav</code>**: navigation container. **<code>.is-collapsed</code>** class is added for collapsed state.</li>
23
+ <li>**<code>.fd-side-nav\\_\\_container</code>** with modifier classes **<code>.fd-side-nav\\_\\_container--top</code>** for the main navigation and **<code>.fd-side-nav\\_\\_container--bottom</code>** for the footer navigation.</li>
24
+ <li>**<code>.fd-side-nav\\_\\_separator</code>** separator between the main and footer area. </li>
25
+ </ul>
26
+
27
+
28
+ The List structure is based on **Navigation List**
29
+ <ul>
30
+ <li>
31
+ **<code>.fd-navigation-list</code>** with modifier classes **<code>.level-1</code>** and **<code>.level-2</code>**
32
+ </li>
33
+ <li>
34
+ **<code>.fd-navigation-list\\_\\_item</code>**
35
+ <ul>
36
+ <li>**<code>.fd-navigation-list\\_\\_item--group</code>**</li>
37
+ <li>**<code>.fd-navigation-list\\_\\_item--quick-create</code>** </li>
38
+ <li>**<code>.fd-navigation-list\\_\\_item--two-click</code>**</li>
39
+ </ul>
40
+ </li>
41
+ <li>**<code>.fd-navigation-list\\_\\_content</code>**</li>
42
+ <li>**<code>.fd-navigation-list\\_\\_content-container</code>**</li>
43
+ <li>**<code>.fd-navigation-list\\_\\_icon</code>**</li>
44
+ <li>**<code>.fd-navigation-list\\_\\_text</code>**</li>
45
+ <li>**<code>.fd-navigation-list\\_\\_navigation-indicator</code>**</li>
46
+ <li>**<code>.fd-navigation-list\\_\\_indication-arrow</code>**</li>
47
+ </ul>
48
+
49
+ ## Dependencies
50
+
51
+ This component depends on the following CSS files:
52
+
53
+ - `button.css`
54
+ - `icon.css`
55
+ - `navigation-list.css`
56
+ - `popover.css`
57
+ - `side-nav.css`
58
+
59
+ ## Installation
60
+
61
+ ```bash
62
+ npm install fundamental-styles
63
+ ```
64
+
65
+ ```html
66
+ <!-- Include theme -->
67
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
68
+
69
+ <!-- Include component CSS -->
70
+ <link href="node_modules/fundamental-styles/dist/side-nav.css" rel="stylesheet">
71
+
72
+ <!-- Include dependencies -->
73
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
74
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
75
+ <link href="node_modules/fundamental-styles/dist/navigation-list.css" rel="stylesheet">
76
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
77
+ <link href="node_modules/fundamental-styles/dist/side-nav.css" rel="stylesheet">
78
+ ```
79
+
80
+ ## Basic Usage
81
+
82
+ ```html
83
+ <nav class="fd-side-nav" aria-roledescription="Main Navigation" id="fd-side-nav">
84
+ <div class="fd-side-nav__container fd-side-nav__container--top">
85
+ <ul class="fd-navigation-list level-1" role="tree" aria-roledescription="Navigation List Tree">
86
+ <li class="fd-navigation-list__item" role="none">
87
+ <a class="fd-navigation-list__content is-selected" role="treeitem" tabindex="0">
88
+ <div class="fd-navigation-list__content-container">
89
+ <span class="fd-navigation-list__icon">
90
+ <i class=" sap-icon--home" role="presentation"></i>
91
+ </span>
92
+ <span class="fd-navigation-list__text">Home</span>
93
+ </a>
94
+ </li>
95
+
96
+ <li class="fd-navigation-list__item" role="none">
97
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
98
+ <div class="fd-navigation-list__content-container">
99
+ <span class="fd-navigation-list__icon">
100
+ <i class="sap-icon--unfavorite" role="presentation"></i>
101
+ </span>
102
+ <span class="fd-navigation-list__text">Favorites</span>
103
+ </div>
104
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
105
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
106
+ </div>
107
+ </a>
108
+ <ul class="fd-navigation-list level-2" role="group">
109
+ <li class="fd-navigation-list__item" role="none">
110
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
111
+ <div class="fd-navigation-list__content-container">
112
+ <span class="fd-navigation-list__text">My Accounts</span>
113
+ </div>
114
+ </a>
115
+ </li>
116
+ <li class="fd-navigation-list__item" role="none">
117
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
118
+ <div class="fd-navigation-list__content-container">
119
+ <span class="fd-navigation-list__text">My Orders</span>
120
+ </div>
121
+ </a>
122
+ </li>
123
+ </ul>
124
+ </li>
125
+
126
+ <li class="fd-navigation-list__item" role="none">
127
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
128
+ <div class="fd-navigation-list__content-container">
129
+ <span class="fd-navigation-list__icon">
130
+ <i class="sap-icon--account" role="presentation"></i>
131
+ </span>
132
+ <span class="fd-navigation-list__text">Customer Management</span>
133
+ </div>
134
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
135
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
136
+ </div>
137
+ </a>
138
+ <ul class="fd-navigation-list level-2" role="group">
139
+ <li class="fd-navigation-list__item" role="none">
140
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
141
+ <div class="fd-navigation-list__content-container">
142
+ <span class="fd-navigation-list__text">Contacts</span>
143
+ </div>
144
+ </a>
145
+ </li>
146
+ <li class="fd-navigation-list__item" role="none">
147
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
148
+ <div class="fd-navigation-list__content-container">
149
+ <span class="fd-navigation-list__text">Companies</span>
150
+ </div>
151
+ </a>
152
+ </li>
153
+ <li class="fd-navigation-list__item" role="none">
154
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
155
+ <div class="fd-navigation-list__content-container">
156
+ <span class="fd-navigation-list__text">Partners</span>
157
+ </div>
158
+ </a>
159
+ </li>
160
+ </ul>
161
+ </li>
162
+
163
+ <li class="fd-navigation-list__item" role="none">
164
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
165
+ <div class="fd-navigation-list__content-container">
166
+ <span class="fd-navigation-list__icon">
167
+ <i class="sap-icon--crm-sales" role="presentation"></i>
168
+ </span>
169
+ <span class="fd-navigation-list__text">Sales</span>
170
+ </div>
171
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
172
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
173
+ </div>
174
+ </a>
175
+ <ul class="fd-navigation-list level-2" role="group">
176
+ <li class="fd-navigation-list__item" role="none">
177
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
178
+ <div class="fd-navigation-list__content-container">
179
+ <span class="fd-navigation-list__text">Leads</span>
180
+ </div>
181
+ </a>
182
+ </li>
183
+ <li class="fd-navigation-list__item" role="none">
184
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
185
+ <div class="fd-navigation-list__content-container">
186
+ <span class="fd-navigation-list__text">Opportunities</span>
187
+ </div>
188
+ </a>
189
+ </li>
190
+ <li class="fd-navigation-list__item" role="none">
191
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
192
+ <div class="fd-navigation-list__content-container">
193
+ <span class="fd-navigation-list__text">Quotes</span>
194
+ </div>
195
+ </a>
196
+ </li>
197
+ <li class="fd-navigation-list__item" role="none">
198
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
199
+ <div class="fd-navigation-list__content-container">
200
+ <span class="fd-navigation-list__text">Orders</span>
201
+ </div>
202
+ </a>
203
+ </li>
204
+ <li class="fd-navigation-list__item" role="none">
205
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
206
+ <div class="fd-navigation-list__content-container">
207
+ <span class="fd-navigation-list__text">Invoices</span>
208
+ </div>
209
+ </a>
210
+ </li>
211
+ </ul>
212
+ </li>
213
+
214
+ <li class="fd-navigation-list__item" role="none">
215
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
216
+ <div class="fd-navigation-list__content-container">
217
+ <span class="fd-navigation-list__icon">
218
+ <i class="sap-icon--customer-view" role="presentation"></i>
219
+ </span>
220
+ <span class="fd-navigation-list__text">Products</span>
221
+ </div>
222
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
223
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
224
+ </div>
225
+ </a>
226
+ <ul class="fd-navigation-list level-2" role="group">
227
+ <li class="fd-navigation-list__item" role="none">
228
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
229
+ <div class="fd-navigation-list__content-container">
230
+ <span class="fd-navigation-list__text">Product Catalog</span>
231
+ </div>
232
+ </a>
233
+ </li>
234
+ <li class="fd-navigation-list__item" role="none">
235
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
236
+ <div class="fd-navigation-list__content-container">
237
+ <span class="fd-navigation-list__text">Pricing</span>
238
+ </div>
239
+ </a>
240
+ </li>
241
+ <li class="fd-navigation-list__item" role="none">
242
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
243
+ <div class="fd-navigation-list__content-container">
244
+ <span class="fd-navigation-list__text">Inventory Management</span>
245
+ </div>
246
+ </a>
247
+ </li>
248
+ </ul>
249
+ </li>
250
+
251
+ <li class="fd-navigation-list__item" role="none">
252
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
253
+ <div class="fd-navigation-list__content-container">
254
+ <span class="fd-navigation-list__icon">
255
+ <i class="sap-icon--marketing-campaign" role="presentation"></i>
256
+ </span>
257
+ <span class="fd-navigation-list__text">Marketing</span>
258
+ </div>
259
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
260
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
261
+ </div>
262
+ </a>
263
+ <ul class="fd-navigation-list level-2" role="group">
264
+ <li class="fd-navigation-list__item" role="none">
265
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
266
+ <div class="fd-navigation-list__content-container">
267
+ <span class="fd-navigation-list__text">Campaigns</span>
268
+ </div>
269
+ </a>
270
+ </li>
271
+ <li class="fd-navigation-list__item" role="none">
272
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
273
+ <div class="fd-navigation-list__content-container">
274
+ <span class="fd-navigation-list__text">E-Mail Marketing</span>
275
+ </div>
276
+ </a>
277
+ </li>
278
+ <li class="fd-navigation-list__item" role="none">
279
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
280
+ <div class="fd-navigation-list__content-container">
281
+ <span class="fd-navigation-list__text">Marketing Automation</span>
282
+ </div>
283
+ </a>
284
+ </li>
285
+ </ul>
286
+ </li>
287
+
288
+ <li class="fd-navigation-list__item" role="none">
289
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
290
+ <div class="fd-navigation-list__content-container">
291
+ <span class="fd-navigation-list__icon">
292
+ <i class="sap-icon--manager-insight" role="presentation"></i>
293
+ </span>
294
+ <span class="fd-navigation-list__text">Reports</span>
295
+ </div>
296
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
297
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
298
+ </div>
299
+ </a>
300
+ <ul class="fd-navigation-list level-2" role="group">
301
+ <li class="fd-navigation-list__item" role="none">
302
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
303
+ <div class="fd-navigation-list__content-container">
304
+ <span class="fd-navigation-list__text">Sales Reports</span>
305
+ </div>
306
+ </a>
307
+ </li>
308
+ <li class="fd-navigation-list__item" role="none">
309
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
310
+ <div class="fd-navigation-list__content-container">
311
+ <span class="fd-navigation-list__text">Customer Reports</span>
312
+ </div>
313
+ </a>
314
+ </li>
315
+ <li class="fd-navigation-list__item" role="none">
316
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
317
+ <div class="fd-navigation-list__content-container">
318
+ <span class="fd-navigation-list__text">Marketing Reports</span>
319
+ </div>
320
+ </a>
321
+ </li>
322
+ </ul>
323
+ </li>
324
+
325
+ </ul>
326
+ </div>
327
+
328
+ <div class="fd-side-nav__container fd-side-nav__container--bottom">
329
+ <ul class="fd-navigation-list level-1" role="tree" tabindex="-1" aria-roledescription="Navigation List Tree">
330
+ <li class="fd-navigation-list__item fd-navigation-list__item--quick-create" role="none">
331
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
332
+ <div class="fd-navigation-list__content-container">
333
+ <span class="fd-navigation-list__icon">
334
+ <i class=" sap-icon--add" role="presentation"></i>
335
+ </span>
336
+ <span class="fd-navigation-list__text">Quick Create</span>
337
+ </div>
338
+ </a>
339
+ </li>
340
+
341
+ <li class="fd-navigation-list__item" role="none">
342
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
343
+ <div class="fd-navigation-list__content-container">
344
+ <span class="fd-navigation-list__icon">
345
+ <i class=" sap-icon--settings" role="presentation"></i>
346
+ </span>
347
+ <span class="fd-navigation-list__text">Product Settings</span>
348
+ </div>
349
+ </a>
350
+ </li>
351
+ </ul>
352
+ </div>
353
+ </nav>
354
+ </div>
355
+ ```
356
+
357
+ ## States
358
+
359
+ | Class | Description |
360
+ |-------|-------------|
361
+ | `is-collapsed` | Collapsed state |
362
+ | `is-selected` | Selected state |
363
+
364
+ ## BEM Elements
365
+
366
+ This component uses the following BEM elements:
367
+
368
+ - `fd-side-nav__container`
369
+ - `fd-side-nav__container--bottom`
370
+ - `fd-side-nav__container--top`
371
+ - `fd-side-nav__separator`
372
+
373
+ ## Related Components
374
+
375
+ This component works with or depends on:
376
+
377
+ - `button`
378
+ - `icon`
379
+ - `navigation-list`
380
+ - `popover`
381
+ - `side-nav`
382
+
383
+ ## Design Tokens
384
+
385
+ Key CSS variables used by this component:
386
+
387
+ - `--bottom`
388
+ - `--fdSideNav_Overflow`
389
+ - `--fdSideNav_Width`
390
+ - `--sapList_Background`
391
+ - `--sapToolbar_SeparatorColor`
392
+ - `--top`
393
+
394
+ ## Examples
395
+
396
+ ### Expanded State, Defaut (fixed) Style
397
+
398
+ ```html
399
+ <nav class="fd-side-nav" aria-roledescription="Main Navigation" id="fd-side-nav">
400
+ <div class="fd-side-nav__container fd-side-nav__container--top">
401
+ <ul class="fd-navigation-list level-1" role="tree" aria-roledescription="Navigation List Tree">
402
+ <li class="fd-navigation-list__item" role="none">
403
+ <a class="fd-navigation-list__content is-selected" role="treeitem" tabindex="0">
404
+ <div class="fd-navigation-list__content-container">
405
+ <span class="fd-navigation-list__icon">
406
+ <i class=" sap-icon--home" role="presentation"></i>
407
+ </span>
408
+ <span class="fd-navigation-list__text">Home</span>
409
+ </a>
410
+ </li>
411
+
412
+ <li class="fd-navigation-list__item" role="none">
413
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
414
+ <div class="fd-navigation-list__content-container">
415
+ <span class="fd-navigation-list__icon">
416
+ <i class="sap-icon--unfavorite" role="presentation"></i>
417
+ </span>
418
+ <span class="fd-navigation-list__text">Favorites</span>
419
+ </div>
420
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
421
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
422
+ </div>
423
+ </a>
424
+ <ul class="fd-navigation-list level-2" role="group">
425
+ <li class="fd-navigation-list__item" role="none">
426
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
427
+ <div class="fd-navigation-list__content-container">
428
+ <span class="fd-navigation-list__text">My Accounts</span>
429
+ </div>
430
+ </a>
431
+ </li>
432
+ <li class="fd-navigation-list__item" role="none">
433
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
434
+ <div class="fd-navigation-list__content-container">
435
+ <span class="fd-navigation-list__text">My Orders</span>
436
+ </div>
437
+ </a>
438
+ </li>
439
+ </ul>
440
+ </li>
441
+
442
+ <li class="fd-navigation-list__item" role="none">
443
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
444
+ <div class="fd-navigation-list__content-container">
445
+ <span class="fd-navigation-list__icon">
446
+ <i class="sap-icon--account" role="presentation"></i>
447
+ </span>
448
+ <span class="fd-navigation-list__text">Customer Management</span>
449
+ </div>
450
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
451
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
452
+ </div>
453
+ </a>
454
+ <ul class="fd-navigation-list level-2" role="group">
455
+ <li class="fd-navigation-list__item" role="none">
456
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
457
+ <div class="fd-navigation-list__content-container">
458
+ <span class="fd-navigation-list__text">Contacts</span>
459
+ </div>
460
+ </a>
461
+ </li>
462
+ <li class="fd-navigation-list__item" role="none">
463
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
464
+ <div class="fd-navigation-list__content-container">
465
+ <span class="fd-navigation-list__text">Companies</span>
466
+ </div>
467
+ </a>
468
+ </li>
469
+ <li class="fd-navigation-list__item" role="none">
470
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
471
+ <div class="fd-navigation-list__content-container">
472
+ <span class="fd-navigation-list__text">Partners</span>
473
+ </div>
474
+ </a>
475
+ </li>
476
+ </ul>
477
+ </li>
478
+
479
+ <li class="fd-navigation-list__item" role="none">
480
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
481
+ <div class="fd-navigation-list__content-container">
482
+ <span class="fd-navigation-list__icon">
483
+ <i class="sap-icon--crm-sales" role="presentation"></i>
484
+ </span>
485
+ <span class="fd-navigation-list__text">Sales</span>
486
+ </div>
487
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
488
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
489
+ </div>
490
+ </a>
491
+ <ul class="fd-navigation-list level-2" role="group">
492
+ <li class="fd-navigation-list__item" role="none">
493
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
494
+ <div class="fd-navigation-list__content-container">
495
+ <span class="fd-navigation-list__text">Leads</span>
496
+ </div>
497
+ </a>
498
+ </li>
499
+ <li class="fd-navigation-list__item" role="none">
500
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
501
+ <div class="fd-navigation-list__content-container">
502
+ <span class="fd-navigation-list__text">Opportunities</span>
503
+ </div>
504
+ </a>
505
+ </li>
506
+ <li class="fd-navigation-list__item" role="none">
507
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
508
+ <div class="fd-navigation-list__content-container">
509
+ <span class="fd-navigation-list__text">Quotes</span>
510
+ </div>
511
+ </a>
512
+ </li>
513
+ <li class="fd-navigation-list__item" role="none">
514
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
515
+ <div class="fd-navigation-list__content-container">
516
+ <span class="fd-navigation-list__text">Orders</span>
517
+ </div>
518
+ </a>
519
+ </li>
520
+ <li class="fd-navigation-list__item" role="none">
521
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
522
+ <div class="fd-navigation-list__content-container">
523
+ <span class="fd-navigation-list__text">Invoices</span>
524
+ </div>
525
+ </a>
526
+ </li>
527
+ </ul>
528
+ </li>
529
+
530
+ <li class="fd-navigation-list__item" role="none">
531
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
532
+ <div class="fd-navigation-list__content-container">
533
+ <span class="fd-navigation-list__icon">
534
+ <i class="sap-icon--customer-view" role="presentation"></i>
535
+ </span>
536
+ <span class="fd-navigation-list__text">Products</span>
537
+ </div>
538
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
539
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
540
+ </div>
541
+ </a>
542
+ <ul class="fd-navigation-list level-2" role="group">
543
+ <li class="fd-navigation-list__item" role="none">
544
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
545
+ <div class="fd-navigation-list__content-container">
546
+ <span class="fd-navigation-list__text">Product Catalog</span>
547
+ </div>
548
+ </a>
549
+ </li>
550
+ <li class="fd-navigation-list__item" role="none">
551
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
552
+ <div class="fd-navigation-list__content-container">
553
+ <span class="fd-navigation-list__text">Pricing</span>
554
+ </div>
555
+ </a>
556
+ </li>
557
+ <li class="fd-navigation-list__item" role="none">
558
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
559
+ <div class="fd-navigation-list__content-container">
560
+ <span class="fd-navigation-list__text">Inventory Management</span>
561
+ </div>
562
+ </a>
563
+ </li>
564
+ </ul>
565
+ </li>
566
+
567
+ <li class="fd-navigation-list__item" role="none">
568
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
569
+ <div class="fd-navigation-list__content-container">
570
+ <span class="fd-navigation-list__icon">
571
+ <i class="sap-icon--marketing-campaign" role="presentation"></i>
572
+ </span>
573
+ <span class="fd-navigation-list__text">Marketing</span>
574
+ </div>
575
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
576
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
577
+ </div>
578
+ </a>
579
+ <ul class="fd-navigation-list level-2" role="group">
580
+ <li class="fd-navigation-list__item" role="none">
581
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
582
+ <div class="fd-navigation-list__content-container">
583
+ <span class="fd-navigation-list__text">Campaigns</span>
584
+ </div>
585
+ </a>
586
+ </li>
587
+ <li class="fd-navigation-list__item" role="none">
588
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
589
+ <div class="fd-navigation-list__content-container">
590
+ <span class="fd-navigation-list__text">E-Mail Marketing</span>
591
+ </div>
592
+ </a>
593
+ </li>
594
+ <li class="fd-navigation-list__item" role="none">
595
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
596
+ <div class="fd-navigation-list__content-container">
597
+ <span class="fd-navigation-list__text">Marketing Automation</span>
598
+ </div>
599
+ </a>
600
+ </li>
601
+ </ul>
602
+ </li>
603
+
604
+ <li class="fd-navigation-list__item" role="none">
605
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
606
+ <div class="fd-navigation-list__content-container">
607
+ <span class="fd-navigation-list__icon">
608
+ <i class="sap-icon--manager-insight" role="presentation"></i>
609
+ </span>
610
+ <span class="fd-navigation-list__text">Reports</span>
611
+ </div>
612
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
613
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
614
+ </div>
615
+ </a>
616
+ <ul class="fd-navigation-list level-2" role="group">
617
+ <li class="fd-navigation-list__item" role="none">
618
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
619
+ <div class="fd-navigation-list__content-container">
620
+ <span class="fd-navigation-list__text">Sales Reports</span>
621
+ </div>
622
+ </a>
623
+ </li>
624
+ <li class="fd-navigation-list__item" role="none">
625
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
626
+ <div class="fd-navigation-list__content-container">
627
+ <span class="fd-navigation-list__text">Customer Reports</span>
628
+ </div>
629
+ </a>
630
+ </li>
631
+ <li class="fd-navigation-list__item" role="none">
632
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
633
+ <div class="fd-navigation-list__content-container">
634
+ <span class="fd-navigation-list__text">Marketing Reports</span>
635
+ </div>
636
+ </a>
637
+ </li>
638
+ </ul>
639
+ </li>
640
+
641
+ </ul>
642
+ </div>
643
+
644
+ <div class="fd-side-nav__container fd-side-nav__container--bottom">
645
+ <ul class="fd-navigation-list level-1" role="tree" tabindex="-1" aria-roledescription="Navigation List Tree">
646
+ <li class="fd-navigation-list__item fd-navigation-list__item--quick-create" role="none">
647
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
648
+ <div class="fd-navigation-list__content-container">
649
+ <span class="fd-navigation-list__icon">
650
+ <i class=" sap-icon--add" role="presentation"></i>
651
+ </span>
652
+ <span class="fd-navigation-list__text">Quick Create</span>
653
+ </div>
654
+ </a>
655
+ </li>
656
+
657
+ <li class="fd-navigation-list__item" role="none">
658
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
659
+ <div class="fd-navigation-list__content-container">
660
+ <span class="fd-navigation-list__icon">
661
+ <i class=" sap-icon--settings" role="presentation"></i>
662
+ </span>
663
+ <span class="fd-navigation-list__text">Product Settings</span>
664
+ </div>
665
+ </a>
666
+ </li>
667
+ </ul>
668
+ </div>
669
+ </nav>
670
+ </div>
671
+ ```
672
+
673
+ ### Expanded State, Defaut (fixed) Style with Additional Features (Grouping, Two-click items, External Navigation)
674
+
675
+ ```html
676
+ <nav class="fd-side-nav" aria-roledescription="Main Navigation" id="fd-side-nav">
677
+ <div class="fd-side-nav__container fd-side-nav__container--top">
678
+ <ul class="fd-navigation-list level-1" role="tree" aria-roledescription="Navigation List Tree">
679
+ <li class="fd-navigation-list__item" role="none">
680
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
681
+ <div class="fd-navigation-list__content-container">
682
+ <span class="fd-navigation-list__icon">
683
+ <i class=" sap-icon--home" role="presentation"></i>
684
+ </span>
685
+ <span class="fd-navigation-list__text">Home</span>
686
+ </a>
687
+ </li>
688
+ <li class="fd-navigation-list__item" role="none">
689
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
690
+ <div class="fd-navigation-list__content-container">
691
+ <span class="fd-navigation-list__icon">
692
+ <i class=" sap-icon--unfavorite" role="presentation"></i>
693
+ </span>
694
+ <span class="fd-navigation-list__text">Favorites</span>
695
+ </div>
696
+ </a>
697
+ </li>
698
+
699
+ <li class="fd-navigation-list__item fd-navigation-list__item--group" role="none">
700
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
701
+ <div class="fd-navigation-list__content-container">
702
+ <span class="fd-navigation-list__text">Cusomers</span>
703
+ </div>
704
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
705
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
706
+ </div>
707
+ </a>
708
+ <ul class="fd-navigation-list level-1" role="group">
709
+ <li class="fd-navigation-list__item" role="none">
710
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
711
+ <div class="fd-navigation-list__content-container">
712
+ <span class="fd-navigation-list__icon">
713
+ <i class=" sap-icon--account" role="presentation"></i>
714
+ </span>
715
+ <span class="fd-navigation-list__text">Customer Management</span>
716
+ </div>
717
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
718
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
719
+ </div>
720
+ </a>
721
+ <ul class="fd-navigation-list level-2" role="group">
722
+ <li class="fd-navigation-list__item" role="none">
723
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
724
+ <div class="fd-navigation-list__content-container">
725
+ <span class="fd-navigation-list__text">Contacts</span>
726
+ </div>
727
+ </a>
728
+ </li>
729
+ <li class="fd-navigation-list__item" role="none">
730
+ <a class="fd-navigation-list__content is-selected" role="treeitem" tabindex="0">
731
+ <div class="fd-navigation-list__content-container">
732
+ <span class="fd-navigation-list__text">Companies</span>
733
+ </div>
734
+ </a>
735
+ </li>
736
+ <li class="fd-navigation-list__item" role="none">
737
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
738
+ <div class="fd-navigation-list__content-container">
739
+ <span class="fd-navigation-list__text">Partners</span>
740
+ </div>
741
+ <div class="fd-navigation-list__indication-arrow" role="presentation" aria-hidden="true">
742
+ <i class="sap-icon--arrow-right" role="presentation"></i>
743
+ </div>
744
+ </a>
745
+ </li>
746
+ </ul>
747
+ </li>
748
+
749
+ <li class="fd-navigation-list__item" role="none">
750
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
751
+ <div class="fd-navigation-list__content-container">
752
+ <span class="fd-navigation-list__icon">
753
+ <i class="sap-icon--crm-sales" role="presentation"></i>
754
+ </span>
755
+ <span class="fd-navigation-list__text">Sales</span>
756
+ </div>
757
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
758
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
759
+ </div>
760
+ </a>
761
+ <ul class="fd-navigation-list level-2" role="group">
762
+ <li class="fd-navigation-list__item" role="none">
763
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
764
+ <div class="fd-navigation-list__content-container">
765
+ <span class="fd-navigation-list__text">Leads</span>
766
+ </div>
767
+ </a>
768
+ </li>
769
+ <li class="fd-navigation-list__item" role="none">
770
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
771
+ <div class="fd-navigation-list__content-container">
772
+ <span class="fd-navigation-list__text">Opportunities</span>
773
+ </div>
774
+ </a>
775
+ </li>
776
+ <li class="fd-navigation-list__item" role="none">
777
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
778
+ <div class="fd-navigation-list__content-container">
779
+ <span class="fd-navigation-list__text">Quotes</span>
780
+ </div>
781
+ </a>
782
+ </li>
783
+ <li class="fd-navigation-list__item" role="none">
784
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
785
+ <div class="fd-navigation-list__content-container">
786
+ <span class="fd-navigation-list__text">Orders</span>
787
+ </div>
788
+ </a>
789
+ </li>
790
+ <li class="fd-navigation-list__item" role="none">
791
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
792
+ <div class="fd-navigation-list__content-container">
793
+ <span class="fd-navigation-list__text">Invoices</span>
794
+ </div>
795
+ </a>
796
+ </li>
797
+ </ul>
798
+ </li>
799
+
800
+ <li class="fd-navigation-list__item" role="none">
801
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
802
+ <div class="fd-navigation-list__content-container">
803
+ <span class="fd-navigation-list__icon">
804
+ <i class="sap-icon--customer-view" role="presentation"></i>
805
+ </span>
806
+ <span class="fd-navigation-list__text">Products</span>
807
+ </div>
808
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
809
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
810
+ </div>
811
+ </a>
812
+ <ul class="fd-navigation-list level-2" role="group">
813
+ <li class="fd-navigation-list__item" role="none">
814
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
815
+ <div class="fd-navigation-list__content-container">
816
+ <span class="fd-navigation-list__text">Product Catalog</span>
817
+ </div>
818
+ </a>
819
+ </li>
820
+ <li class="fd-navigation-list__item" role="none">
821
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
822
+ <div class="fd-navigation-list__content-container">
823
+ <span class="fd-navigation-list__text">Pricing</span>
824
+ </div>
825
+ </a>
826
+ </li>
827
+ <li class="fd-navigation-list__item" role="none">
828
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
829
+ <div class="fd-navigation-list__content-container">
830
+ <span class="fd-navigation-list__text">Inventory Management</span>
831
+ </div>
832
+ </a>
833
+ </li>
834
+ </ul>
835
+ </li>
836
+
837
+ <li class="fd-navigation-list__item fd-navigation-list__item--two-click" role="none">
838
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="false">
839
+ <div class="fd-navigation-list__content-container">
840
+ <span class="fd-navigation-list__icon">
841
+ <i class=" sap-icon--customer-view" role="presentation"></i>
842
+ </span>
843
+ <span class="fd-navigation-list__text">Marketing</span>
844
+ </div>
845
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
846
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
847
+ </div>
848
+ </a>
849
+ <ul class="fd-navigation-list level-2" role="group">
850
+ <li class="fd-navigation-list__item" role="none">
851
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
852
+ <div class="fd-navigation-list__content-container">
853
+ <span class="fd-navigation-list__text">Campaigns</span>
854
+ </div>
855
+ </a>
856
+ </li>
857
+ <li class="fd-navigation-list__item" role="none">
858
+ <a class="fd-navigation-list__content is-selected" role="treeitem" tabindex="0">
859
+ <div class="fd-navigation-list__content-container">
860
+ <span class="fd-navigation-list__text">E-Mail Marketing</span>
861
+ </div>
862
+ </a>
863
+ </li>
864
+ <li class="fd-navigation-list__item" role="none">
865
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
866
+ <div class="fd-navigation-list__content-container">
867
+ <span class="fd-navigation-list__text">Marketing Automation</span>
868
+ </div>
869
+ </a>
870
+ </li>
871
+ </ul>
872
+ </li>
873
+ <li class="fd-navigation-list__item" role="none">
874
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
875
+ <div class="fd-navigation-list__content-container">
876
+ <span class="fd-navigation-list__icon">
877
+ <i class=" sap-icon--manager-insight" role="presentation"></i>
878
+ </span>
879
+ <span class="fd-navigation-list__text">Reports</span>
880
+ </div>
881
+ <div class="fd-navigation-list__indication-arrow" role="presentation" aria-hidden="true">
882
+ <i class="sap-icon--arrow-right" role="presentation"></i>
883
+ </div>
884
+ </a>
885
+ </li>
886
+ </ul>
887
+ </li>
888
+
889
+ <li class="fd-navigation-list__item fd-navigation-list__item--group" role="none">
890
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="false">
891
+ <div class="fd-navigation-list__content-container">
892
+ <span class="fd-navigation-list__text">Recents</span>
893
+ </div>
894
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
895
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
896
+ </div>
897
+ </a>
898
+ <ul class="fd-navigation-list level-1" role="group">
899
+ <li class="fd-navigation-list__item" role="none">
900
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
901
+ <div class="fd-navigation-list__content-container">
902
+ <span class="fd-navigation-list__icon">
903
+ <i class=" sap-icon--palette" role="presentation"></i>
904
+ </span>
905
+ <span class="fd-navigation-list__text">Nav Item</span>
906
+ </div>
907
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
908
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
909
+ </div>
910
+ </a>
911
+ <ul class="fd-navigation-list level-2" role="group">
912
+ <li class="fd-navigation-list__item" role="none">
913
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
914
+ <div class="fd-navigation-list__content-container">
915
+ <span class="fd-navigation-list__text">Child Item</span>
916
+ </div>
917
+ </a>
918
+ </li>
919
+ <li class="fd-navigation-list__item" role="none">
920
+ <a class="fd-navigation-list__content is-selected" role="treeitem" tabindex="0">
921
+ <div class="fd-navigation-list__content-container">
922
+ <span class="fd-navigation-list__text">Child Item</span>
923
+ </div>
924
+ </a>
925
+ </li>
926
+ <li class="fd-navigation-list__item" role="none">
927
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
928
+ <div class="fd-navigation-list__content-container">
929
+ <span class="fd-navigation-list__text">Child Item</span>
930
+ </div>
931
+ </a>
932
+ </li>
933
+ </ul>
934
+ </li>
935
+ <li class="fd-navigation-list__item" role="none">
936
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
937
+ <div class="fd-navigation-list__content-container">
938
+ <span class="fd-navigation-list__icon">
939
+ <i class=" sap-icon--sales-notification" role="presentation"></i>
940
+ </span>
941
+ <span class="fd-navigation-list__text">Nav Item</span>
942
+ </div>
943
+ </a>
944
+ </li>
945
+ <li class="fd-navigation-list__item" role="none">
946
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
947
+ <div class="fd-navigation-list__content-container">
948
+ <span class="fd-navigation-list__icon">
949
+ <i class=" sap-icon--nurse" role="presentation"></i>
950
+ </span>
951
+ <span class="fd-navigation-list__text">Nav Item</span>
952
+ </div>
953
+ </a>
954
+ </li>
955
+ <li class="fd-navigation-list__item" role="none">
956
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
957
+ <div class="fd-navigation-list__content-container">
958
+ <span class="fd-navigation-list__icon">
959
+ <i class=" sap-icon--travel-request" role="presentation"></i>
960
+ </span>
961
+ <span class="fd-navigation-list__text">Nav Item</span>
962
+ </div>
963
+ </a>
964
+ </li>
965
+ </ul>
966
+ </li>
967
+ </ul>
968
+ </div>
969
+
970
+ <div class="fd-side-nav__container fd-side-nav__container--bottom">
971
+ <ul class="fd-navigation-list level-1" role="tree" tabindex="-1" aria-roledescription="Navigation List Tree">
972
+ <li class="fd-navigation-list__item fd-navigation-list__item--quick-create" role="none">
973
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
974
+ <div class="fd-navigation-list__content-container">
975
+ <span class="fd-navigation-list__icon">
976
+ <i class=" sap-icon--add" role="presentation"></i>
977
+ </span>
978
+ <span class="fd-navigation-list__text">Quick Create</span>
979
+ </div>
980
+ </a>
981
+ </li>
982
+
983
+ <li class="fd-navigation-list__item" role="none">
984
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
985
+ <div class="fd-navigation-list__content-container">
986
+ <span class="fd-navigation-list__icon">
987
+ <i class=" sap-icon--settings" role="presentation"></i>
988
+ </span>
989
+ <span class="fd-navigation-list__text">Product Settings</span>
990
+ </div>
991
+ </a>
992
+ </li>
993
+ </ul>
994
+ </div>
995
+ </nav>
996
+ </div>
997
+ ```
998
+
999
+ ### Collapsed State, Defaut (fixed) Style
1000
+
1001
+ ```html
1002
+ <nav class="fd-side-nav is-collapsed" aria-roledescription="Main Navigation" id="fd-side-nav">
1003
+ <div class="fd-side-nav__container fd-side-nav__container--top">
1004
+ <ul class="fd-navigation-list level-1" role="menubar" aria-roledescription="Navigation List Tree">
1005
+ <li class="fd-navigation-list__item" role="none">
1006
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Home" aria-checked="false" tabindex="0">
1007
+ <div class="fd-navigation-list__content-container">
1008
+ <span class="fd-navigation-list__icon">
1009
+ <i class=" sap-icon--home" role="presentation"></i>
1010
+ </span>
1011
+ <span class="fd-navigation-list__text">Home</span>
1012
+ </a>
1013
+ </li>
1014
+
1015
+ <li class="fd-navigation-list__item" role="none">
1016
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Favorites" aria-checked="false" tabindex="0">
1017
+ <div class="fd-navigation-list__content-container">
1018
+ <span class="fd-navigation-list__icon">
1019
+ <i class=" sap-icon--unfavorite" role="presentation"></i>
1020
+ </span>
1021
+ <span class="fd-navigation-list__text">Favorites</span>
1022
+ </a>
1023
+ </li>
1024
+
1025
+ <li class="fd-navigation-list__item" role="none">
1026
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Customer Management" aria-checked="false" tabindex="0">
1027
+ <div class="fd-navigation-list__content-container">
1028
+ <span class="fd-navigation-list__icon">
1029
+ <i class=" sap-icon--account" role="presentation"></i>
1030
+ </span>
1031
+ <span class="fd-navigation-list__text">Customer Management</span>
1032
+ </div>
1033
+ </a>
1034
+ </li>
1035
+
1036
+ <li class="fd-navigation-list__item fd-navigation-list__item--group" role="none">
1037
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Nav Item" aria-checked="false" tabindex="0" aria-expanded="false">
1038
+ <div class="fd-navigation-list__content-container">
1039
+ <span class="fd-navigation-list__text">Navigation Group</span>
1040
+ </div>
1041
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
1042
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1043
+ </div>
1044
+ </a>
1045
+ <ul class="fd-navigation-list level-1" role="group">
1046
+ <li class="fd-navigation-list__item fd-popover" role="none">
1047
+ <a class="fd-navigation-list__content fd-popover__control" role="menuitemradio" aria-label="Nav Item" aria-checked="false" tabindex="0" aria-expanded="true" aria-controls="sideNavPopover1" aria-haspopup="menu" onclick="onPopoverClick('sideNavPopover1');">
1048
+ <div class="fd-navigation-list__content-container">
1049
+ <span class="fd-navigation-list__icon">
1050
+ <i class=" sap-icon--crm-sales" role="presentation"></i>
1051
+ </span>
1052
+ <span class="fd-navigation-list__text">Sales</span>
1053
+ </div>
1054
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
1055
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1056
+ </div>
1057
+ </a>
1058
+ <div id="sideNavPopover1" class="fd-navigation-list__popover-body fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" role="dialog">
1059
+ <div class="fd-popover__wrapper">
1060
+ <div class="fd-navigation-list__item">
1061
+ <a class="fd-navigation-list__content" role="heading" id="side-nav-item-1" tabindex="0">
1062
+ <div class="fd-navigation-list__content-container">
1063
+ <span class="fd-navigation-list__icon">
1064
+ <i class=" sap-icon--crm-sales" role="presentation"></i>
1065
+ </span>
1066
+ <span class="fd-navigation-list__text">Sales</span>
1067
+ </div>
1068
+ </a>
1069
+
1070
+ <ul class="fd-navigation-list level-2" role="menu" aria-labelledby="side-nav-item-1">
1071
+ <li class="fd-navigation-list__item" role="none">
1072
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Nav Item" aria-checked="false" tabindex="0">
1073
+ <div class="fd-navigation-list__content-container">
1074
+ <span class="fd-navigation-list__text">Leads</span>
1075
+ </div>
1076
+ </a>
1077
+ </li>
1078
+ <li class="fd-navigation-list__item" role="none">
1079
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Nav Item" aria-checked="false" tabindex="0">
1080
+ <div class="fd-navigation-list__content-container">
1081
+ <span class="fd-navigation-list__text">Opportunities</span>
1082
+ </div>
1083
+ </a>
1084
+ </li>
1085
+ </ul>
1086
+ </div>
1087
+ </div>
1088
+ </div>
1089
+ </li>
1090
+ <li class="fd-navigation-list__item" role="none">
1091
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Nav Item" aria-checked="false" tabindex="0">
1092
+ <div class="fd-navigation-list__content-container">
1093
+ <span class="fd-navigation-list__icon">
1094
+ <i class=" sap-icon--customer-view" role="presentation"></i>
1095
+ </span>
1096
+ <span class="fd-navigation-list__text">Products</span>
1097
+ </div>
1098
+ </a>
1099
+ </li>
1100
+ <li class="fd-navigation-list__item" role="none">
1101
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label=Marketing" aria-checked="false" tabindex="0">
1102
+ <div class="fd-navigation-list__content-container">
1103
+ <span class="fd-navigation-list__icon">
1104
+ <i class=" sap-icon--marketing-campaign" role="presentation"></i>
1105
+ </span>
1106
+ <span class="fd-navigation-list__text">Marketing</span>
1107
+ </div>
1108
+ </a>
1109
+ </li>
1110
+ <li class="fd-navigation-list__item" role="none">
1111
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Reports" aria-checked="false" tabindex="0" aria-expanded="false">
1112
+ <div class="fd-navigation-list__content-container">
1113
+ <span class="fd-navigation-list__icon">
1114
+ <i class=" sap-icon--manager-insight" role="presentation"></i>
1115
+ </span>
1116
+ <span class="fd-navigation-list__text">Reports</span>
1117
+ </div>
1118
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
1119
+ <i class="sap-icon--navigation-right-arrow" role="presentation"></i>
1120
+ </div>
1121
+ </a>
1122
+ <ul class="fd-navigation-list level-2" role="group">
1123
+ <li class="fd-navigation-list__item" role="none">
1124
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Nav Item" aria-checked="false" tabindex="0">
1125
+ <div class="fd-navigation-list__content-container">
1126
+ <span class="fd-navigation-list__text">Sales Reports</span>
1127
+ </div>
1128
+ </a>
1129
+ </li>
1130
+ <li class="fd-navigation-list__item" role="none">
1131
+ <a class="fd-navigation-list__content is-selected" role="menuitemradio" aria-label="Nav Item" aria-checked="true" tabindex="0">
1132
+ <div class="fd-navigation-list__content-container">
1133
+ <span class="fd-navigation-list__text">Customer Reports</span>
1134
+ </div>
1135
+ </a>
1136
+ </li>
1137
+ <li class="fd-navigation-list__item" role="none">
1138
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Nav Item" aria-checked="false" tabindex="0">
1139
+ <div class="fd-navigation-list__content-container">
1140
+ <span class="fd-navigation-list__text">Marketing Reports</span>
1141
+ </div>
1142
+ </a>
1143
+ </li>
1144
+ </ul>
1145
+ </li>
1146
+ </ul>
1147
+ </li>
1148
+
1149
+ <li class="fd-navigation-list__item fd-popover" role="none">
1150
+ <a class="fd-navigation-list__content is-selected fd-popover__control" role="menuitemradio" aria-label="Nav Item" aria-checked="true" tabindex="0" aria-expanded="true" aria-controls="sideNavPopover2" aria-haspopup="menu" onclick="onPopoverClick('sideNavPopover2');">
1151
+ <div class="fd-navigation-list__content-container">
1152
+ <span class="fd-navigation-list__icon">
1153
+ <i class=" sap-icon--overflow" role="presentation"></i>
1154
+ </span>
1155
+ </div>
1156
+ </a>
1157
+ <div id="sideNavPopover2" class="fd-navigation-list__popover-body fd-popover__body fd-popover__body--after fd-popover__body--arrow-left" role="dialog">
1158
+ <ul class="fd-popover__wrapper fd-navigation-list level-1" role="menu">
1159
+ <li class="fd-navigation-list__item">
1160
+ <a class="fd-navigation-list__content" role="menuitemradio" id="side-nav-item-4" tabindex="0">
1161
+ <div class="fd-navigation-list__content-container">
1162
+ <span class="fd-navigation-list__icon">
1163
+ <i class=" sap-icon--shield" role="presentation"></i>
1164
+ </span>
1165
+ <span class="fd-navigation-list__text">Sales and Procurement</span>
1166
+ </div>
1167
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
1168
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1169
+ </div>
1170
+ </a>
1171
+
1172
+ <ul class="fd-navigation-list level-2" role="menu" aria-labelledby="side-nav-item-4">
1173
+ <li class="fd-navigation-list__item" role="none">
1174
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Nav Item" aria-checked="false" tabindex="0">
1175
+ <div class="fd-navigation-list__content-container">
1176
+ <span class="fd-navigation-list__text">Royalty Reporting</span>
1177
+ </div>
1178
+ </a>
1179
+ </li>
1180
+ <li class="fd-navigation-list__item" role="none">
1181
+ <a class="fd-navigation-list__content is-selected" role="menuitemradio" aria-label="Nav Item" aria-checked="true" tabindex="0">
1182
+ <div class="fd-navigation-list__content-container">
1183
+ <span class="fd-navigation-list__text">Purchasing Retail</span>
1184
+ </div>
1185
+ </a>
1186
+ </li>
1187
+ </ul>
1188
+ </li>
1189
+ <li class="fd-navigation-list__item" role="none">
1190
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Manufacturing" aria-checked="false" tabindex="0">
1191
+ <div class="fd-navigation-list__content-container">
1192
+ <span class="fd-navigation-list__icon">
1193
+ <i class=" sap-icon--official-service" role="presentation"></i>
1194
+ </span>
1195
+ <span class="fd-navigation-list__text">Manufacturing</span>
1196
+ </div>
1197
+ </a>
1198
+ </li>
1199
+ <li class="fd-navigation-list__item" role="none">
1200
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Help" aria-checked="false" tabindex="0">
1201
+ <div class="fd-navigation-list__content-container">
1202
+ <span class="fd-navigation-list__icon">
1203
+ <i class=" sap-icon--sys-help" role="presentation"></i>
1204
+ </span>
1205
+ <span class="fd-navigation-list__text">Help</span>
1206
+ </div>
1207
+ </a>
1208
+ </li>
1209
+ <li class="fd-navigation-list__item" role="none">
1210
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Finance" aria-checked="false" tabindex="0">
1211
+ <div class="fd-navigation-list__content-container">
1212
+ <span class="fd-navigation-list__icon">
1213
+ <i class=" sap-icon--customer-financial-fact-sheet" role="presentation"></i>
1214
+ </span>
1215
+ <span class="fd-navigation-list__text">Finance</span>
1216
+ </div>
1217
+ </a>
1218
+ </li>
1219
+ </ul>
1220
+ </div>
1221
+ </li>
1222
+ </ul>
1223
+ </div>
1224
+
1225
+ <div class="fd-side-nav__container fd-side-nav__container--bottom">
1226
+ <ul class="fd-navigation-list level-1" role="menubar" aria-roledescription="Navigation List Tree" tabindex="-1">
1227
+ <li class="fd-navigation-list__item fd-navigation-list__item--quick-create" role="none">
1228
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1229
+ <div class="fd-navigation-list__content-container">
1230
+ <span class="fd-navigation-list__icon">
1231
+ <i class=" sap-icon--add" role="presentation"></i>
1232
+ </span>
1233
+ <span class="fd-navigation-list__text">Quick Create</span>
1234
+ </div>
1235
+ </a>
1236
+ </li>
1237
+
1238
+ <li class="fd-navigation-list__item" role="none">
1239
+ <a class="fd-navigation-list__content" role="menuitemradio" aria-label="Product Settings" aria-checked="false" tabindex="0">
1240
+ <div class="fd-navigation-list__content-container">
1241
+ <span class="fd-navigation-list__icon">
1242
+ <i class=" sap-icon--settings" role="presentation"></i>
1243
+ </span>
1244
+ <span class="fd-navigation-list__text">Product Settings</span>
1245
+ </div>
1246
+ </a>
1247
+ </li>
1248
+ </ul>
1249
+ </div>
1250
+ </nav>
1251
+ </div>
1252
+ </div>
1253
+ ```
1254
+
1255
+ ### Floating (Overlay) Style, Always Expanded
1256
+
1257
+ Additional to the fixed default style a floating variant of the Side Navigation is possible. This is always expanded.
1258
+
1259
+ ```html
1260
+ <div class="fd-popover">
1261
+ <div class="fd-popover__control">
1262
+ <button
1263
+ class="fd-button"
1264
+ aria-label="Cart"
1265
+ aria-controls="sideNavFloating"
1266
+ aria-expanded="true"
1267
+ aria-haspopup="true"
1268
+ onclick="onPopoverClick('sideNavFloating');"
1269
+ role="button">
1270
+ <i class="sap-icon--menu2" role="presentation"></i>
1271
+ </button>
1272
+ <div class="fd-popover__body" aria-hidden="false" id="sideNavFloating">
1273
+ <nav class="fd-side-nav" aria-roledescription="Main Navigation" id="fd-side-nav">
1274
+ <div class="fd-side-nav__container fd-side-nav__container--top">
1275
+ <ul class="fd-navigation-list level-1" role="tree" aria-roledescription="Navigation List Tree">
1276
+ <li class="fd-navigation-list__item" role="none">
1277
+ <a class="fd-navigation-list__content is-selected" role="treeitem" tabindex="0">
1278
+ <div class="fd-navigation-list__content-container">
1279
+ <span class="fd-navigation-list__icon">
1280
+ <i class=" sap-icon--home" role="presentation"></i>
1281
+ </span>
1282
+ <span class="fd-navigation-list__text">Home</span>
1283
+ </div>
1284
+ </a>
1285
+ </li>
1286
+
1287
+ <li class="fd-navigation-list__item" role="none">
1288
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
1289
+ <div class="fd-navigation-list__content-container">
1290
+ <span class="fd-navigation-list__icon">
1291
+ <i class="sap-icon--unfavorite" role="presentation"></i>
1292
+ </span>
1293
+ <span class="fd-navigation-list__text">Favorites</span>
1294
+ </div>
1295
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
1296
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1297
+ </div>
1298
+ </a>
1299
+ <ul class="fd-navigation-list level-2" role="group">
1300
+ <li class="fd-navigation-list__item" role="none">
1301
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1302
+ <div class="fd-navigation-list__content-container">
1303
+ <span class="fd-navigation-list__text">My Accounts</span>
1304
+ </div>
1305
+ </a>
1306
+ </li>
1307
+ <li class="fd-navigation-list__item" role="none">
1308
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1309
+ <div class="fd-navigation-list__content-container">
1310
+ <span class="fd-navigation-list__text">My Orders</span>
1311
+ </div>
1312
+ </a>
1313
+ </li>
1314
+ </ul>
1315
+ </li>
1316
+
1317
+ <li class="fd-navigation-list__item" role="none">
1318
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
1319
+ <div class="fd-navigation-list__content-container">
1320
+ <span class="fd-navigation-list__icon">
1321
+ <i class="sap-icon--account" role="presentation"></i>
1322
+ </span>
1323
+ <span class="fd-navigation-list__text">Customer Management</span>
1324
+ </div>
1325
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
1326
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1327
+ </div>
1328
+ </a>
1329
+ <ul class="fd-navigation-list level-2" role="group">
1330
+ <li class="fd-navigation-list__item" role="none">
1331
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1332
+ <div class="fd-navigation-list__content-container">
1333
+ <span class="fd-navigation-list__text">Contacts</span>
1334
+ </div>
1335
+ </a>
1336
+ </li>
1337
+ <li class="fd-navigation-list__item" role="none">
1338
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1339
+ <div class="fd-navigation-list__content-container">
1340
+ <span class="fd-navigation-list__text">Companies</span>
1341
+ </div>
1342
+ </a>
1343
+ </li>
1344
+ <li class="fd-navigation-list__item" role="none">
1345
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1346
+ <div class="fd-navigation-list__content-container">
1347
+ <span class="fd-navigation-list__text">Partners</span>
1348
+ </div>
1349
+ </a>
1350
+ </li>
1351
+ </ul>
1352
+ </li>
1353
+
1354
+ <li class="fd-navigation-list__item" role="none">
1355
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
1356
+ <div class="fd-navigation-list__content-container">
1357
+ <span class="fd-navigation-list__icon">
1358
+ <i class="sap-icon--crm-sales" role="presentation"></i>
1359
+ </span>
1360
+ <span class="fd-navigation-list__text">Sales</span>
1361
+ </div>
1362
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
1363
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1364
+ </div>
1365
+ </a>
1366
+ <ul class="fd-navigation-list level-2" role="group">
1367
+ <li class="fd-navigation-list__item" role="none">
1368
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1369
+ <div class="fd-navigation-list__content-container">
1370
+ <span class="fd-navigation-list__text">Leads</span>
1371
+ </div>
1372
+ </a>
1373
+ </li>
1374
+ <li class="fd-navigation-list__item" role="none">
1375
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1376
+ <div class="fd-navigation-list__content-container">
1377
+ <span class="fd-navigation-list__text">Opportunities</span>
1378
+ </div>
1379
+ </a>
1380
+ </li>
1381
+ <li class="fd-navigation-list__item" role="none">
1382
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1383
+ <div class="fd-navigation-list__content-container">
1384
+ <span class="fd-navigation-list__text">Quotes</span>
1385
+ </div>
1386
+ </a>
1387
+ </li>
1388
+ <li class="fd-navigation-list__item" role="none">
1389
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1390
+ <div class="fd-navigation-list__content-container">
1391
+ <span class="fd-navigation-list__text">Orders</span>
1392
+ </div>
1393
+ </a>
1394
+ </li>
1395
+ <li class="fd-navigation-list__item" role="none">
1396
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1397
+ <div class="fd-navigation-list__content-container">
1398
+ <span class="fd-navigation-list__text">Invoices</span>
1399
+ </div>
1400
+ </a>
1401
+ </li>
1402
+ </ul>
1403
+ </li>
1404
+
1405
+ <li class="fd-navigation-list__item" role="none">
1406
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
1407
+ <div class="fd-navigation-list__content-container">
1408
+ <span class="fd-navigation-list__icon">
1409
+ <i class="sap-icon--customer-view" role="presentation"></i>
1410
+ </span>
1411
+ <span class="fd-navigation-list__text">Products</span>
1412
+ </div>
1413
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
1414
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1415
+ </div>
1416
+ </a>
1417
+ <ul class="fd-navigation-list level-2" role="group">
1418
+ <li class="fd-navigation-list__item" role="none">
1419
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1420
+ <div class="fd-navigation-list__content-container">
1421
+ <span class="fd-navigation-list__text">Product Catalog</span>
1422
+ </div>
1423
+ </a>
1424
+ </li>
1425
+ <li class="fd-navigation-list__item" role="none">
1426
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1427
+ <div class="fd-navigation-list__content-container">
1428
+ <span class="fd-navigation-list__text">Pricing</span>
1429
+ </div>
1430
+ </a>
1431
+ </li>
1432
+ <li class="fd-navigation-list__item" role="none">
1433
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1434
+ <div class="fd-navigation-list__content-container">
1435
+ <span class="fd-navigation-list__text">Inventory Management</span>
1436
+ </div>
1437
+ </a>
1438
+ </li>
1439
+ </ul>
1440
+ </li>
1441
+
1442
+ <li class="fd-navigation-list__item" role="none">
1443
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
1444
+ <div class="fd-navigation-list__content-container">
1445
+ <span class="fd-navigation-list__icon">
1446
+ <i class="sap-icon--customer-view" role="presentation"></i>
1447
+ </span>
1448
+ <span class="fd-navigation-list__text">Marketing</span>
1449
+ </div>
1450
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
1451
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1452
+ </div>
1453
+ </a>
1454
+ <ul class="fd-navigation-list level-2" role="group">
1455
+ <li class="fd-navigation-list__item" role="none">
1456
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1457
+ <div class="fd-navigation-list__content-container">
1458
+ <span class="fd-navigation-list__text">Campaigns</span>
1459
+ </div>
1460
+ </a>
1461
+ </li>
1462
+ <li class="fd-navigation-list__item" role="none">
1463
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1464
+ <div class="fd-navigation-list__content-container">
1465
+ <span class="fd-navigation-list__text">E-Mail Marketing</span>
1466
+ </div>
1467
+ </a>
1468
+ </li>
1469
+ <li class="fd-navigation-list__item" role="none">
1470
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1471
+ <div class="fd-navigation-list__content-container">
1472
+ <span class="fd-navigation-list__text">Marketing Automation</span>
1473
+ </div>
1474
+ </a>
1475
+ </li>
1476
+ </ul>
1477
+ </li>
1478
+
1479
+ <li class="fd-navigation-list__item" role="none">
1480
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0" aria-expanded="true">
1481
+ <div class="fd-navigation-list__content-container">
1482
+ <span class="fd-navigation-list__icon">
1483
+ <i class="sap-icon--manager-insight" role="presentation"></i>
1484
+ </span>
1485
+ <span class="fd-navigation-list__text">Reports</span>
1486
+ </div>
1487
+ <div class="fd-navigation-list__navigation-indicator" role="presentation" aria-hidden="true">
1488
+ <i class="sap-icon--navigation-down-arrow" role="presentation"></i>
1489
+ </div>
1490
+ </a>
1491
+ <ul class="fd-navigation-list level-2" role="group">
1492
+ <li class="fd-navigation-list__item" role="none">
1493
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1494
+ <div class="fd-navigation-list__content-container">
1495
+ <span class="fd-navigation-list__text">Campaigns</span>
1496
+ </div>
1497
+ </a>
1498
+ </li>
1499
+ <li class="fd-navigation-list__item" role="none">
1500
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1501
+ <div class="fd-navigation-list__content-container">
1502
+ <span class="fd-navigation-list__text">E-Mail Marketing</span>
1503
+ </div>
1504
+ </a>
1505
+ </li>
1506
+ <li class="fd-navigation-list__item" role="none">
1507
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1508
+ <div class="fd-navigation-list__content-container">
1509
+ <span class="fd-navigation-list__text">Marketing Automation</span>
1510
+ </div>
1511
+ </a>
1512
+ </li>
1513
+ </ul>
1514
+ </li>
1515
+
1516
+ </ul>
1517
+ </div>
1518
+
1519
+ <div class="fd-side-nav__container fd-side-nav__container--bottom">
1520
+ <ul class="fd-navigation-list level-1" role="tree" tabindex="-1" aria-roledescription="Navigation List Tree">
1521
+ <li class="fd-navigation-list__item fd-navigation-list__item--quick-create" role="none">
1522
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1523
+ <div class="fd-navigation-list__content-container">
1524
+ <span class="fd-navigation-list__icon">
1525
+ <i class=" sap-icon--add" role="presentation"></i>
1526
+ </span>
1527
+ <span class="fd-navigation-list__text">Quick Create</span>
1528
+ </div>
1529
+ </a>
1530
+ </li>
1531
+
1532
+ <li class="fd-navigation-list__item" role="none">
1533
+ <a class="fd-navigation-list__content" role="treeitem" tabindex="0">
1534
+ <div class="fd-navigation-list__content-container">
1535
+ <span class="fd-navigation-list__icon">
1536
+ <i class=" sap-icon--settings" role="presentation"></i>
1537
+ </span>
1538
+ <span class="fd-navigation-list__text">Product Settings</span>
1539
+ </div>
1540
+ </a>
1541
+ </li>
1542
+ </ul>
1543
+ </div>
1544
+ </nav>
1545
+ </div>
1546
+ </div>
1547
+
1548
+ </div>
1549
+ ```
1550
+
1551
+ ## Accessibility
1552
+
1553
+ - Use semantic HTML elements where appropriate
1554
+ - Include proper ARIA attributes for interactive elements
1555
+ - Ensure keyboard navigation support
1556
+ - Provide adequate color contrast
1557
+
1558
+ ## Source
1559
+
1560
+ This documentation was automatically generated from: `packages/styles/stories/Components/side-navigation/side-navigation.stories.js`
1561
+
1562
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).