@fundamental-styles/mcp 0.41.9-rc.2 → 0.41.9-rc.21

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 (27) hide show
  1. package/data/CHANGELOG.md +91 -3
  2. package/data/component-guidance.json +2 -2
  3. package/data/components/avatar-product-switch.md +175 -60
  4. package/data/components/container.md +113 -0
  5. package/data/components/form-group.md +1 -0
  6. package/data/components/navigation-navigation.md +673 -957
  7. package/data/components/navigation.md +5869 -2148
  8. package/data/components/shellbar.md +16 -16
  9. package/data/examples/BTP/Navigation/horizontal/navigation-horizontal-expander.example.html +4 -234
  10. package/data/examples/BTP/Navigation/horizontal/navigation-horizontal.example.html +196 -232
  11. package/data/examples/BTP/Navigation/vertical/navigation-legacy.example.html +353 -197
  12. package/data/examples/BTP/Navigation/vertical/navigation-popup.example.html +451 -245
  13. package/data/examples/BTP/Navigation/vertical/navigation-search.example.html +937 -0
  14. package/data/examples/BTP/Navigation/vertical/navigation-snapped.example.html +361 -157
  15. package/data/examples/BTP/Navigation/vertical/navigation-sticky-area.example.html +935 -0
  16. package/data/examples/BTP/Navigation/vertical/navigation-tags.example.html +948 -0
  17. package/data/examples/BTP/Navigation/vertical/navigation.example.html +444 -242
  18. package/data/examples/Components/Forms/form-group/group-header-in-form-grid-display-mode.example.html +106 -0
  19. package/data/examples/Components/product-switch/large.example.html +65 -19
  20. package/data/examples/Components/product-switch/medium.example.html +5 -7
  21. package/data/examples/Components/product-switch/small.example.html +4 -6
  22. package/data/examples/Components/product-switch/two-column.example.html +20 -0
  23. package/data/examples/Components/shellbar/optional-items.example.html +2 -2
  24. package/data/examples/Components/shellbar/overflow-toolbar.example.html +2 -2
  25. package/data/examples/Components/shellbar/responsive-paddings.example.html +4 -4
  26. package/data/examples/Components/shellbar/responsiveness.example.html +8 -8
  27. package/package.json +1 -1
@@ -0,0 +1,948 @@
1
+ <div
2
+ class="fd-navigation fd-navigation--vertical"
3
+ role="navigation"
4
+ aria-roledescription="Side Navigation"
5
+ style="width: 18rem; height: 60rem"
6
+ >
7
+ <div class="fd-navigation__container fd-navigation__container--top">
8
+ <ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
9
+ <li class="fd-navigation__list-item" aria-hidden="true">
10
+ <div
11
+ class="fd-navigation__item"
12
+ aria-level="1"
13
+ role="treeitem"
14
+ title="Home"
15
+ aria-roledescription="Navigation List Tree Item"
16
+ aria-selected="true"
17
+ aria-expanded="false"
18
+ >
19
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
20
+ <span class="fd-navigation__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
21
+ <span class="fd-navigation__text"
22
+ >Home
23
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-8">
24
+ <span class="fd-object-status__text">Beta</span>
25
+ <span class="fd-object-status__sr-only">Object Status</span>
26
+ <span class="fd-object-status__sr-only">Indication Color 8</span>
27
+ </span>
28
+ </span>
29
+ <span
30
+ class="fd-navigation__selection-indicator"
31
+ role="presentation"
32
+ aria-hidden="true"
33
+ aria-label="selection indicator"
34
+ ></span>
35
+ </a>
36
+ </div>
37
+ </li>
38
+
39
+ <li class="fd-navigation__list-item" aria-hidden="true">
40
+ <div
41
+ class="fd-navigation__item"
42
+ aria-level="1"
43
+ role="treeitem"
44
+ title="Resource Planning and Business Management Solutions"
45
+ aria-roledescription="Navigation List Tree Item"
46
+ aria-selected="false"
47
+ aria-expanded="false"
48
+ >
49
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
50
+ <span
51
+ class="fd-navigation__icon sap-icon--bbyd-dashboard"
52
+ role="presentation"
53
+ aria-hidden="true"
54
+ ></span>
55
+ <span class="fd-navigation__text">
56
+ Resource Planning and Business Management Solutions
57
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-6b">
58
+ <span class="fd-object-status__text">Beta</span>
59
+ <span class="fd-object-status__sr-only">Object Status</span>
60
+ <span class="fd-object-status__sr-only">Indication Color 6b</span>
61
+ </span>
62
+ </span>
63
+ <span
64
+ class="fd-navigation__selection-indicator"
65
+ role="presentation"
66
+ aria-hidden="true"
67
+ aria-label="selection indicator"
68
+ ></span>
69
+ </a>
70
+ </div>
71
+ </li>
72
+
73
+ <li
74
+ class="fd-navigation__list-item fd-navigation__list-item--separator"
75
+ role="presentation"
76
+ aria-hidden="true"
77
+ ></li>
78
+
79
+ <li class="fd-navigation__list-item" aria-hidden="true">
80
+ <div
81
+ class="fd-navigation__item fd-navigation__item--group"
82
+ aria-level="1"
83
+ role="treeitem"
84
+ title="Main Items Group"
85
+ aria-roledescription="Navigation List Tree Item - Group"
86
+ aria-selected="false"
87
+ aria-expanded="true"
88
+ >
89
+ <a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
90
+ <span class="fd-navigation__text">Main Items</span>
91
+ <span
92
+ class="fd-navigation__has-children-indicator"
93
+ role="presentation"
94
+ aria-hidden="true"
95
+ aria-label="has children indicator, expanded"
96
+ ></span>
97
+ </a>
98
+ </div>
99
+
100
+ <ul
101
+ class="fd-navigation__list fd-navigation__list--parent-items"
102
+ role="tree"
103
+ aria-roledescription="Navigation List Tree - Parent Items"
104
+ tabindex="-1"
105
+ >
106
+ <li class="fd-navigation__list-item" aria-hidden="true">
107
+ <div
108
+ class="fd-navigation__item"
109
+ aria-level="2"
110
+ role="treeitem"
111
+ title="Basket"
112
+ aria-roledescription="Navigation List Tree Item - Parent"
113
+ aria-expanded="true"
114
+ aria-selected="false"
115
+ >
116
+ <a
117
+ class="fd-navigation__link"
118
+ role="button"
119
+ tabindex="-1"
120
+ onclick="toggleNavigationSubmenu(event)"
121
+ >
122
+ <span
123
+ class="fd-navigation__icon sap-icon--unfavorite"
124
+ role="presentation"
125
+ aria-hidden="true"
126
+ ></span>
127
+ <span class="fd-navigation__text"
128
+ >Favorites<span
129
+ class="fd-object-status fd-object-status--inverted fd-object-status--indication-9"
130
+ >
131
+ <span class="fd-object-status__text">New</span>
132
+ <span class="fd-object-status__sr-only">Object Status</span>
133
+ <span class="fd-object-status__sr-only">Indication Color 9</span>
134
+ </span>
135
+ </span>
136
+
137
+ <span
138
+ class="fd-navigation__has-children-indicator"
139
+ role="presentation"
140
+ aria-hidden="true"
141
+ aria-label="has children indicator, expanded"
142
+ ></span>
143
+ </a>
144
+ </div>
145
+ <div class="fd-navigation__list-container" aria-hidden="true">
146
+ <div class="fd-navigation__list-wrapper" aria-hidden="true">
147
+ <ul
148
+ class="fd-navigation__list fd-navigation__list--child-items"
149
+ role="tree"
150
+ aria-roledescription="Navigation List Tree - Child Items"
151
+ tabindex="-1"
152
+ >
153
+ <li class="fd-navigation__list-item" aria-hidden="true">
154
+ <div
155
+ class="fd-navigation__item fd-navigation__item--child"
156
+ aria-level="3"
157
+ role="treeitem"
158
+ title="My Accounts"
159
+ aria-roledescription="Navigation List Tree Item - Child"
160
+ aria-expanded="false"
161
+ aria-selected="false"
162
+ >
163
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
164
+ <span class="fd-navigation__text"
165
+ >My Accounts
166
+ <span
167
+ class="fd-object-status fd-object-status--inverted fd-object-status--indication-10b"
168
+ >
169
+ <span class="fd-object-status__text"
170
+ >Beta Lorem ipsum dolor sit amet consectetur adipisicing
171
+ elit</span
172
+ >
173
+ <span class="fd-object-status__sr-only">Object Status</span>
174
+ <span class="fd-object-status__sr-only"
175
+ >Indication Color 10b</span
176
+ >
177
+ </span>
178
+ </span>
179
+ <span
180
+ class="fd-navigation__selection-indicator"
181
+ role="presentation"
182
+ aria-hidden="true"
183
+ aria-label="selection indicator"
184
+ ></span>
185
+ </a>
186
+ </div>
187
+ </li>
188
+ <li class="fd-navigation__list-item" aria-hidden="true">
189
+ <div
190
+ class="fd-navigation__item fd-navigation__item--child"
191
+ aria-level="3"
192
+ role="treeitem"
193
+ title="My Orders"
194
+ aria-roledescription="Navigation List Tree Item - Child"
195
+ aria-expanded="false"
196
+ aria-selected="false"
197
+ >
198
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
199
+ <span class="fd-navigation__text">My Orders</span>
200
+ <span
201
+ class="fd-navigation__selection-indicator"
202
+ role="presentation"
203
+ aria-hidden="true"
204
+ aria-label="selection indicator"
205
+ ></span>
206
+ </a>
207
+ </div>
208
+ </li>
209
+ </ul>
210
+ </div>
211
+ </div>
212
+ </li>
213
+
214
+ <li class="fd-navigation__list-item" aria-hidden="true">
215
+ <div
216
+ class="fd-navigation__item"
217
+ aria-level="2"
218
+ role="treeitem"
219
+ title="Reports"
220
+ aria-roledescription="Navigation List Tree Item - Parent"
221
+ aria-expanded="true"
222
+ aria-selected="false"
223
+ >
224
+ <a
225
+ class="fd-navigation__link"
226
+ role="button"
227
+ tabindex="-1"
228
+ onclick="toggleNavigationSubmenu(event)"
229
+ >
230
+ <span
231
+ class="fd-navigation__icon sap-icon--document"
232
+ role="presentation"
233
+ aria-hidden="true"
234
+ ></span>
235
+ <span class="fd-navigation__text"
236
+ >Reports
237
+ <span
238
+ class="fd-object-status fd-object-status--inverted fd-object-status--indication-7"
239
+ >
240
+ <span class="fd-object-status__text">Alpha</span>
241
+ <span class="fd-object-status__sr-only">Object Status</span>
242
+ <span class="fd-object-status__sr-only">Indication Color 7</span>
243
+ </span>
244
+ </span>
245
+ <span
246
+ class="fd-navigation__selection-indicator"
247
+ role="presentation"
248
+ aria-hidden="true"
249
+ aria-label="selection indicator"
250
+ ></span>
251
+ <span
252
+ class="fd-navigation__has-children-indicator"
253
+ role="presentation"
254
+ aria-hidden="true"
255
+ aria-label="has children indicator, expanded"
256
+ ></span>
257
+ </a>
258
+ </div>
259
+ <div class="fd-navigation__list-container" aria-hidden="true">
260
+ <div class="fd-navigation__list-wrapper" aria-hidden="true">
261
+ <ul
262
+ class="fd-navigation__list fd-navigation__list--child-items"
263
+ role="tree"
264
+ aria-roledescription="Navigation List Tree - Child Items"
265
+ tabindex="-1"
266
+ >
267
+ <li class="fd-navigation__list-item" aria-hidden="true">
268
+ <div
269
+ class="fd-navigation__item fd-navigation__item--child"
270
+ aria-level="3"
271
+ role="treeitem"
272
+ title="Companies"
273
+ aria-roledescription="Navigation List Tree Item - Child"
274
+ aria-expanded="false"
275
+ aria-selected="false"
276
+ >
277
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
278
+ <span class="fd-navigation__text">Companies</span>
279
+ <span
280
+ class="fd-navigation__selection-indicator"
281
+ role="presentation"
282
+ aria-hidden="true"
283
+ aria-label="selection indicator"
284
+ ></span>
285
+ </a>
286
+ </div>
287
+ </li>
288
+ <li class="fd-navigation__list-item" aria-hidden="true">
289
+ <div
290
+ class="fd-navigation__item fd-navigation__item--child"
291
+ aria-level="3"
292
+ role="treeitem"
293
+ title="Partners"
294
+ aria-roledescription="Navigation List Tree Item - Child"
295
+ aria-expanded="false"
296
+ aria-selected="false"
297
+ >
298
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
299
+ <span class="fd-navigation__text"
300
+ >Partners (external link)
301
+ <span
302
+ class="fd-object-status fd-object-status--inverted fd-object-status--indication-7b"
303
+ >
304
+ <span class="fd-object-status__text">New</span>
305
+ <span class="fd-object-status__sr-only">Object Status</span>
306
+ <span class="fd-object-status__sr-only"
307
+ >Indication Color 7b</span
308
+ >
309
+ </span>
310
+ </span>
311
+
312
+ <span
313
+ class="fd-navigation__selection-indicator"
314
+ role="presentation"
315
+ aria-hidden="true"
316
+ aria-label="selection indicator"
317
+ ></span>
318
+ <span
319
+ class="fd-navigation__external-link-indicator"
320
+ role="presentation"
321
+ aria-hidden="true"
322
+ aria-label="external link indicator"
323
+ ></span>
324
+ </a>
325
+ </div>
326
+ </li>
327
+ </ul>
328
+ </div>
329
+ </div>
330
+ </li>
331
+
332
+ <li class="fd-navigation__list-item" aria-hidden="true">
333
+ <div
334
+ class="fd-navigation__item"
335
+ aria-level="2"
336
+ role="treeitem"
337
+ title="Sales"
338
+ aria-roledescription="Navigation List Tree Item - Parent"
339
+ aria-expanded="false"
340
+ aria-selected="false"
341
+ >
342
+ <a
343
+ class="fd-navigation__link"
344
+ role="button"
345
+ tabindex="-1"
346
+ onclick="toggleNavigationSubmenu(event)"
347
+ >
348
+ <span
349
+ class="fd-navigation__icon sap-icon--crm-sales"
350
+ role="presentation"
351
+ aria-hidden="true"
352
+ ></span>
353
+ <span class="fd-navigation__text">Sales</span>
354
+ <span
355
+ class="fd-navigation__selection-indicator"
356
+ role="presentation"
357
+ aria-hidden="true"
358
+ aria-label="selection indicator"
359
+ ></span>
360
+ <span
361
+ class="fd-navigation__has-children-indicator"
362
+ role="presentation"
363
+ aria-hidden="true"
364
+ aria-label="has children indicator, collapsed"
365
+ ></span>
366
+ </a>
367
+ </div>
368
+ <div class="fd-navigation__list-container" aria-hidden="true">
369
+ <div class="fd-navigation__list-wrapper" aria-hidden="true">
370
+ <ul
371
+ class="fd-navigation__list fd-navigation__list--child-items"
372
+ role="tree"
373
+ aria-roledescription="Navigation List Tree - Child Items"
374
+ tabindex="-1"
375
+ >
376
+ <li class="fd-navigation__list-item" aria-hidden="true">
377
+ <div
378
+ class="fd-navigation__item fd-navigation__item--child"
379
+ aria-level="3"
380
+ role="treeitem"
381
+ title="Leads"
382
+ aria-roledescription="Navigation List Tree Item - Child"
383
+ aria-expanded="false"
384
+ aria-selected="false"
385
+ >
386
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
387
+ <span class="fd-navigation__text">Leads</span>
388
+ <span
389
+ class="fd-navigation__selection-indicator"
390
+ role="presentation"
391
+ aria-hidden="true"
392
+ aria-label="selection indicator"
393
+ ></span>
394
+ </a>
395
+ </div>
396
+ </li>
397
+ <li class="fd-navigation__list-item" aria-hidden="true">
398
+ <div
399
+ class="fd-navigation__item fd-navigation__item--child"
400
+ aria-level="3"
401
+ role="treeitem"
402
+ title="Opportunities"
403
+ aria-roledescription="Navigation List Tree Item - Child"
404
+ aria-expanded="false"
405
+ aria-selected="false"
406
+ >
407
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
408
+ <span class="fd-navigation__text">Opportunities</span>
409
+ <span
410
+ class="fd-navigation__selection-indicator"
411
+ role="presentation"
412
+ aria-hidden="true"
413
+ aria-label="selection indicator"
414
+ ></span>
415
+ </a>
416
+ </div>
417
+ </li>
418
+ <li class="fd-navigation__list-item" aria-hidden="true">
419
+ <div
420
+ class="fd-navigation__item fd-navigation__item--child"
421
+ aria-level="3"
422
+ role="treeitem"
423
+ title="Quotes"
424
+ aria-roledescription="Navigation List Tree Item - Child"
425
+ aria-expanded="false"
426
+ aria-selected="false"
427
+ >
428
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
429
+ <span class="fd-navigation__text">Quotes</span>
430
+ <span
431
+ class="fd-navigation__selection-indicator"
432
+ role="presentation"
433
+ aria-hidden="true"
434
+ aria-label="selection indicator"
435
+ ></span>
436
+ </a>
437
+ </div>
438
+ </li>
439
+ <li class="fd-navigation__list-item" aria-hidden="true">
440
+ <div
441
+ class="fd-navigation__item fd-navigation__item--child"
442
+ aria-level="3"
443
+ role="treeitem"
444
+ title="Orders"
445
+ aria-roledescription="Navigation List Tree Item - Child"
446
+ aria-expanded="false"
447
+ aria-selected="false"
448
+ >
449
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
450
+ <span class="fd-navigation__text">Orders</span>
451
+ <span
452
+ class="fd-navigation__selection-indicator"
453
+ role="presentation"
454
+ aria-hidden="true"
455
+ aria-label="selection indicator"
456
+ ></span>
457
+ </a>
458
+ </div>
459
+ </li>
460
+ <li class="fd-navigation__list-item" aria-hidden="true">
461
+ <div
462
+ class="fd-navigation__item fd-navigation__item--child"
463
+ aria-level="3"
464
+ role="treeitem"
465
+ title="Invoices"
466
+ aria-roledescription="Navigation List Tree Item - Child"
467
+ aria-expanded="false"
468
+ aria-selected="false"
469
+ >
470
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
471
+ <span class="fd-navigation__text">Invoices</span>
472
+ <span
473
+ class="fd-navigation__selection-indicator"
474
+ role="presentation"
475
+ aria-hidden="true"
476
+ aria-label="selection indicator"
477
+ ></span>
478
+ </a>
479
+ </div>
480
+ </li>
481
+ </ul>
482
+ </div>
483
+ </div>
484
+ </li>
485
+ </ul>
486
+ </li>
487
+
488
+ <li class="fd-navigation__list-item" aria-hidden="true">
489
+ <div
490
+ class="fd-navigation__item fd-navigation__item--with-expander"
491
+ aria-level="2"
492
+ role="treeitem"
493
+ title="Customer Management"
494
+ aria-roledescription="Navigation List Tree Item - Parent"
495
+ aria-expanded="true"
496
+ aria-selected="false"
497
+ >
498
+ <a class="fd-navigation__link" href="#">
499
+ <span
500
+ class="fd-navigation__icon sap-icon--account"
501
+ role="presentation"
502
+ aria-hidden="true"
503
+ ></span>
504
+ <span class="fd-navigation__text"
505
+ >Customer Management
506
+ <span class="fd-object-status fd-object-status--inverted fd-object-status--indication-9b">
507
+ <span class="fd-object-status__text">Preview</span>
508
+ <span class="fd-object-status__sr-only">Object Status</span>
509
+ <span class="fd-object-status__sr-only">Indication Color 9b</span>
510
+ </span>
511
+ </span>
512
+ <span
513
+ class="fd-navigation__selection-indicator"
514
+ role="presentation"
515
+ aria-hidden="true"
516
+ aria-label="selection indicator"
517
+ ></span>
518
+ </a>
519
+ <span
520
+ class="fd-navigation__has-children-indicator"
521
+ role="button"
522
+ aria-label="expand/collapse children"
523
+ ></span>
524
+ </div>
525
+ <div class="fd-navigation__list-container" aria-hidden="true">
526
+ <div class="fd-navigation__list-wrapper" aria-hidden="true">
527
+ <ul
528
+ class="fd-navigation__list fd-navigation__list--child-items"
529
+ role="tree"
530
+ aria-roledescription="Navigation List Tree - Child Items"
531
+ tabindex="-1"
532
+ >
533
+ <li class="fd-navigation__list-item" aria-hidden="true">
534
+ <div
535
+ class="fd-navigation__item fd-navigation__item--child"
536
+ aria-level="3"
537
+ role="treeitem"
538
+ title="Contacts"
539
+ aria-roledescription="Navigation List Tree Item - Child"
540
+ aria-expanded="false"
541
+ aria-selected="false"
542
+ >
543
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
544
+ <span class="fd-navigation__text">Contacts</span>
545
+ <span
546
+ class="fd-navigation__selection-indicator"
547
+ role="presentation"
548
+ aria-hidden="true"
549
+ aria-label="selection indicator"
550
+ ></span>
551
+ </a>
552
+ </div>
553
+ </li>
554
+ <li class="fd-navigation__list-item" aria-hidden="true">
555
+ <div
556
+ class="fd-navigation__item fd-navigation__item--child"
557
+ aria-level="3"
558
+ role="treeitem"
559
+ title="Companies"
560
+ aria-roledescription="Navigation List Tree Item - Child"
561
+ aria-expanded="false"
562
+ aria-selected="false"
563
+ >
564
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
565
+ <span class="fd-navigation__text">Companies</span>
566
+ <span
567
+ class="fd-navigation__selection-indicator"
568
+ role="presentation"
569
+ aria-hidden="true"
570
+ aria-label="selection indicator"
571
+ ></span>
572
+ </a>
573
+ </div>
574
+ </li>
575
+ <li class="fd-navigation__list-item" aria-hidden="true">
576
+ <div
577
+ class="fd-navigation__item fd-navigation__item--child"
578
+ aria-level="3"
579
+ role="treeitem"
580
+ title="Partners"
581
+ aria-roledescription="Navigation List Tree Item - Child"
582
+ aria-expanded="false"
583
+ aria-selected="false"
584
+ >
585
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
586
+ <span class="fd-navigation__text">Partners (external link)</span>
587
+ <span
588
+ class="fd-navigation__selection-indicator"
589
+ role="presentation"
590
+ aria-hidden="true"
591
+ aria-label="selection indicator"
592
+ ></span>
593
+ <span
594
+ class="fd-navigation__external-link-indicator"
595
+ role="presentation"
596
+ aria-hidden="true"
597
+ aria-label="external link indicator"
598
+ ></span>
599
+ </a>
600
+ </div>
601
+ </li>
602
+ </ul>
603
+ </div>
604
+ </div>
605
+ </li>
606
+
607
+ <li
608
+ class="fd-navigation__list-item fd-navigation__list-item--separator"
609
+ role="presentation"
610
+ aria-hidden="true"
611
+ ></li>
612
+
613
+ <li class="fd-navigation__list-item" aria-hidden="true">
614
+ <div
615
+ class="fd-navigation__item fd-navigation__item--group"
616
+ aria-level="1"
617
+ role="treeitem"
618
+ title="Additional Items"
619
+ aria-roledescription="Navigation List Tree Item - Group"
620
+ aria-selected="false"
621
+ aria-expanded="false"
622
+ >
623
+ <a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
624
+ <span class="fd-navigation__text">Additional Items</span>
625
+ <span
626
+ class="fd-navigation__has-children-indicator"
627
+ role="presentation"
628
+ aria-hidden="true"
629
+ aria-label="has children indicator, expanded"
630
+ ></span>
631
+ </a>
632
+ </div>
633
+
634
+ <ul
635
+ class="fd-navigation__list fd-navigation__list--parent-items"
636
+ role="tree"
637
+ aria-roledescription="Navigation List Tree - Parent Items"
638
+ tabindex="-1"
639
+ >
640
+ <li class="fd-navigation__list-item" aria-hidden="true">
641
+ <div
642
+ class="fd-navigation__item"
643
+ aria-level="2"
644
+ role="treeitem"
645
+ title="Products"
646
+ aria-roledescription="Navigation List Tree Item - Parent"
647
+ aria-selected="false"
648
+ aria-expanded="false"
649
+ >
650
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
651
+ <span
652
+ class="fd-navigation__icon sap-icon--customer-view"
653
+ role="presentation"
654
+ aria-hidden="true"
655
+ ></span>
656
+ <span class="fd-navigation__text">Products</span>
657
+ <span
658
+ class="fd-navigation__selection-indicator"
659
+ role="presentation"
660
+ aria-hidden="true"
661
+ aria-label="selection indicator"
662
+ ></span>
663
+ </a>
664
+ </div>
665
+ </li>
666
+
667
+ <li class="fd-navigation__list-item" aria-hidden="true">
668
+ <div
669
+ class="fd-navigation__item"
670
+ aria-level="2"
671
+ role="treeitem"
672
+ title="Marketing"
673
+ aria-roledescription="Navigation List Tree Item - Parent"
674
+ aria-expanded="true"
675
+ aria-selected="false"
676
+ >
677
+ <a
678
+ class="fd-navigation__link"
679
+ role="button"
680
+ tabindex="-1"
681
+ onclick="toggleNavigationSubmenu(event)"
682
+ >
683
+ <span
684
+ class="fd-navigation__icon sap-icon--marketing-campaign"
685
+ role="presentation"
686
+ aria-hidden="true"
687
+ ></span>
688
+ <span class="fd-navigation__text">Marketing</span>
689
+ <span
690
+ class="fd-navigation__selection-indicator"
691
+ role="presentation"
692
+ aria-hidden="true"
693
+ aria-label="selection indicator"
694
+ ></span>
695
+ <span
696
+ class="fd-navigation__has-children-indicator"
697
+ role="presentation"
698
+ aria-hidden="true"
699
+ aria-label="has children indicator, expanded"
700
+ ></span>
701
+ </a>
702
+ </div>
703
+ <div class="fd-navigation__list-container" aria-hidden="true">
704
+ <div class="fd-navigation__list-wrapper" aria-hidden="true">
705
+ <ul
706
+ class="fd-navigation__list fd-navigation__list--child-items"
707
+ role="tree"
708
+ aria-roledescription="Navigation List Tree - Child Items"
709
+ tabindex="-1"
710
+ >
711
+ <li class="fd-navigation__list-item" aria-hidden="true">
712
+ <div
713
+ class="fd-navigation__item fd-navigation__item--child"
714
+ aria-level="3"
715
+ role="treeitem"
716
+ title="Campaigns"
717
+ aria-roledescription="Navigation List Tree Item - Child"
718
+ aria-expanded="false"
719
+ aria-selected="false"
720
+ >
721
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
722
+ <span class="fd-navigation__text">Campaigns</span>
723
+ <span
724
+ class="fd-navigation__selection-indicator"
725
+ role="presentation"
726
+ aria-hidden="true"
727
+ aria-label="selection indicator"
728
+ ></span>
729
+ </a>
730
+ </div>
731
+ </li>
732
+ <li class="fd-navigation__list-item" aria-hidden="true">
733
+ <div
734
+ class="fd-navigation__item fd-navigation__item--child"
735
+ aria-level="3"
736
+ role="treeitem"
737
+ title="E-Mail Marketing"
738
+ aria-roledescription="Navigation List Tree Item - Child"
739
+ aria-expanded="false"
740
+ aria-selected="false"
741
+ >
742
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
743
+ <span class="fd-navigation__text">E-Mail Marketing</span>
744
+ <span
745
+ class="fd-navigation__selection-indicator"
746
+ role="presentation"
747
+ aria-hidden="true"
748
+ aria-label="selection indicator"
749
+ ></span>
750
+ </a>
751
+ </div>
752
+ </li>
753
+ <li class="fd-navigation__list-item" aria-hidden="true">
754
+ <div
755
+ class="fd-navigation__item fd-navigation__item--child"
756
+ aria-level="3"
757
+ role="treeitem"
758
+ title="Marketing Automation"
759
+ aria-roledescription="Navigation List Tree Item - Child"
760
+ aria-expanded="false"
761
+ aria-selected="false"
762
+ >
763
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
764
+ <span class="fd-navigation__text">Marketing Automation</span>
765
+ <span
766
+ class="fd-navigation__selection-indicator"
767
+ role="presentation"
768
+ aria-hidden="true"
769
+ aria-label="selection indicator"
770
+ ></span>
771
+ </a>
772
+ </div>
773
+ </li>
774
+ </ul>
775
+ </div>
776
+ </div>
777
+ </li>
778
+
779
+ <li class="fd-navigation__list-item" aria-hidden="true">
780
+ <div
781
+ class="fd-navigation__item"
782
+ aria-level="2"
783
+ role="treeitem"
784
+ title="Reports"
785
+ aria-roledescription="Navigation List Tree Item - Parent"
786
+ aria-expanded="true"
787
+ aria-selected="false"
788
+ >
789
+ <a
790
+ class="fd-navigation__link"
791
+ role="button"
792
+ tabindex="-1"
793
+ onclick="toggleNavigationSubmenu(event)"
794
+ >
795
+ <span
796
+ class="fd-navigation__icon sap-icon--manager-insight"
797
+ role="presentation"
798
+ aria-hidden="true"
799
+ ></span>
800
+ <span class="fd-navigation__text">Reports</span>
801
+ <span
802
+ class="fd-navigation__selection-indicator"
803
+ role="presentation"
804
+ aria-hidden="true"
805
+ aria-label="selection indicator"
806
+ ></span>
807
+ <span
808
+ class="fd-navigation__has-children-indicator"
809
+ role="presentation"
810
+ aria-hidden="true"
811
+ aria-label="has children indicator, expanded"
812
+ ></span>
813
+ </a>
814
+ </div>
815
+ <div class="fd-navigation__list-container" aria-hidden="true">
816
+ <div class="fd-navigation__list-wrapper" aria-hidden="true">
817
+ <ul
818
+ class="fd-navigation__list fd-navigation__list--child-items"
819
+ role="tree"
820
+ aria-roledescription="Navigation List Tree - Child Items"
821
+ tabindex="-1"
822
+ >
823
+ <li class="fd-navigation__list-item" aria-hidden="true">
824
+ <div
825
+ class="fd-navigation__item fd-navigation__item--child"
826
+ aria-level="3"
827
+ role="treeitem"
828
+ title="Sales Report"
829
+ aria-roledescription="Navigation List Tree Item - Child"
830
+ aria-expanded="false"
831
+ aria-selected="false"
832
+ >
833
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
834
+ <span class="fd-navigation__text">Sales Report</span>
835
+ <span
836
+ class="fd-navigation__selection-indicator"
837
+ role="presentation"
838
+ aria-hidden="true"
839
+ aria-label="selection indicator"
840
+ ></span>
841
+ </a>
842
+ </div>
843
+ </li>
844
+ <li class="fd-navigation__list-item" aria-hidden="true">
845
+ <div
846
+ class="fd-navigation__item fd-navigation__item--child"
847
+ aria-level="3"
848
+ role="treeitem"
849
+ title="Customer Reports"
850
+ aria-roledescription="Navigation List Tree Item - Child"
851
+ aria-expanded="false"
852
+ aria-selected="false"
853
+ >
854
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
855
+ <span class="fd-navigation__text">Customer Reports</span>
856
+ <span
857
+ class="fd-navigation__selection-indicator"
858
+ role="presentation"
859
+ aria-hidden="true"
860
+ aria-label="selection indicator"
861
+ ></span>
862
+ </a>
863
+ </div>
864
+ </li>
865
+ <li class="fd-navigation__list-item" aria-hidden="true">
866
+ <div
867
+ class="fd-navigation__item fd-navigation__item--child"
868
+ aria-level="3"
869
+ role="treeitem"
870
+ title="Marketing Reports"
871
+ aria-roledescription="Navigation List Tree Item - Child"
872
+ aria-expanded="false"
873
+ aria-selected="false"
874
+ >
875
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
876
+ <span class="fd-navigation__text">Marketing Reports</span>
877
+ <span
878
+ class="fd-navigation__selection-indicator"
879
+ role="presentation"
880
+ aria-hidden="true"
881
+ aria-label="selection indicator"
882
+ ></span>
883
+ </a>
884
+ </div>
885
+ </li>
886
+ </ul>
887
+ </div>
888
+ </div>
889
+ </li>
890
+ </ul>
891
+ </li>
892
+
893
+ <li
894
+ class="fd-navigation__list-item fd-navigation__list-item--spacer"
895
+ role="presentation"
896
+ aria-hidden="true"
897
+ ></li>
898
+ </ul>
899
+ </div>
900
+
901
+ <div class="fd-navigation__container fd-navigation__container--bottom">
902
+ <ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
903
+ <li class="fd-navigation__list-item" aria-hidden="true">
904
+ <div
905
+ class="fd-navigation__item fd-navigation__item--create"
906
+ aria-level="1"
907
+ role="treeitem"
908
+ title="Create Ticket"
909
+ aria-roledescription="Navigation List Tree Item"
910
+ aria-selected="false"
911
+ aria-expanded="false"
912
+ >
913
+ <button class="fd-navigation__link">
914
+ <span
915
+ class="fd-navigation__icon sap-icon--write-new"
916
+ role="presentation"
917
+ aria-hidden="true"
918
+ ></span>
919
+ <span class="fd-navigation__text">Create Ticket</span>
920
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
921
+ </button>
922
+ </div>
923
+ </li>
924
+
925
+ <li class="fd-navigation__list-item" aria-hidden="true">
926
+ <div
927
+ class="fd-navigation__item"
928
+ aria-level="1"
929
+ role="treeitem"
930
+ title="Product Settings"
931
+ aria-roledescription="Navigation List Tree Item"
932
+ aria-selected="false"
933
+ aria-expanded="false"
934
+ >
935
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
936
+ <span
937
+ class="fd-navigation__icon sap-icon--settings"
938
+ role="presentation"
939
+ aria-hidden="true"
940
+ ></span>
941
+ <span class="fd-navigation__text">Product Settings</span>
942
+ <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
943
+ </a>
944
+ </div>
945
+ </li>
946
+ </ul>
947
+ </div>
948
+ </div>