@fundamental-styles/mcp 0.41.9-rc.9 → 0.41.9
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.
- package/data/CHANGELOG.md +69 -3
- package/data/components/avatar-product-switch.md +167 -52
- package/data/components/container.md +113 -0
- package/data/components/dialog-docs-static-settings.md +1490 -130
- package/data/components/form-group.md +1 -0
- package/data/components/navigation-navigation.md +470 -1088
- package/data/components/navigation.md +2269 -489
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal-expander.example.html +3 -228
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal.example.html +3 -209
- package/data/examples/BTP/Navigation/vertical/navigation-search.example.html +937 -0
- package/data/examples/BTP/Navigation/vertical/navigation-sticky-area.example.html +935 -0
- package/data/examples/BTP/Navigation/vertical/navigation-tags.example.html +0 -44
- package/data/examples/Components/Forms/form-group/group-header-in-form-grid-display-mode.example.html +106 -0
- package/data/examples/Components/product-switch/large.example.html +65 -19
- package/data/examples/Components/product-switch/medium.example.html +5 -7
- package/data/examples/Components/product-switch/small.example.html +4 -6
- package/data/examples/Components/product-switch/two-column.example.html +20 -0
- package/data/examples/Components/settings/md.example.html +124 -30
- package/data/examples/Components/settings/sm.example.html +64 -27
- package/data/examples/Components/settings/xl-appearance.example.html +370 -0
- package/data/examples/Components/settings/xl-language-region.example.html +284 -0
- package/data/examples/Components/settings/xl-notifications-details.example.html +240 -0
- package/data/examples/Components/settings/xl-notifications.example.html +370 -0
- package/data/examples/Components/settings/xl-user-account.example.html +114 -0
- package/data/examples/Components/settings/xl.example.html +113 -25
- package/package.json +1 -1
- package/data/examples/Components/settings/xl-default.example.html +0 -108
|
@@ -810,6 +810,7 @@ This component uses the following BEM elements:
|
|
|
810
810
|
|
|
811
811
|
- `fd-navigation__container`
|
|
812
812
|
- `fd-navigation__container--bottom`
|
|
813
|
+
- `fd-navigation__container--sticky`
|
|
813
814
|
- `fd-navigation__container--top`
|
|
814
815
|
- `fd-navigation__external-link-indicator`
|
|
815
816
|
- `fd-navigation__has-children-indicator`
|
|
@@ -829,10 +830,10 @@ This component uses the following BEM elements:
|
|
|
829
830
|
- `fd-navigation__list-container--menu`
|
|
830
831
|
- `fd-navigation__list-container--submenu`
|
|
831
832
|
- `fd-navigation__list-item`
|
|
832
|
-
- `fd-navigation__list-item--home`
|
|
833
833
|
- `fd-navigation__list-item--overflow`
|
|
834
834
|
- `fd-navigation__list-item--separator`
|
|
835
835
|
- `fd-navigation__list-item--spacer`
|
|
836
|
+
- `fd-navigation__list-item--sticky`
|
|
836
837
|
- `fd-navigation__list-wrapper`
|
|
837
838
|
- `fd-navigation__selection-indicator`
|
|
838
839
|
- `fd-navigation__text`
|
|
@@ -3577,29 +3578,6 @@ Navigation items can display indication tags (e.g., "New", "Beta", "Deprecated")
|
|
|
3577
3578
|
>
|
|
3578
3579
|
<div class="fd-navigation__container fd-navigation__container--top">
|
|
3579
3580
|
<ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
|
|
3580
|
-
<li class="fd-navigation__list-item fd-navigation__list-item--home" role="presentation" aria-hidden="true">
|
|
3581
|
-
<div class="fd-input-group">
|
|
3582
|
-
<input
|
|
3583
|
-
class="fd-input fd-input-group__input"
|
|
3584
|
-
type="text"
|
|
3585
|
-
id="side-nav-search"
|
|
3586
|
-
name="two-icon-actions"
|
|
3587
|
-
placeholder="Search"
|
|
3588
|
-
autocomplete="off"
|
|
3589
|
-
aria-label="Search"
|
|
3590
|
-
/>
|
|
3591
|
-
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
3592
|
-
<button
|
|
3593
|
-
class="fd-input-group__button fd-button fd-button--icon fd-button--transparent"
|
|
3594
|
-
type="button"
|
|
3595
|
-
aria-label="Search value"
|
|
3596
|
-
>
|
|
3597
|
-
<i class="sap-icon--search" aria-hidden="true" role="presentation"></i>
|
|
3598
|
-
</button>
|
|
3599
|
-
</span>
|
|
3600
|
-
</div>
|
|
3601
|
-
</li>
|
|
3602
|
-
|
|
3603
3581
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
3604
3582
|
<div
|
|
3605
3583
|
class="fd-navigation__item"
|
|
@@ -3857,13 +3835,13 @@ Navigation items can display indication tags (e.g., "New", "Beta", "Deprecated")
|
|
|
3857
3835
|
class="fd-navigation__item fd-navigation__item--child"
|
|
3858
3836
|
aria-level="3"
|
|
3859
3837
|
role="treeitem"
|
|
3860
|
-
title="
|
|
3838
|
+
title="Companies"
|
|
3861
3839
|
aria-roledescription="Navigation List Tree Item - Child"
|
|
3862
3840
|
aria-expanded="false"
|
|
3863
3841
|
aria-selected="false"
|
|
3864
3842
|
>
|
|
3865
3843
|
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
3866
|
-
<span class="fd-navigation__text">
|
|
3844
|
+
<span class="fd-navigation__text">Companies</span>
|
|
3867
3845
|
<span
|
|
3868
3846
|
class="fd-navigation__selection-indicator"
|
|
3869
3847
|
role="presentation"
|
|
@@ -3878,46 +3856,65 @@ Navigation items can display indication tags (e.g., "New", "Beta", "Deprecated")
|
|
|
3878
3856
|
class="fd-navigation__item fd-navigation__item--child"
|
|
3879
3857
|
aria-level="3"
|
|
3880
3858
|
role="treeitem"
|
|
3881
|
-
title="
|
|
3859
|
+
title="Partners"
|
|
3882
3860
|
aria-roledescription="Navigation List Tree Item - Child"
|
|
3883
3861
|
aria-expanded="false"
|
|
3884
3862
|
aria-selected="false"
|
|
3885
3863
|
>
|
|
3886
3864
|
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
3887
|
-
<span class="fd-navigation__text"
|
|
3888
|
-
|
|
3889
|
-
|
|
3890
|
-
|
|
3891
|
-
|
|
3892
|
-
|
|
3893
|
-
|
|
3894
|
-
|
|
3895
|
-
|
|
3865
|
+
<span class="fd-navigation__text"
|
|
3866
|
+
>Partners (external link)
|
|
3867
|
+
<span
|
|
3868
|
+
class="fd-object-status fd-object-status--inverted fd-object-status--indication-7b"
|
|
3869
|
+
>
|
|
3870
|
+
<span class="fd-object-status__text">New</span>
|
|
3871
|
+
<span class="fd-object-status__sr-only">Object Status</span>
|
|
3872
|
+
<span class="fd-object-status__sr-only"
|
|
3873
|
+
>Indication Color 7b</span
|
|
3874
|
+
>
|
|
3875
|
+
</span>
|
|
3876
|
+
</span>
|
|
3877
|
+
|
|
3878
|
+
<span
|
|
3879
|
+
class="fd-navigation__selection-indicator"
|
|
3880
|
+
role="presentation"
|
|
3881
|
+
aria-hidden="true"
|
|
3882
|
+
aria-label="selection indicator"
|
|
3883
|
+
></span>
|
|
3884
|
+
<span
|
|
3885
|
+
class="fd-navigation__external-link-indicator"
|
|
3886
|
+
role="presentation"
|
|
3887
|
+
aria-hidden="true"
|
|
3888
|
+
aria-label="external link indicator"
|
|
3889
|
+
></span>
|
|
3890
|
+
</a>
|
|
3891
|
+
</div>
|
|
3892
|
+
</li>
|
|
3893
|
+
</ul>
|
|
3896
3894
|
</li>
|
|
3895
|
+
|
|
3897
3896
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
3898
3897
|
<div
|
|
3899
|
-
class="fd-navigation__item
|
|
3900
|
-
aria-level="
|
|
3898
|
+
class="fd-navigation__item"
|
|
3899
|
+
aria-level="2"
|
|
3901
3900
|
role="treeitem"
|
|
3902
|
-
title="
|
|
3903
|
-
aria-roledescription="Navigation List Tree Item -
|
|
3901
|
+
title="Sales"
|
|
3902
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
3904
3903
|
aria-expanded="false"
|
|
3905
3904
|
aria-selected="false"
|
|
3906
3905
|
>
|
|
3907
|
-
<a
|
|
3908
|
-
|
|
3909
|
-
|
|
3910
|
-
|
|
3911
|
-
|
|
3912
|
-
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
</span>
|
|
3920
|
-
|
|
3906
|
+
<a
|
|
3907
|
+
class="fd-navigation__link"
|
|
3908
|
+
role="button"
|
|
3909
|
+
tabindex="-1"
|
|
3910
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
3911
|
+
>
|
|
3912
|
+
<span
|
|
3913
|
+
class="fd-navigation__icon sap-icon--crm-sales"
|
|
3914
|
+
role="presentation"
|
|
3915
|
+
aria-hidden="true"
|
|
3916
|
+
></span>
|
|
3917
|
+
<span class="fd-navigation__text">Sales</span>
|
|
3921
3918
|
<span
|
|
3922
3919
|
class="fd-navigation__selection-indicator"
|
|
3923
3920
|
role="presentation"
|
|
@@ -3925,71 +3922,74 @@ Navigation items can display indication tags (e.g., "New", "Beta", "Deprecated")
|
|
|
3925
3922
|
aria-label="selection indicator"
|
|
3926
3923
|
></span>
|
|
3927
3924
|
<span
|
|
3928
|
-
class="fd-
|
|
3925
|
+
class="fd-navigation__has-children-indicator"
|
|
3929
3926
|
role="presentation"
|
|
3930
3927
|
aria-hidden="true"
|
|
3931
|
-
aria-label="
|
|
3928
|
+
aria-label="has children indicator, collapsed"
|
|
3932
3929
|
></span>
|
|
3933
3930
|
</a>
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
|
|
3940
|
-
|
|
3941
|
-
|
|
3942
|
-
|
|
3943
|
-
|
|
3944
|
-
|
|
3945
|
-
|
|
3946
|
-
|
|
3947
|
-
|
|
3948
|
-
|
|
3949
|
-
|
|
3950
|
-
|
|
3951
|
-
tabindex="-1"
|
|
3952
|
-
onclick="toggleNavigationSubmenu(event)"
|
|
3953
|
-
>
|
|
3954
|
-
<span
|
|
3955
|
-
class="fd-navigation__icon sap-icon--crm-sales"
|
|
3956
|
-
role="presentation"
|
|
3957
|
-
aria-hidden="true"
|
|
3958
|
-
></span>
|
|
3959
|
-
<span class="fd-navigation__text">Sales</span>
|
|
3960
|
-
<span
|
|
3961
|
-
class="fd-navigation__selection-indicator"
|
|
3962
|
-
role="presentation"
|
|
3963
|
-
aria-hidden="true"
|
|
3964
|
-
aria-label="selection indicator"
|
|
3965
|
-
></span>
|
|
3966
|
-
<span
|
|
3967
|
-
class="fd-navigation__has-children-indicator"
|
|
3968
|
-
role="presentation"
|
|
3969
|
-
aria-hidden="true"
|
|
3970
|
-
aria-label="has children indicator, collapsed"
|
|
3971
|
-
></span>
|
|
3972
|
-
</a>
|
|
3973
|
-
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
3974
|
-
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
3975
|
-
<ul
|
|
3976
|
-
class="fd-navigation__list fd-navigation__list--child-items"
|
|
3977
|
-
role="tree"
|
|
3978
|
-
aria-roledescription="Navigation List Tree - Child Items"
|
|
3979
|
-
tabindex="-1"
|
|
3931
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
3932
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
3933
|
+
<ul
|
|
3934
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
3935
|
+
role="tree"
|
|
3936
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
3937
|
+
tabindex="-1"
|
|
3938
|
+
>
|
|
3939
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
3940
|
+
<div
|
|
3941
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
3942
|
+
aria-level="3"
|
|
3943
|
+
role="treeitem"
|
|
3944
|
+
title="Leads"
|
|
3945
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
3946
|
+
aria-expanded="false"
|
|
3947
|
+
aria-selected="false"
|
|
3980
3948
|
>
|
|
3949
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
3950
|
+
<span class="fd-navigation__text">Leads</span>
|
|
3951
|
+
<span
|
|
3952
|
+
class="fd-navigation__selection-indicator"
|
|
3953
|
+
role="presentation"
|
|
3954
|
+
aria-hidden="true"
|
|
3955
|
+
aria-label="selection indicator"
|
|
3956
|
+
></span>
|
|
3957
|
+
</a>
|
|
3958
|
+
</div>
|
|
3959
|
+
</li>
|
|
3960
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
3961
|
+
<div
|
|
3962
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
3963
|
+
aria-level="3"
|
|
3964
|
+
role="treeitem"
|
|
3965
|
+
title="Opportunities"
|
|
3966
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
3967
|
+
aria-expanded="false"
|
|
3968
|
+
aria-selected="false"
|
|
3969
|
+
>
|
|
3970
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
3971
|
+
<span class="fd-navigation__text">Opportunities</span>
|
|
3972
|
+
<span
|
|
3973
|
+
class="fd-navigation__selection-indicator"
|
|
3974
|
+
role="presentation"
|
|
3975
|
+
aria-hidden="true"
|
|
3976
|
+
aria-label="selection indicator"
|
|
3977
|
+
></span>
|
|
3978
|
+
</a>
|
|
3979
|
+
</div>
|
|
3980
|
+
</li>
|
|
3981
3981
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
3982
3982
|
<div
|
|
3983
3983
|
class="fd-navigation__item fd-navigation__item--child"
|
|
3984
3984
|
aria-level="3"
|
|
3985
3985
|
role="treeitem"
|
|
3986
|
-
title="
|
|
3986
|
+
title="Quotes"
|
|
3987
3987
|
aria-roledescription="Navigation List Tree Item - Child"
|
|
3988
3988
|
aria-expanded="false"
|
|
3989
3989
|
aria-selected="false"
|
|
3990
3990
|
>
|
|
3991
3991
|
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
3992
|
-
<span class="fd-navigation__text">
|
|
3992
|
+
<span class="fd-navigation__text">Quotes</span>
|
|
3993
3993
|
<span
|
|
3994
3994
|
class="fd-navigation__selection-indicator"
|
|
3995
3995
|
role="presentation"
|
|
@@ -3997,41 +3997,19 @@ Navigation items can display indication tags (e.g., "New", "Beta", "Deprecated")
|
|
|
3997
3997
|
aria-label="selection indicator"
|
|
3998
3998
|
></span>
|
|
3999
3999
|
</a>
|
|
4000
|
-
</div>
|
|
4001
|
-
</li>
|
|
4002
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4003
|
-
<div
|
|
4004
|
-
class="fd-navigation__item fd-navigation__item--child"
|
|
4005
|
-
aria-level="3"
|
|
4006
|
-
role="treeitem"
|
|
4007
|
-
title="Opportunities"
|
|
4008
|
-
aria-roledescription="Navigation List Tree Item - Child"
|
|
4009
|
-
aria-expanded="false"
|
|
4010
|
-
aria-selected="false"
|
|
4011
|
-
>
|
|
4012
|
-
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4013
|
-
<span class="fd-navigation__text">Opportunities</span>
|
|
4014
|
-
<span
|
|
4015
|
-
class="fd-navigation__selection-indicator"
|
|
4016
|
-
role="presentation"
|
|
4017
|
-
aria-hidden="true"
|
|
4018
|
-
aria-label="selection indicator"
|
|
4019
|
-
></span>
|
|
4020
|
-
</a>
|
|
4021
|
-
</div>
|
|
4022
4000
|
</li>
|
|
4023
4001
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4024
4002
|
<div
|
|
4025
4003
|
class="fd-navigation__item fd-navigation__item--child"
|
|
4026
4004
|
aria-level="3"
|
|
4027
4005
|
role="treeitem"
|
|
4028
|
-
title="
|
|
4006
|
+
title="Orders"
|
|
4029
4007
|
aria-roledescription="Navigation List Tree Item - Child"
|
|
4030
4008
|
aria-expanded="false"
|
|
4031
4009
|
aria-selected="false"
|
|
4032
4010
|
>
|
|
4033
4011
|
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4034
|
-
<span class="fd-navigation__text">
|
|
4012
|
+
<span class="fd-navigation__text">Orders</span>
|
|
4035
4013
|
<span
|
|
4036
4014
|
class="fd-navigation__selection-indicator"
|
|
4037
4015
|
role="presentation"
|
|
@@ -4045,13 +4023,13 @@ Navigation items can display indication tags (e.g., "New", "Beta", "Deprecated")
|
|
|
4045
4023
|
class="fd-navigation__item fd-navigation__item--child"
|
|
4046
4024
|
aria-level="3"
|
|
4047
4025
|
role="treeitem"
|
|
4048
|
-
title="
|
|
4026
|
+
title="Invoices"
|
|
4049
4027
|
aria-roledescription="Navigation List Tree Item - Child"
|
|
4050
4028
|
aria-expanded="false"
|
|
4051
4029
|
aria-selected="false"
|
|
4052
4030
|
>
|
|
4053
4031
|
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4054
|
-
<span class="fd-navigation__text">
|
|
4032
|
+
<span class="fd-navigation__text">Invoices</span>
|
|
4055
4033
|
<span
|
|
4056
4034
|
class="fd-navigation__selection-indicator"
|
|
4057
4035
|
role="presentation"
|
|
@@ -4060,259 +4038,281 @@ Navigation items can display indication tags (e.g., "New", "Beta", "Deprecated")
|
|
|
4060
4038
|
></span>
|
|
4061
4039
|
</a>
|
|
4062
4040
|
</li>
|
|
4063
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4064
|
-
<div
|
|
4065
|
-
class="fd-navigation__item fd-navigation__item--child"
|
|
4066
|
-
aria-level="3"
|
|
4067
|
-
role="treeitem"
|
|
4068
|
-
title="Invoices"
|
|
4069
|
-
aria-roledescription="Navigation List Tree Item - Child"
|
|
4070
|
-
aria-expanded="false"
|
|
4071
|
-
aria-selected="false"
|
|
4072
|
-
>
|
|
4073
|
-
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4074
|
-
<span class="fd-navigation__text">Invoices</span>
|
|
4075
|
-
<span
|
|
4076
|
-
class="fd-navigation__selection-indicator"
|
|
4077
|
-
role="presentation"
|
|
4078
|
-
aria-hidden="true"
|
|
4079
|
-
aria-label="selection indicator"
|
|
4080
|
-
></span>
|
|
4081
|
-
</a>
|
|
4082
|
-
</li>
|
|
4083
|
-
</ul>
|
|
4084
|
-
</li>
|
|
4085
4041
|
</ul>
|
|
4086
4042
|
</li>
|
|
4043
|
+
</ul>
|
|
4044
|
+
</li>
|
|
4087
4045
|
|
|
4088
|
-
|
|
4089
|
-
|
|
4090
|
-
|
|
4091
|
-
|
|
4092
|
-
|
|
4093
|
-
|
|
4094
|
-
|
|
4095
|
-
|
|
4096
|
-
|
|
4097
|
-
|
|
4098
|
-
|
|
4099
|
-
|
|
4100
|
-
|
|
4101
|
-
|
|
4102
|
-
|
|
4103
|
-
|
|
4104
|
-
|
|
4105
|
-
|
|
4106
|
-
|
|
4107
|
-
|
|
4108
|
-
|
|
4109
|
-
|
|
4110
|
-
|
|
4111
|
-
|
|
4112
|
-
|
|
4113
|
-
|
|
4114
|
-
|
|
4115
|
-
|
|
4116
|
-
|
|
4117
|
-
|
|
4118
|
-
|
|
4119
|
-
|
|
4120
|
-
|
|
4121
|
-
|
|
4122
|
-
|
|
4123
|
-
|
|
4124
|
-
|
|
4125
|
-
|
|
4126
|
-
|
|
4127
|
-
|
|
4128
|
-
|
|
4129
|
-
|
|
4130
|
-
|
|
4046
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4047
|
+
<div
|
|
4048
|
+
class="fd-navigation__item fd-navigation__item--with-expander"
|
|
4049
|
+
aria-level="2"
|
|
4050
|
+
role="treeitem"
|
|
4051
|
+
title="Customer Management"
|
|
4052
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
4053
|
+
aria-expanded="true"
|
|
4054
|
+
aria-selected="false"
|
|
4055
|
+
>
|
|
4056
|
+
<a class="fd-navigation__link" href="#">
|
|
4057
|
+
<span
|
|
4058
|
+
class="fd-navigation__icon sap-icon--account"
|
|
4059
|
+
role="presentation"
|
|
4060
|
+
aria-hidden="true"
|
|
4061
|
+
></span>
|
|
4062
|
+
<span class="fd-navigation__text"
|
|
4063
|
+
>Customer Management
|
|
4064
|
+
<span class="fd-object-status fd-object-status--inverted fd-object-status--indication-9b">
|
|
4065
|
+
<span class="fd-object-status__text">Preview</span>
|
|
4066
|
+
<span class="fd-object-status__sr-only">Object Status</span>
|
|
4067
|
+
<span class="fd-object-status__sr-only">Indication Color 9b</span>
|
|
4068
|
+
</span>
|
|
4069
|
+
</span>
|
|
4070
|
+
<span
|
|
4071
|
+
class="fd-navigation__selection-indicator"
|
|
4072
|
+
role="presentation"
|
|
4073
|
+
aria-hidden="true"
|
|
4074
|
+
aria-label="selection indicator"
|
|
4075
|
+
></span>
|
|
4076
|
+
</a>
|
|
4077
|
+
<span
|
|
4078
|
+
class="fd-navigation__has-children-indicator"
|
|
4079
|
+
role="button"
|
|
4080
|
+
aria-label="expand/collapse children"
|
|
4081
|
+
></span>
|
|
4082
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
4083
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
4084
|
+
<ul
|
|
4085
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
4086
|
+
role="tree"
|
|
4087
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
4088
|
+
tabindex="-1"
|
|
4089
|
+
>
|
|
4090
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4091
|
+
<div
|
|
4092
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4093
|
+
aria-level="3"
|
|
4094
|
+
role="treeitem"
|
|
4095
|
+
title="Contacts"
|
|
4096
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4097
|
+
aria-expanded="false"
|
|
4098
|
+
aria-selected="false"
|
|
4131
4099
|
>
|
|
4100
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4101
|
+
<span class="fd-navigation__text">Contacts</span>
|
|
4102
|
+
<span
|
|
4103
|
+
class="fd-navigation__selection-indicator"
|
|
4104
|
+
role="presentation"
|
|
4105
|
+
aria-hidden="true"
|
|
4106
|
+
aria-label="selection indicator"
|
|
4107
|
+
></span>
|
|
4108
|
+
</a>
|
|
4109
|
+
</div>
|
|
4110
|
+
</li>
|
|
4111
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4112
|
+
<div
|
|
4113
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4114
|
+
aria-level="3"
|
|
4115
|
+
role="treeitem"
|
|
4116
|
+
title="Companies"
|
|
4117
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4118
|
+
aria-expanded="false"
|
|
4119
|
+
aria-selected="false"
|
|
4120
|
+
>
|
|
4121
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4122
|
+
<span class="fd-navigation__text">Companies</span>
|
|
4123
|
+
<span
|
|
4124
|
+
class="fd-navigation__selection-indicator"
|
|
4125
|
+
role="presentation"
|
|
4126
|
+
aria-hidden="true"
|
|
4127
|
+
aria-label="selection indicator"
|
|
4128
|
+
></span>
|
|
4129
|
+
</a>
|
|
4130
|
+
</div>
|
|
4131
|
+
</li>
|
|
4132
4132
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4133
4133
|
<div
|
|
4134
4134
|
class="fd-navigation__item fd-navigation__item--child"
|
|
4135
4135
|
aria-level="3"
|
|
4136
4136
|
role="treeitem"
|
|
4137
|
-
title="
|
|
4137
|
+
title="Partners"
|
|
4138
4138
|
aria-roledescription="Navigation List Tree Item - Child"
|
|
4139
4139
|
aria-expanded="false"
|
|
4140
4140
|
aria-selected="false"
|
|
4141
4141
|
>
|
|
4142
4142
|
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4143
|
-
<span class="fd-navigation__text">
|
|
4143
|
+
<span class="fd-navigation__text">Partners (external link)</span>
|
|
4144
4144
|
<span
|
|
4145
4145
|
class="fd-navigation__selection-indicator"
|
|
4146
4146
|
role="presentation"
|
|
4147
4147
|
aria-hidden="true"
|
|
4148
4148
|
aria-label="selection indicator"
|
|
4149
4149
|
></span>
|
|
4150
|
-
</a>
|
|
4151
|
-
</div>
|
|
4152
|
-
</li>
|
|
4153
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4154
|
-
<div
|
|
4155
|
-
class="fd-navigation__item fd-navigation__item--child"
|
|
4156
|
-
aria-level="3"
|
|
4157
|
-
role="treeitem"
|
|
4158
|
-
title="Companies"
|
|
4159
|
-
aria-roledescription="Navigation List Tree Item - Child"
|
|
4160
|
-
aria-expanded="false"
|
|
4161
|
-
aria-selected="false"
|
|
4162
|
-
>
|
|
4163
|
-
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4164
|
-
<span class="fd-navigation__text">Companies</span>
|
|
4165
4150
|
<span
|
|
4166
|
-
class="fd-
|
|
4151
|
+
class="fd-navigation__external-link-indicator"
|
|
4167
4152
|
role="presentation"
|
|
4168
4153
|
aria-hidden="true"
|
|
4169
|
-
aria-label="
|
|
4154
|
+
aria-label="external link indicator"
|
|
4170
4155
|
></span>
|
|
4171
4156
|
</a>
|
|
4172
|
-
</
|
|
4173
|
-
</
|
|
4157
|
+
</li>
|
|
4158
|
+
</ul>
|
|
4159
|
+
</li>
|
|
4160
|
+
|
|
4161
|
+
<li
|
|
4162
|
+
class="fd-navigation__list-item fd-navigation__list-item--separator"
|
|
4163
|
+
role="presentation"
|
|
4164
|
+
aria-hidden="true"
|
|
4165
|
+
></li>
|
|
4166
|
+
|
|
4174
4167
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4175
4168
|
<div
|
|
4176
|
-
class="fd-navigation__item fd-navigation__item--
|
|
4177
|
-
aria-level="
|
|
4169
|
+
class="fd-navigation__item fd-navigation__item--group"
|
|
4170
|
+
aria-level="1"
|
|
4178
4171
|
role="treeitem"
|
|
4179
|
-
title="
|
|
4180
|
-
aria-roledescription="Navigation List Tree Item -
|
|
4181
|
-
aria-expanded="false"
|
|
4172
|
+
title="Additional Items"
|
|
4173
|
+
aria-roledescription="Navigation List Tree Item - Group"
|
|
4182
4174
|
aria-selected="false"
|
|
4175
|
+
aria-expanded="false"
|
|
4183
4176
|
>
|
|
4184
|
-
<a class="fd-navigation__link" role="
|
|
4185
|
-
<span class="fd-navigation__text">
|
|
4177
|
+
<a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
|
|
4178
|
+
<span class="fd-navigation__text">Additional Items</span>
|
|
4186
4179
|
<span
|
|
4187
|
-
class="fd-
|
|
4180
|
+
class="fd-navigation__has-children-indicator"
|
|
4188
4181
|
role="presentation"
|
|
4189
4182
|
aria-hidden="true"
|
|
4190
|
-
aria-label="
|
|
4183
|
+
aria-label="has children indicator, expanded"
|
|
4191
4184
|
></span>
|
|
4192
|
-
|
|
4193
|
-
class="fd-navigation__external-link-indicator"
|
|
4194
|
-
role="presentation"
|
|
4195
|
-
aria-hidden="true"
|
|
4196
|
-
aria-label="external link indicator"
|
|
4197
|
-
></span>
|
|
4198
|
-
</a>
|
|
4199
|
-
</li>
|
|
4200
|
-
</ul>
|
|
4201
|
-
</li>
|
|
4202
|
-
|
|
4203
|
-
<li
|
|
4204
|
-
class="fd-navigation__list-item fd-navigation__list-item--separator"
|
|
4205
|
-
role="presentation"
|
|
4206
|
-
aria-hidden="true"
|
|
4207
|
-
></li>
|
|
4185
|
+
</a>
|
|
4208
4186
|
|
|
4209
|
-
|
|
4210
|
-
|
|
4211
|
-
|
|
4212
|
-
aria-
|
|
4213
|
-
|
|
4214
|
-
title="Additional Items"
|
|
4215
|
-
aria-roledescription="Navigation List Tree Item - Group"
|
|
4216
|
-
aria-selected="false"
|
|
4217
|
-
aria-expanded="false"
|
|
4187
|
+
<ul
|
|
4188
|
+
class="fd-navigation__list fd-navigation__list--parent-items"
|
|
4189
|
+
role="tree"
|
|
4190
|
+
aria-roledescription="Navigation List Tree - Parent Items"
|
|
4191
|
+
tabindex="-1"
|
|
4218
4192
|
>
|
|
4219
|
-
<
|
|
4220
|
-
<
|
|
4221
|
-
|
|
4222
|
-
|
|
4223
|
-
role="
|
|
4224
|
-
|
|
4225
|
-
aria-
|
|
4226
|
-
|
|
4227
|
-
|
|
4228
|
-
|
|
4229
|
-
<ul
|
|
4230
|
-
class="fd-navigation__list fd-navigation__list--parent-items"
|
|
4231
|
-
role="tree"
|
|
4232
|
-
aria-roledescription="Navigation List Tree - Parent Items"
|
|
4233
|
-
tabindex="-1"
|
|
4193
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4194
|
+
<div
|
|
4195
|
+
class="fd-navigation__item"
|
|
4196
|
+
aria-level="2"
|
|
4197
|
+
role="treeitem"
|
|
4198
|
+
title="Products"
|
|
4199
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
4200
|
+
aria-selected="false"
|
|
4201
|
+
aria-expanded="false"
|
|
4234
4202
|
>
|
|
4235
|
-
<
|
|
4236
|
-
<
|
|
4237
|
-
class="fd-
|
|
4238
|
-
|
|
4239
|
-
|
|
4240
|
-
|
|
4241
|
-
|
|
4242
|
-
|
|
4243
|
-
|
|
4244
|
-
|
|
4245
|
-
|
|
4246
|
-
|
|
4247
|
-
|
|
4248
|
-
|
|
4249
|
-
|
|
4250
|
-
|
|
4251
|
-
|
|
4203
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4204
|
+
<span
|
|
4205
|
+
class="fd-navigation__icon sap-icon--customer-view"
|
|
4206
|
+
role="presentation"
|
|
4207
|
+
aria-hidden="true"
|
|
4208
|
+
></span>
|
|
4209
|
+
<span class="fd-navigation__text">Products</span>
|
|
4210
|
+
<span
|
|
4211
|
+
class="fd-navigation__selection-indicator"
|
|
4212
|
+
role="presentation"
|
|
4213
|
+
aria-hidden="true"
|
|
4214
|
+
aria-label="selection indicator"
|
|
4215
|
+
></span>
|
|
4216
|
+
</a>
|
|
4217
|
+
</li>
|
|
4218
|
+
|
|
4219
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4220
|
+
<div
|
|
4221
|
+
class="fd-navigation__item"
|
|
4222
|
+
aria-level="2"
|
|
4223
|
+
role="treeitem"
|
|
4224
|
+
title="Marketing"
|
|
4225
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
4226
|
+
aria-expanded="true"
|
|
4227
|
+
aria-selected="false"
|
|
4228
|
+
>
|
|
4229
|
+
<a
|
|
4230
|
+
class="fd-navigation__link"
|
|
4231
|
+
role="button"
|
|
4232
|
+
tabindex="-1"
|
|
4233
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
4234
|
+
>
|
|
4252
4235
|
<span
|
|
4253
|
-
class="fd-
|
|
4236
|
+
class="fd-navigation__icon sap-icon--marketing-campaign"
|
|
4254
4237
|
role="presentation"
|
|
4255
4238
|
aria-hidden="true"
|
|
4256
|
-
aria-label="selection indicator"
|
|
4257
4239
|
></span>
|
|
4258
|
-
|
|
4259
|
-
|
|
4260
|
-
|
|
4261
|
-
|
|
4262
|
-
|
|
4263
|
-
|
|
4264
|
-
|
|
4265
|
-
role="treeitem"
|
|
4266
|
-
title="Marketing"
|
|
4267
|
-
aria-roledescription="Navigation List Tree Item - Parent"
|
|
4268
|
-
aria-expanded="true"
|
|
4269
|
-
aria-selected="false"
|
|
4270
|
-
>
|
|
4271
|
-
<a
|
|
4272
|
-
class="fd-navigation__link"
|
|
4273
|
-
role="button"
|
|
4274
|
-
tabindex="-1"
|
|
4275
|
-
onclick="toggleNavigationSubmenu(event)"
|
|
4276
|
-
>
|
|
4240
|
+
<span class="fd-navigation__text">Marketing</span>
|
|
4241
|
+
<span
|
|
4242
|
+
class="fd-navigation__selection-indicator"
|
|
4243
|
+
role="presentation"
|
|
4244
|
+
aria-hidden="true"
|
|
4245
|
+
aria-label="selection indicator"
|
|
4246
|
+
></span>
|
|
4277
4247
|
<span
|
|
4278
|
-
class="fd-
|
|
4248
|
+
class="fd-navigation__has-children-indicator"
|
|
4279
4249
|
role="presentation"
|
|
4280
4250
|
aria-hidden="true"
|
|
4251
|
+
aria-label="has children indicator, expanded"
|
|
4281
4252
|
></span>
|
|
4282
|
-
|
|
4283
|
-
|
|
4284
|
-
|
|
4285
|
-
|
|
4286
|
-
|
|
4287
|
-
|
|
4288
|
-
|
|
4289
|
-
|
|
4290
|
-
|
|
4291
|
-
|
|
4292
|
-
|
|
4293
|
-
|
|
4294
|
-
|
|
4295
|
-
|
|
4296
|
-
|
|
4297
|
-
|
|
4298
|
-
|
|
4299
|
-
|
|
4300
|
-
role="tree"
|
|
4301
|
-
aria-roledescription="Navigation List Tree - Child Items"
|
|
4302
|
-
tabindex="-1"
|
|
4253
|
+
</a>
|
|
4254
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
4255
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
4256
|
+
<ul
|
|
4257
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
4258
|
+
role="tree"
|
|
4259
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
4260
|
+
tabindex="-1"
|
|
4261
|
+
>
|
|
4262
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4263
|
+
<div
|
|
4264
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4265
|
+
aria-level="3"
|
|
4266
|
+
role="treeitem"
|
|
4267
|
+
title="Campaigns"
|
|
4268
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4269
|
+
aria-expanded="false"
|
|
4270
|
+
aria-selected="false"
|
|
4303
4271
|
>
|
|
4272
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4273
|
+
<span class="fd-navigation__text">Campaigns</span>
|
|
4274
|
+
<span
|
|
4275
|
+
class="fd-navigation__selection-indicator"
|
|
4276
|
+
role="presentation"
|
|
4277
|
+
aria-hidden="true"
|
|
4278
|
+
aria-label="selection indicator"
|
|
4279
|
+
></span>
|
|
4280
|
+
</a>
|
|
4281
|
+
</div>
|
|
4282
|
+
</li>
|
|
4283
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4284
|
+
<div
|
|
4285
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4286
|
+
aria-level="3"
|
|
4287
|
+
role="treeitem"
|
|
4288
|
+
title="E-Mail Marketing"
|
|
4289
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4290
|
+
aria-expanded="false"
|
|
4291
|
+
aria-selected="false"
|
|
4292
|
+
>
|
|
4293
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4294
|
+
<span class="fd-navigation__text">E-Mail Marketing</span>
|
|
4295
|
+
<span
|
|
4296
|
+
class="fd-navigation__selection-indicator"
|
|
4297
|
+
role="presentation"
|
|
4298
|
+
aria-hidden="true"
|
|
4299
|
+
aria-label="selection indicator"
|
|
4300
|
+
></span>
|
|
4301
|
+
</a>
|
|
4302
|
+
</div>
|
|
4303
|
+
</li>
|
|
4304
4304
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4305
4305
|
<div
|
|
4306
4306
|
class="fd-navigation__item fd-navigation__item--child"
|
|
4307
4307
|
aria-level="3"
|
|
4308
4308
|
role="treeitem"
|
|
4309
|
-
title="
|
|
4309
|
+
title="Marketing Automation"
|
|
4310
4310
|
aria-roledescription="Navigation List Tree Item - Child"
|
|
4311
4311
|
aria-expanded="false"
|
|
4312
4312
|
aria-selected="false"
|
|
4313
4313
|
>
|
|
4314
4314
|
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4315
|
-
<span class="fd-navigation__text">
|
|
4315
|
+
<span class="fd-navigation__text">Marketing Automation</span>
|
|
4316
4316
|
<span
|
|
4317
4317
|
class="fd-navigation__selection-indicator"
|
|
4318
4318
|
role="presentation"
|
|
@@ -4320,107 +4320,107 @@ Navigation items can display indication tags (e.g., "New", "Beta", "Deprecated")
|
|
|
4320
4320
|
aria-label="selection indicator"
|
|
4321
4321
|
></span>
|
|
4322
4322
|
</a>
|
|
4323
|
-
</
|
|
4324
|
-
</
|
|
4325
|
-
|
|
4326
|
-
|
|
4327
|
-
|
|
4328
|
-
|
|
4329
|
-
|
|
4330
|
-
|
|
4331
|
-
|
|
4332
|
-
|
|
4333
|
-
|
|
4323
|
+
</li>
|
|
4324
|
+
</ul>
|
|
4325
|
+
</li>
|
|
4326
|
+
|
|
4327
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4328
|
+
<div
|
|
4329
|
+
class="fd-navigation__item"
|
|
4330
|
+
aria-level="2"
|
|
4331
|
+
role="treeitem"
|
|
4332
|
+
title="Reports"
|
|
4333
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
4334
|
+
aria-expanded="true"
|
|
4335
|
+
aria-selected="false"
|
|
4336
|
+
>
|
|
4337
|
+
<a
|
|
4338
|
+
class="fd-navigation__link"
|
|
4339
|
+
role="button"
|
|
4340
|
+
tabindex="-1"
|
|
4341
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
4334
4342
|
>
|
|
4335
|
-
<
|
|
4336
|
-
|
|
4343
|
+
<span
|
|
4344
|
+
class="fd-navigation__icon sap-icon--manager-insight"
|
|
4345
|
+
role="presentation"
|
|
4346
|
+
aria-hidden="true"
|
|
4347
|
+
></span>
|
|
4348
|
+
<span class="fd-navigation__text">Reports</span>
|
|
4337
4349
|
<span
|
|
4338
4350
|
class="fd-navigation__selection-indicator"
|
|
4339
4351
|
role="presentation"
|
|
4340
4352
|
aria-hidden="true"
|
|
4341
4353
|
aria-label="selection indicator"
|
|
4342
4354
|
></span>
|
|
4343
|
-
</a>
|
|
4344
|
-
</div>
|
|
4345
|
-
</li>
|
|
4346
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4347
|
-
<div
|
|
4348
|
-
class="fd-navigation__item fd-navigation__item--child"
|
|
4349
|
-
aria-level="3"
|
|
4350
|
-
role="treeitem"
|
|
4351
|
-
title="Marketing Automation"
|
|
4352
|
-
aria-roledescription="Navigation List Tree Item - Child"
|
|
4353
|
-
aria-expanded="false"
|
|
4354
|
-
aria-selected="false"
|
|
4355
|
-
>
|
|
4356
|
-
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4357
|
-
<span class="fd-navigation__text">Marketing Automation</span>
|
|
4358
4355
|
<span
|
|
4359
|
-
class="fd-
|
|
4356
|
+
class="fd-navigation__has-children-indicator"
|
|
4360
4357
|
role="presentation"
|
|
4361
4358
|
aria-hidden="true"
|
|
4362
|
-
aria-label="
|
|
4359
|
+
aria-label="has children indicator, expanded"
|
|
4363
4360
|
></span>
|
|
4364
4361
|
</a>
|
|
4365
|
-
|
|
4366
|
-
|
|
4367
|
-
|
|
4368
|
-
|
|
4369
|
-
|
|
4370
|
-
|
|
4371
|
-
|
|
4372
|
-
|
|
4373
|
-
|
|
4374
|
-
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
tabindex="-1"
|
|
4383
|
-
onclick="toggleNavigationSubmenu(event)"
|
|
4384
|
-
>
|
|
4385
|
-
<span
|
|
4386
|
-
class="fd-navigation__icon sap-icon--manager-insight"
|
|
4387
|
-
role="presentation"
|
|
4388
|
-
aria-hidden="true"
|
|
4389
|
-
></span>
|
|
4390
|
-
<span class="fd-navigation__text">Reports</span>
|
|
4391
|
-
<span
|
|
4392
|
-
class="fd-navigation__selection-indicator"
|
|
4393
|
-
role="presentation"
|
|
4394
|
-
aria-hidden="true"
|
|
4395
|
-
aria-label="selection indicator"
|
|
4396
|
-
></span>
|
|
4397
|
-
<span
|
|
4398
|
-
class="fd-navigation__has-children-indicator"
|
|
4399
|
-
role="presentation"
|
|
4400
|
-
aria-hidden="true"
|
|
4401
|
-
aria-label="has children indicator, expanded"
|
|
4402
|
-
></span>
|
|
4403
|
-
</a>
|
|
4404
|
-
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
4405
|
-
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
4406
|
-
<ul
|
|
4407
|
-
class="fd-navigation__list fd-navigation__list--child-items"
|
|
4408
|
-
role="tree"
|
|
4409
|
-
aria-roledescription="Navigation List Tree - Child Items"
|
|
4410
|
-
tabindex="-1"
|
|
4362
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
4363
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
4364
|
+
<ul
|
|
4365
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
4366
|
+
role="tree"
|
|
4367
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
4368
|
+
tabindex="-1"
|
|
4369
|
+
>
|
|
4370
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4371
|
+
<div
|
|
4372
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4373
|
+
aria-level="3"
|
|
4374
|
+
role="treeitem"
|
|
4375
|
+
title="Sales Report"
|
|
4376
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4377
|
+
aria-expanded="false"
|
|
4378
|
+
aria-selected="false"
|
|
4411
4379
|
>
|
|
4380
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4381
|
+
<span class="fd-navigation__text">Sales Report</span>
|
|
4382
|
+
<span
|
|
4383
|
+
class="fd-navigation__selection-indicator"
|
|
4384
|
+
role="presentation"
|
|
4385
|
+
aria-hidden="true"
|
|
4386
|
+
aria-label="selection indicator"
|
|
4387
|
+
></span>
|
|
4388
|
+
</a>
|
|
4389
|
+
</div>
|
|
4390
|
+
</li>
|
|
4391
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4392
|
+
<div
|
|
4393
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4394
|
+
aria-level="3"
|
|
4395
|
+
role="treeitem"
|
|
4396
|
+
title="Customer Reports"
|
|
4397
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4398
|
+
aria-expanded="false"
|
|
4399
|
+
aria-selected="false"
|
|
4400
|
+
>
|
|
4401
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4402
|
+
<span class="fd-navigation__text">Customer Reports</span>
|
|
4403
|
+
<span
|
|
4404
|
+
class="fd-navigation__selection-indicator"
|
|
4405
|
+
role="presentation"
|
|
4406
|
+
aria-hidden="true"
|
|
4407
|
+
aria-label="selection indicator"
|
|
4408
|
+
></span>
|
|
4409
|
+
</a>
|
|
4410
|
+
</div>
|
|
4411
|
+
</li>
|
|
4412
4412
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4413
4413
|
<div
|
|
4414
4414
|
class="fd-navigation__item fd-navigation__item--child"
|
|
4415
4415
|
aria-level="3"
|
|
4416
4416
|
role="treeitem"
|
|
4417
|
-
title="
|
|
4417
|
+
title="Marketing Reports"
|
|
4418
4418
|
aria-roledescription="Navigation List Tree Item - Child"
|
|
4419
4419
|
aria-expanded="false"
|
|
4420
4420
|
aria-selected="false"
|
|
4421
4421
|
>
|
|
4422
4422
|
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4423
|
-
<span class="fd-navigation__text">
|
|
4423
|
+
<span class="fd-navigation__text">Marketing Reports</span>
|
|
4424
4424
|
<span
|
|
4425
4425
|
class="fd-navigation__selection-indicator"
|
|
4426
4426
|
role="presentation"
|
|
@@ -4428,106 +4428,1886 @@ Navigation items can display indication tags (e.g., "New", "Beta", "Deprecated")
|
|
|
4428
4428
|
aria-label="selection indicator"
|
|
4429
4429
|
></span>
|
|
4430
4430
|
</a>
|
|
4431
|
+
</li>
|
|
4432
|
+
</ul>
|
|
4433
|
+
</li>
|
|
4434
|
+
</ul>
|
|
4435
|
+
</li>
|
|
4436
|
+
|
|
4437
|
+
<li
|
|
4438
|
+
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
4439
|
+
role="presentation"
|
|
4440
|
+
aria-hidden="true"
|
|
4441
|
+
></li>
|
|
4442
|
+
</ul>
|
|
4443
|
+
|
|
4444
|
+
<div class="fd-navigation__container fd-navigation__container--bottom">
|
|
4445
|
+
<ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
|
|
4446
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4447
|
+
<div
|
|
4448
|
+
class="fd-navigation__item fd-navigation__item--create"
|
|
4449
|
+
aria-level="1"
|
|
4450
|
+
role="treeitem"
|
|
4451
|
+
title="Create Ticket"
|
|
4452
|
+
aria-roledescription="Navigation List Tree Item"
|
|
4453
|
+
aria-selected="false"
|
|
4454
|
+
aria-expanded="false"
|
|
4455
|
+
>
|
|
4456
|
+
<button class="fd-navigation__link">
|
|
4457
|
+
<span
|
|
4458
|
+
class="fd-navigation__icon sap-icon--write-new"
|
|
4459
|
+
role="presentation"
|
|
4460
|
+
aria-hidden="true"
|
|
4461
|
+
></span>
|
|
4462
|
+
<span class="fd-navigation__text">Create Ticket</span>
|
|
4463
|
+
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
|
|
4464
|
+
</button>
|
|
4431
4465
|
</div>
|
|
4432
4466
|
</li>
|
|
4467
|
+
|
|
4433
4468
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4434
4469
|
<div
|
|
4435
|
-
class="fd-navigation__item
|
|
4436
|
-
aria-level="
|
|
4470
|
+
class="fd-navigation__item"
|
|
4471
|
+
aria-level="1"
|
|
4437
4472
|
role="treeitem"
|
|
4438
|
-
title="
|
|
4439
|
-
aria-roledescription="Navigation List Tree Item
|
|
4440
|
-
aria-expanded="false"
|
|
4473
|
+
title="Product Settings"
|
|
4474
|
+
aria-roledescription="Navigation List Tree Item"
|
|
4441
4475
|
aria-selected="false"
|
|
4476
|
+
aria-expanded="false"
|
|
4442
4477
|
>
|
|
4443
4478
|
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4444
|
-
<span class="fd-navigation__text">Customer Reports</span>
|
|
4445
4479
|
<span
|
|
4446
|
-
class="fd-
|
|
4480
|
+
class="fd-navigation__icon sap-icon--settings"
|
|
4447
4481
|
role="presentation"
|
|
4448
4482
|
aria-hidden="true"
|
|
4449
|
-
aria-label="selection indicator"
|
|
4450
4483
|
></span>
|
|
4484
|
+
<span class="fd-navigation__text">Product Settings</span>
|
|
4485
|
+
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
|
|
4451
4486
|
</a>
|
|
4452
|
-
</
|
|
4453
|
-
</
|
|
4454
|
-
|
|
4455
|
-
<div
|
|
4456
|
-
class="fd-navigation__item fd-navigation__item--child"
|
|
4457
|
-
aria-level="3"
|
|
4458
|
-
role="treeitem"
|
|
4459
|
-
title="Marketing Reports"
|
|
4460
|
-
aria-roledescription="Navigation List Tree Item - Child"
|
|
4461
|
-
aria-expanded="false"
|
|
4462
|
-
aria-selected="false"
|
|
4463
|
-
>
|
|
4464
|
-
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4465
|
-
<span class="fd-navigation__text">Marketing Reports</span>
|
|
4466
|
-
<span
|
|
4467
|
-
class="fd-navigation__selection-indicator"
|
|
4468
|
-
role="presentation"
|
|
4469
|
-
aria-hidden="true"
|
|
4470
|
-
aria-label="selection indicator"
|
|
4471
|
-
></span>
|
|
4472
|
-
</a>
|
|
4473
|
-
</li>
|
|
4474
|
-
</ul>
|
|
4475
|
-
</li>
|
|
4476
|
-
</ul>
|
|
4477
|
-
</li>
|
|
4487
|
+
</li>
|
|
4488
|
+
</ul>
|
|
4489
|
+
```
|
|
4478
4490
|
|
|
4479
|
-
|
|
4480
|
-
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
4481
|
-
role="presentation"
|
|
4482
|
-
aria-hidden="true"
|
|
4483
|
-
></li>
|
|
4484
|
-
</ul>
|
|
4491
|
+
### Vertical Navigation - Sticky Area
|
|
4485
4492
|
|
|
4486
|
-
|
|
4487
|
-
|
|
4488
|
-
|
|
4489
|
-
|
|
4490
|
-
|
|
4491
|
-
|
|
4492
|
-
|
|
4493
|
-
|
|
4494
|
-
|
|
4495
|
-
|
|
4496
|
-
|
|
4497
|
-
|
|
4498
|
-
|
|
4499
|
-
|
|
4500
|
-
|
|
4501
|
-
|
|
4502
|
-
|
|
4503
|
-
|
|
4504
|
-
|
|
4505
|
-
|
|
4506
|
-
|
|
4507
|
-
|
|
4508
|
-
|
|
4493
|
+
Fixed header area that is separated by a separator similar to the footer area. Top-aligned and fixed/sticky (always visible). Contains the optional search field. Add <code>.fd-navigation__container--sticky</code> together with <code>.fd-navigation__container--top</code> modifier class to the <code>.fd-navigation__container</code> base class to make the top area sticky.<br>
|
|
4494
|
+
Guideline: Recommended not to contain more than 4 items.
|
|
4495
|
+
|
|
4496
|
+
```html
|
|
4497
|
+
<div
|
|
4498
|
+
class="fd-navigation fd-navigation--vertical"
|
|
4499
|
+
role="navigation"
|
|
4500
|
+
aria-roledescription="Side Navigation"
|
|
4501
|
+
|
|
4502
|
+
>
|
|
4503
|
+
<div class="fd-navigation__container fd-navigation__container--top fd-navigation__container--sticky">
|
|
4504
|
+
<ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
|
|
4505
|
+
<li class="fd-navigation__list-item" role="presentation">
|
|
4506
|
+
<div class="fd-input-group">
|
|
4507
|
+
<input
|
|
4508
|
+
class="fd-input fd-input-group__input"
|
|
4509
|
+
type="text"
|
|
4510
|
+
id="side-nav-search-sticky"
|
|
4511
|
+
name="two-icon-actions"
|
|
4512
|
+
placeholder="Search"
|
|
4513
|
+
autocomplete="off"
|
|
4514
|
+
aria-label="Search"
|
|
4515
|
+
/>
|
|
4516
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
4517
|
+
<button
|
|
4518
|
+
class="fd-input-group__button fd-button fd-button--icon fd-button--transparent"
|
|
4519
|
+
type="button"
|
|
4520
|
+
aria-label="Search value"
|
|
4521
|
+
>
|
|
4522
|
+
<i class="sap-icon--search" aria-hidden="true" role="presentation"></i>
|
|
4523
|
+
</button>
|
|
4524
|
+
</span>
|
|
4525
|
+
</div>
|
|
4526
|
+
</li>
|
|
4527
|
+
|
|
4528
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4529
|
+
<div
|
|
4530
|
+
class="fd-navigation__item"
|
|
4531
|
+
aria-level="1"
|
|
4532
|
+
role="treeitem"
|
|
4533
|
+
title="Home"
|
|
4534
|
+
aria-roledescription="Navigation List Tree Item"
|
|
4535
|
+
aria-selected="false"
|
|
4536
|
+
aria-expanded="false"
|
|
4537
|
+
>
|
|
4538
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4539
|
+
<span class="fd-navigation__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
|
|
4540
|
+
<span class="fd-navigation__text">Home</span>
|
|
4541
|
+
<span
|
|
4542
|
+
class="fd-navigation__selection-indicator"
|
|
4543
|
+
role="presentation"
|
|
4544
|
+
aria-hidden="true"
|
|
4545
|
+
aria-label="selection indicator"
|
|
4546
|
+
></span>
|
|
4547
|
+
</a>
|
|
4548
|
+
</div>
|
|
4549
|
+
</li>
|
|
4550
|
+
|
|
4551
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4552
|
+
<div
|
|
4553
|
+
class="fd-navigation__item"
|
|
4554
|
+
aria-level="1"
|
|
4555
|
+
role="treeitem"
|
|
4556
|
+
title="Resource Planning and Business Management Solutions"
|
|
4557
|
+
aria-roledescription="Navigation List Tree Item"
|
|
4558
|
+
aria-selected="false"
|
|
4559
|
+
aria-expanded="false"
|
|
4560
|
+
>
|
|
4561
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4562
|
+
<span
|
|
4563
|
+
class="fd-navigation__icon sap-icon--bbyd-dashboard"
|
|
4564
|
+
role="presentation"
|
|
4565
|
+
aria-hidden="true"
|
|
4566
|
+
></span>
|
|
4567
|
+
<span class="fd-navigation__text"> Resource Planning and Business Management Solutions </span>
|
|
4568
|
+
<span
|
|
4569
|
+
class="fd-navigation__selection-indicator"
|
|
4570
|
+
role="presentation"
|
|
4571
|
+
aria-hidden="true"
|
|
4572
|
+
aria-label="selection indicator"
|
|
4573
|
+
></span>
|
|
4574
|
+
</a>
|
|
4575
|
+
</li>
|
|
4576
|
+
</ul>
|
|
4577
|
+
|
|
4578
|
+
<div class="fd-navigation__container fd-navigation__container--top">
|
|
4579
|
+
<ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
|
|
4580
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4581
|
+
<div
|
|
4582
|
+
class="fd-navigation__item fd-navigation__item--group"
|
|
4583
|
+
aria-level="1"
|
|
4584
|
+
role="treeitem"
|
|
4585
|
+
title="Main Items Group"
|
|
4586
|
+
aria-roledescription="Navigation List Tree Item - Group"
|
|
4587
|
+
aria-selected="false"
|
|
4588
|
+
aria-expanded="true"
|
|
4589
|
+
>
|
|
4590
|
+
<a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
|
|
4591
|
+
<span class="fd-navigation__text">Main Items</span>
|
|
4592
|
+
<span
|
|
4593
|
+
class="fd-navigation__has-children-indicator"
|
|
4594
|
+
role="presentation"
|
|
4595
|
+
aria-hidden="true"
|
|
4596
|
+
aria-label="has children indicator, expanded"
|
|
4597
|
+
></span>
|
|
4598
|
+
</a>
|
|
4599
|
+
</div>
|
|
4600
|
+
|
|
4601
|
+
<ul
|
|
4602
|
+
class="fd-navigation__list fd-navigation__list--parent-items"
|
|
4603
|
+
role="tree"
|
|
4604
|
+
aria-roledescription="Navigation List Tree - Parent Items"
|
|
4605
|
+
tabindex="-1"
|
|
4606
|
+
>
|
|
4607
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4608
|
+
<div
|
|
4609
|
+
class="fd-navigation__item"
|
|
4610
|
+
aria-level="2"
|
|
4611
|
+
role="treeitem"
|
|
4612
|
+
title="Basket"
|
|
4613
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
4614
|
+
aria-expanded="true"
|
|
4615
|
+
aria-selected="false"
|
|
4616
|
+
>
|
|
4617
|
+
<a
|
|
4618
|
+
class="fd-navigation__link"
|
|
4619
|
+
role="button"
|
|
4620
|
+
tabindex="-1"
|
|
4621
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
4622
|
+
>
|
|
4623
|
+
<span
|
|
4624
|
+
class="fd-navigation__icon sap-icon--unfavorite"
|
|
4625
|
+
role="presentation"
|
|
4626
|
+
aria-hidden="true"
|
|
4627
|
+
></span>
|
|
4628
|
+
<span class="fd-navigation__text"
|
|
4629
|
+
>Favorites<span
|
|
4630
|
+
class="fd-object-status fd-object-status--inverted fd-object-status--indication-9"
|
|
4631
|
+
>
|
|
4632
|
+
<span class="fd-object-status__text">New</span>
|
|
4633
|
+
<span class="fd-object-status__sr-only">Object Status</span>
|
|
4634
|
+
<span class="fd-object-status__sr-only">Indication Color 9</span>
|
|
4635
|
+
</span>
|
|
4636
|
+
</span>
|
|
4637
|
+
|
|
4638
|
+
<span
|
|
4639
|
+
class="fd-navigation__has-children-indicator"
|
|
4640
|
+
role="presentation"
|
|
4641
|
+
aria-hidden="true"
|
|
4642
|
+
aria-label="has children indicator, expanded"
|
|
4643
|
+
></span>
|
|
4644
|
+
</a>
|
|
4645
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
4646
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
4647
|
+
<ul
|
|
4648
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
4649
|
+
role="tree"
|
|
4650
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
4651
|
+
tabindex="-1"
|
|
4652
|
+
>
|
|
4653
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4654
|
+
<div
|
|
4655
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4656
|
+
aria-level="3"
|
|
4657
|
+
role="treeitem"
|
|
4658
|
+
title="My Accounts"
|
|
4659
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4660
|
+
aria-expanded="false"
|
|
4661
|
+
aria-selected="false"
|
|
4662
|
+
>
|
|
4663
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4664
|
+
<span class="fd-navigation__text">My Accounts</span>
|
|
4665
|
+
<span
|
|
4666
|
+
class="fd-navigation__selection-indicator"
|
|
4667
|
+
role="presentation"
|
|
4668
|
+
aria-hidden="true"
|
|
4669
|
+
aria-label="selection indicator"
|
|
4670
|
+
></span>
|
|
4671
|
+
</a>
|
|
4672
|
+
</div>
|
|
4673
|
+
</li>
|
|
4674
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4675
|
+
<div
|
|
4676
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4677
|
+
aria-level="3"
|
|
4678
|
+
role="treeitem"
|
|
4679
|
+
title="My Orders"
|
|
4680
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4681
|
+
aria-expanded="false"
|
|
4682
|
+
aria-selected="false"
|
|
4683
|
+
>
|
|
4684
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4685
|
+
<span class="fd-navigation__text">My Orders</span>
|
|
4686
|
+
<span
|
|
4687
|
+
class="fd-navigation__selection-indicator"
|
|
4688
|
+
role="presentation"
|
|
4689
|
+
aria-hidden="true"
|
|
4690
|
+
aria-label="selection indicator"
|
|
4691
|
+
></span>
|
|
4692
|
+
</a>
|
|
4693
|
+
</div>
|
|
4694
|
+
</li>
|
|
4695
|
+
</ul>
|
|
4696
|
+
</li>
|
|
4509
4697
|
|
|
4510
|
-
|
|
4511
|
-
|
|
4512
|
-
|
|
4513
|
-
|
|
4514
|
-
|
|
4515
|
-
|
|
4516
|
-
|
|
4517
|
-
|
|
4518
|
-
|
|
4519
|
-
|
|
4520
|
-
|
|
4521
|
-
|
|
4522
|
-
|
|
4523
|
-
|
|
4524
|
-
|
|
4525
|
-
|
|
4526
|
-
|
|
4527
|
-
|
|
4528
|
-
|
|
4529
|
-
|
|
4530
|
-
|
|
4698
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4699
|
+
<div
|
|
4700
|
+
class="fd-navigation__item"
|
|
4701
|
+
aria-level="2"
|
|
4702
|
+
role="treeitem"
|
|
4703
|
+
title="Reports"
|
|
4704
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
4705
|
+
aria-expanded="true"
|
|
4706
|
+
aria-selected="false"
|
|
4707
|
+
>
|
|
4708
|
+
<a
|
|
4709
|
+
class="fd-navigation__link"
|
|
4710
|
+
role="button"
|
|
4711
|
+
tabindex="-1"
|
|
4712
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
4713
|
+
>
|
|
4714
|
+
<span
|
|
4715
|
+
class="fd-navigation__icon sap-icon--document"
|
|
4716
|
+
role="presentation"
|
|
4717
|
+
aria-hidden="true"
|
|
4718
|
+
></span>
|
|
4719
|
+
<span class="fd-navigation__text">Reports</span>
|
|
4720
|
+
<span
|
|
4721
|
+
class="fd-navigation__selection-indicator"
|
|
4722
|
+
role="presentation"
|
|
4723
|
+
aria-hidden="true"
|
|
4724
|
+
aria-label="selection indicator"
|
|
4725
|
+
></span>
|
|
4726
|
+
<span
|
|
4727
|
+
class="fd-navigation__has-children-indicator"
|
|
4728
|
+
role="presentation"
|
|
4729
|
+
aria-hidden="true"
|
|
4730
|
+
aria-label="has children indicator, expanded"
|
|
4731
|
+
></span>
|
|
4732
|
+
</a>
|
|
4733
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
4734
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
4735
|
+
<ul
|
|
4736
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
4737
|
+
role="tree"
|
|
4738
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
4739
|
+
tabindex="-1"
|
|
4740
|
+
>
|
|
4741
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4742
|
+
<div
|
|
4743
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4744
|
+
aria-level="3"
|
|
4745
|
+
role="treeitem"
|
|
4746
|
+
title="Sales Reports"
|
|
4747
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4748
|
+
aria-expanded="false"
|
|
4749
|
+
aria-selected="false"
|
|
4750
|
+
>
|
|
4751
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4752
|
+
<span class="fd-navigation__text">Sales Reports</span>
|
|
4753
|
+
<span
|
|
4754
|
+
class="fd-navigation__selection-indicator"
|
|
4755
|
+
role="presentation"
|
|
4756
|
+
aria-hidden="true"
|
|
4757
|
+
aria-label="selection indicator"
|
|
4758
|
+
></span>
|
|
4759
|
+
</a>
|
|
4760
|
+
</div>
|
|
4761
|
+
</li>
|
|
4762
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4763
|
+
<div
|
|
4764
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4765
|
+
aria-level="3"
|
|
4766
|
+
role="treeitem"
|
|
4767
|
+
title="Companies"
|
|
4768
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4769
|
+
aria-expanded="false"
|
|
4770
|
+
aria-selected="false"
|
|
4771
|
+
>
|
|
4772
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4773
|
+
<span class="fd-navigation__text">Companies</span>
|
|
4774
|
+
<span
|
|
4775
|
+
class="fd-navigation__selection-indicator"
|
|
4776
|
+
role="presentation"
|
|
4777
|
+
aria-hidden="true"
|
|
4778
|
+
aria-label="selection indicator"
|
|
4779
|
+
></span>
|
|
4780
|
+
</a>
|
|
4781
|
+
</div>
|
|
4782
|
+
</li>
|
|
4783
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4784
|
+
<div
|
|
4785
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4786
|
+
aria-level="3"
|
|
4787
|
+
role="treeitem"
|
|
4788
|
+
title="Partners"
|
|
4789
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4790
|
+
aria-expanded="false"
|
|
4791
|
+
aria-selected="false"
|
|
4792
|
+
>
|
|
4793
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4794
|
+
<span class="fd-navigation__text">Partners (external link)</span>
|
|
4795
|
+
|
|
4796
|
+
<span
|
|
4797
|
+
class="fd-navigation__selection-indicator"
|
|
4798
|
+
role="presentation"
|
|
4799
|
+
aria-hidden="true"
|
|
4800
|
+
aria-label="selection indicator"
|
|
4801
|
+
></span>
|
|
4802
|
+
<span
|
|
4803
|
+
class="fd-navigation__external-link-indicator"
|
|
4804
|
+
role="presentation"
|
|
4805
|
+
aria-hidden="true"
|
|
4806
|
+
aria-label="external link indicator"
|
|
4807
|
+
></span>
|
|
4808
|
+
</a>
|
|
4809
|
+
</li>
|
|
4810
|
+
</ul>
|
|
4811
|
+
</li>
|
|
4812
|
+
|
|
4813
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4814
|
+
<div
|
|
4815
|
+
class="fd-navigation__item"
|
|
4816
|
+
aria-level="2"
|
|
4817
|
+
role="treeitem"
|
|
4818
|
+
title="Sales"
|
|
4819
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
4820
|
+
aria-expanded="false"
|
|
4821
|
+
aria-selected="false"
|
|
4822
|
+
>
|
|
4823
|
+
<a
|
|
4824
|
+
class="fd-navigation__link"
|
|
4825
|
+
role="button"
|
|
4826
|
+
tabindex="-1"
|
|
4827
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
4828
|
+
>
|
|
4829
|
+
<span
|
|
4830
|
+
class="fd-navigation__icon sap-icon--crm-sales"
|
|
4831
|
+
role="presentation"
|
|
4832
|
+
aria-hidden="true"
|
|
4833
|
+
></span>
|
|
4834
|
+
<span class="fd-navigation__text">Sales</span>
|
|
4835
|
+
<span
|
|
4836
|
+
class="fd-navigation__selection-indicator"
|
|
4837
|
+
role="presentation"
|
|
4838
|
+
aria-hidden="true"
|
|
4839
|
+
aria-label="selection indicator"
|
|
4840
|
+
></span>
|
|
4841
|
+
<span
|
|
4842
|
+
class="fd-navigation__has-children-indicator"
|
|
4843
|
+
role="presentation"
|
|
4844
|
+
aria-hidden="true"
|
|
4845
|
+
aria-label="has children indicator, collapsed"
|
|
4846
|
+
></span>
|
|
4847
|
+
</a>
|
|
4848
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
4849
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
4850
|
+
<ul
|
|
4851
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
4852
|
+
role="tree"
|
|
4853
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
4854
|
+
tabindex="-1"
|
|
4855
|
+
>
|
|
4856
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4857
|
+
<div
|
|
4858
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4859
|
+
aria-level="3"
|
|
4860
|
+
role="treeitem"
|
|
4861
|
+
title="Leads"
|
|
4862
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4863
|
+
aria-expanded="false"
|
|
4864
|
+
aria-selected="false"
|
|
4865
|
+
>
|
|
4866
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4867
|
+
<span class="fd-navigation__text">Leads</span>
|
|
4868
|
+
<span
|
|
4869
|
+
class="fd-navigation__selection-indicator"
|
|
4870
|
+
role="presentation"
|
|
4871
|
+
aria-hidden="true"
|
|
4872
|
+
aria-label="selection indicator"
|
|
4873
|
+
></span>
|
|
4874
|
+
</a>
|
|
4875
|
+
</div>
|
|
4876
|
+
</li>
|
|
4877
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4878
|
+
<div
|
|
4879
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4880
|
+
aria-level="3"
|
|
4881
|
+
role="treeitem"
|
|
4882
|
+
title="Opportunities"
|
|
4883
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4884
|
+
aria-expanded="false"
|
|
4885
|
+
aria-selected="false"
|
|
4886
|
+
>
|
|
4887
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4888
|
+
<span class="fd-navigation__text">Opportunities</span>
|
|
4889
|
+
<span
|
|
4890
|
+
class="fd-navigation__selection-indicator"
|
|
4891
|
+
role="presentation"
|
|
4892
|
+
aria-hidden="true"
|
|
4893
|
+
aria-label="selection indicator"
|
|
4894
|
+
></span>
|
|
4895
|
+
</a>
|
|
4896
|
+
</div>
|
|
4897
|
+
</li>
|
|
4898
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4899
|
+
<div
|
|
4900
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4901
|
+
aria-level="3"
|
|
4902
|
+
role="treeitem"
|
|
4903
|
+
title="Quotes"
|
|
4904
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4905
|
+
aria-expanded="false"
|
|
4906
|
+
aria-selected="false"
|
|
4907
|
+
>
|
|
4908
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4909
|
+
<span class="fd-navigation__text">Quotes</span>
|
|
4910
|
+
<span
|
|
4911
|
+
class="fd-navigation__selection-indicator"
|
|
4912
|
+
role="presentation"
|
|
4913
|
+
aria-hidden="true"
|
|
4914
|
+
aria-label="selection indicator"
|
|
4915
|
+
></span>
|
|
4916
|
+
</a>
|
|
4917
|
+
</li>
|
|
4918
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4919
|
+
<div
|
|
4920
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4921
|
+
aria-level="3"
|
|
4922
|
+
role="treeitem"
|
|
4923
|
+
title="Orders"
|
|
4924
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4925
|
+
aria-expanded="false"
|
|
4926
|
+
aria-selected="false"
|
|
4927
|
+
>
|
|
4928
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4929
|
+
<span class="fd-navigation__text">Orders</span>
|
|
4930
|
+
<span
|
|
4931
|
+
class="fd-navigation__selection-indicator"
|
|
4932
|
+
role="presentation"
|
|
4933
|
+
aria-hidden="true"
|
|
4934
|
+
aria-label="selection indicator"
|
|
4935
|
+
></span>
|
|
4936
|
+
</a>
|
|
4937
|
+
</li>
|
|
4938
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4939
|
+
<div
|
|
4940
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
4941
|
+
aria-level="3"
|
|
4942
|
+
role="treeitem"
|
|
4943
|
+
title="Invoices"
|
|
4944
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
4945
|
+
aria-expanded="false"
|
|
4946
|
+
aria-selected="false"
|
|
4947
|
+
>
|
|
4948
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
4949
|
+
<span class="fd-navigation__text">Invoices</span>
|
|
4950
|
+
<span
|
|
4951
|
+
class="fd-navigation__selection-indicator"
|
|
4952
|
+
role="presentation"
|
|
4953
|
+
aria-hidden="true"
|
|
4954
|
+
aria-label="selection indicator"
|
|
4955
|
+
></span>
|
|
4956
|
+
</a>
|
|
4957
|
+
</li>
|
|
4958
|
+
</ul>
|
|
4959
|
+
</li>
|
|
4960
|
+
</ul>
|
|
4961
|
+
</li>
|
|
4962
|
+
|
|
4963
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
4964
|
+
<div
|
|
4965
|
+
class="fd-navigation__item fd-navigation__item--with-expander"
|
|
4966
|
+
aria-level="2"
|
|
4967
|
+
role="treeitem"
|
|
4968
|
+
title="Customer Management"
|
|
4969
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
4970
|
+
aria-expanded="true"
|
|
4971
|
+
aria-selected="false"
|
|
4972
|
+
>
|
|
4973
|
+
<a class="fd-navigation__link" href="#">
|
|
4974
|
+
<span
|
|
4975
|
+
class="fd-navigation__icon sap-icon--account"
|
|
4976
|
+
role="presentation"
|
|
4977
|
+
aria-hidden="true"
|
|
4978
|
+
></span>
|
|
4979
|
+
<span class="fd-navigation__text">Customer Management</span>
|
|
4980
|
+
<span
|
|
4981
|
+
class="fd-navigation__selection-indicator"
|
|
4982
|
+
role="presentation"
|
|
4983
|
+
aria-hidden="true"
|
|
4984
|
+
aria-label="selection indicator"
|
|
4985
|
+
></span>
|
|
4986
|
+
</a>
|
|
4987
|
+
<span
|
|
4988
|
+
class="fd-navigation__has-children-indicator"
|
|
4989
|
+
role="button"
|
|
4990
|
+
aria-label="expand/collapse children"
|
|
4991
|
+
></span>
|
|
4992
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
4993
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
4994
|
+
<ul
|
|
4995
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
4996
|
+
role="tree"
|
|
4997
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
4998
|
+
tabindex="-1"
|
|
4999
|
+
>
|
|
5000
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5001
|
+
<div
|
|
5002
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5003
|
+
aria-level="3"
|
|
5004
|
+
role="treeitem"
|
|
5005
|
+
title="Contacts"
|
|
5006
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5007
|
+
aria-expanded="false"
|
|
5008
|
+
aria-selected="false"
|
|
5009
|
+
>
|
|
5010
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5011
|
+
<span class="fd-navigation__text">Contacts</span>
|
|
5012
|
+
<span
|
|
5013
|
+
class="fd-navigation__selection-indicator"
|
|
5014
|
+
role="presentation"
|
|
5015
|
+
aria-hidden="true"
|
|
5016
|
+
aria-label="selection indicator"
|
|
5017
|
+
></span>
|
|
5018
|
+
</a>
|
|
5019
|
+
</div>
|
|
5020
|
+
</li>
|
|
5021
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5022
|
+
<div
|
|
5023
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5024
|
+
aria-level="3"
|
|
5025
|
+
role="treeitem"
|
|
5026
|
+
title="Companies"
|
|
5027
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5028
|
+
aria-expanded="false"
|
|
5029
|
+
aria-selected="false"
|
|
5030
|
+
>
|
|
5031
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5032
|
+
<span class="fd-navigation__text">Companies</span>
|
|
5033
|
+
<span
|
|
5034
|
+
class="fd-navigation__selection-indicator"
|
|
5035
|
+
role="presentation"
|
|
5036
|
+
aria-hidden="true"
|
|
5037
|
+
aria-label="selection indicator"
|
|
5038
|
+
></span>
|
|
5039
|
+
</a>
|
|
5040
|
+
</div>
|
|
5041
|
+
</li>
|
|
5042
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5043
|
+
<div
|
|
5044
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5045
|
+
aria-level="3"
|
|
5046
|
+
role="treeitem"
|
|
5047
|
+
title="Partners"
|
|
5048
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5049
|
+
aria-expanded="false"
|
|
5050
|
+
aria-selected="false"
|
|
5051
|
+
>
|
|
5052
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5053
|
+
<span class="fd-navigation__text">Partners (external link)</span>
|
|
5054
|
+
<span
|
|
5055
|
+
class="fd-navigation__selection-indicator"
|
|
5056
|
+
role="presentation"
|
|
5057
|
+
aria-hidden="true"
|
|
5058
|
+
aria-label="selection indicator"
|
|
5059
|
+
></span>
|
|
5060
|
+
<span
|
|
5061
|
+
class="fd-navigation__external-link-indicator"
|
|
5062
|
+
role="presentation"
|
|
5063
|
+
aria-hidden="true"
|
|
5064
|
+
aria-label="external link indicator"
|
|
5065
|
+
></span>
|
|
5066
|
+
</a>
|
|
5067
|
+
</li>
|
|
5068
|
+
</ul>
|
|
5069
|
+
</li>
|
|
5070
|
+
|
|
5071
|
+
<li
|
|
5072
|
+
class="fd-navigation__list-item fd-navigation__list-item--separator"
|
|
5073
|
+
role="presentation"
|
|
5074
|
+
aria-hidden="true"
|
|
5075
|
+
></li>
|
|
5076
|
+
|
|
5077
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5078
|
+
<div
|
|
5079
|
+
class="fd-navigation__item fd-navigation__item--group"
|
|
5080
|
+
aria-level="1"
|
|
5081
|
+
role="treeitem"
|
|
5082
|
+
title="Additional Items"
|
|
5083
|
+
aria-roledescription="Navigation List Tree Item - Group"
|
|
5084
|
+
aria-selected="false"
|
|
5085
|
+
aria-expanded="true"
|
|
5086
|
+
>
|
|
5087
|
+
<a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
|
|
5088
|
+
<span class="fd-navigation__text">Additional Items</span>
|
|
5089
|
+
<span
|
|
5090
|
+
class="fd-navigation__has-children-indicator"
|
|
5091
|
+
role="presentation"
|
|
5092
|
+
aria-hidden="true"
|
|
5093
|
+
aria-label="has children indicator, expanded"
|
|
5094
|
+
></span>
|
|
5095
|
+
</a>
|
|
5096
|
+
|
|
5097
|
+
<ul
|
|
5098
|
+
class="fd-navigation__list fd-navigation__list--parent-items"
|
|
5099
|
+
role="tree"
|
|
5100
|
+
aria-roledescription="Navigation List Tree - Parent Items"
|
|
5101
|
+
tabindex="-1"
|
|
5102
|
+
>
|
|
5103
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5104
|
+
<div
|
|
5105
|
+
class="fd-navigation__item"
|
|
5106
|
+
aria-level="2"
|
|
5107
|
+
role="treeitem"
|
|
5108
|
+
title="Products"
|
|
5109
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
5110
|
+
aria-selected="false"
|
|
5111
|
+
aria-expanded="false"
|
|
5112
|
+
>
|
|
5113
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5114
|
+
<span
|
|
5115
|
+
class="fd-navigation__icon sap-icon--customer-view"
|
|
5116
|
+
role="presentation"
|
|
5117
|
+
aria-hidden="true"
|
|
5118
|
+
></span>
|
|
5119
|
+
<span class="fd-navigation__text">Products</span>
|
|
5120
|
+
<span
|
|
5121
|
+
class="fd-navigation__selection-indicator"
|
|
5122
|
+
role="presentation"
|
|
5123
|
+
aria-hidden="true"
|
|
5124
|
+
aria-label="selection indicator"
|
|
5125
|
+
></span>
|
|
5126
|
+
</a>
|
|
5127
|
+
</li>
|
|
5128
|
+
|
|
5129
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5130
|
+
<div
|
|
5131
|
+
class="fd-navigation__item"
|
|
5132
|
+
aria-level="2"
|
|
5133
|
+
role="treeitem"
|
|
5134
|
+
title="Marketing"
|
|
5135
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
5136
|
+
aria-expanded="true"
|
|
5137
|
+
aria-selected="false"
|
|
5138
|
+
>
|
|
5139
|
+
<a
|
|
5140
|
+
class="fd-navigation__link"
|
|
5141
|
+
role="button"
|
|
5142
|
+
tabindex="-1"
|
|
5143
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
5144
|
+
>
|
|
5145
|
+
<span
|
|
5146
|
+
class="fd-navigation__icon sap-icon--marketing-campaign"
|
|
5147
|
+
role="presentation"
|
|
5148
|
+
aria-hidden="true"
|
|
5149
|
+
></span>
|
|
5150
|
+
<span class="fd-navigation__text">Marketing</span>
|
|
5151
|
+
<span
|
|
5152
|
+
class="fd-navigation__selection-indicator"
|
|
5153
|
+
role="presentation"
|
|
5154
|
+
aria-hidden="true"
|
|
5155
|
+
aria-label="selection indicator"
|
|
5156
|
+
></span>
|
|
5157
|
+
<span
|
|
5158
|
+
class="fd-navigation__has-children-indicator"
|
|
5159
|
+
role="presentation"
|
|
5160
|
+
aria-hidden="true"
|
|
5161
|
+
aria-label="has children indicator, expanded"
|
|
5162
|
+
></span>
|
|
5163
|
+
</a>
|
|
5164
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
5165
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
5166
|
+
<ul
|
|
5167
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
5168
|
+
role="tree"
|
|
5169
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
5170
|
+
tabindex="-1"
|
|
5171
|
+
>
|
|
5172
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5173
|
+
<div
|
|
5174
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5175
|
+
aria-level="3"
|
|
5176
|
+
role="treeitem"
|
|
5177
|
+
title="Campaigns"
|
|
5178
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5179
|
+
aria-expanded="false"
|
|
5180
|
+
aria-selected="false"
|
|
5181
|
+
>
|
|
5182
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5183
|
+
<span class="fd-navigation__text">Campaigns</span>
|
|
5184
|
+
<span
|
|
5185
|
+
class="fd-navigation__selection-indicator"
|
|
5186
|
+
role="presentation"
|
|
5187
|
+
aria-hidden="true"
|
|
5188
|
+
aria-label="selection indicator"
|
|
5189
|
+
></span>
|
|
5190
|
+
</a>
|
|
5191
|
+
</div>
|
|
5192
|
+
</li>
|
|
5193
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5194
|
+
<div
|
|
5195
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5196
|
+
aria-level="3"
|
|
5197
|
+
role="treeitem"
|
|
5198
|
+
title="E-Mail Marketing"
|
|
5199
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5200
|
+
aria-expanded="false"
|
|
5201
|
+
aria-selected="false"
|
|
5202
|
+
>
|
|
5203
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5204
|
+
<span class="fd-navigation__text">E-Mail Marketing</span>
|
|
5205
|
+
<span
|
|
5206
|
+
class="fd-navigation__selection-indicator"
|
|
5207
|
+
role="presentation"
|
|
5208
|
+
aria-hidden="true"
|
|
5209
|
+
aria-label="selection indicator"
|
|
5210
|
+
></span>
|
|
5211
|
+
</a>
|
|
5212
|
+
</div>
|
|
5213
|
+
</li>
|
|
5214
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5215
|
+
<div
|
|
5216
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5217
|
+
aria-level="3"
|
|
5218
|
+
role="treeitem"
|
|
5219
|
+
title="Marketing Automation"
|
|
5220
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5221
|
+
aria-expanded="false"
|
|
5222
|
+
aria-selected="false"
|
|
5223
|
+
>
|
|
5224
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5225
|
+
<span class="fd-navigation__text">Marketing Automation</span>
|
|
5226
|
+
<span
|
|
5227
|
+
class="fd-navigation__selection-indicator"
|
|
5228
|
+
role="presentation"
|
|
5229
|
+
aria-hidden="true"
|
|
5230
|
+
aria-label="selection indicator"
|
|
5231
|
+
></span>
|
|
5232
|
+
</a>
|
|
5233
|
+
</li>
|
|
5234
|
+
</ul>
|
|
5235
|
+
</li>
|
|
5236
|
+
|
|
5237
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5238
|
+
<div
|
|
5239
|
+
class="fd-navigation__item"
|
|
5240
|
+
aria-level="2"
|
|
5241
|
+
role="treeitem"
|
|
5242
|
+
title="Reports"
|
|
5243
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
5244
|
+
aria-expanded="true"
|
|
5245
|
+
aria-selected="false"
|
|
5246
|
+
>
|
|
5247
|
+
<a
|
|
5248
|
+
class="fd-navigation__link"
|
|
5249
|
+
role="button"
|
|
5250
|
+
tabindex="-1"
|
|
5251
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
5252
|
+
>
|
|
5253
|
+
<span
|
|
5254
|
+
class="fd-navigation__icon sap-icon--manager-insight"
|
|
5255
|
+
role="presentation"
|
|
5256
|
+
aria-hidden="true"
|
|
5257
|
+
></span>
|
|
5258
|
+
<span class="fd-navigation__text">Reports</span>
|
|
5259
|
+
<span
|
|
5260
|
+
class="fd-navigation__selection-indicator"
|
|
5261
|
+
role="presentation"
|
|
5262
|
+
aria-hidden="true"
|
|
5263
|
+
aria-label="selection indicator"
|
|
5264
|
+
></span>
|
|
5265
|
+
<span
|
|
5266
|
+
class="fd-navigation__has-children-indicator"
|
|
5267
|
+
role="presentation"
|
|
5268
|
+
aria-hidden="true"
|
|
5269
|
+
aria-label="has children indicator, expanded"
|
|
5270
|
+
></span>
|
|
5271
|
+
</a>
|
|
5272
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
5273
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
5274
|
+
<ul
|
|
5275
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
5276
|
+
role="tree"
|
|
5277
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
5278
|
+
tabindex="-1"
|
|
5279
|
+
>
|
|
5280
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5281
|
+
<div
|
|
5282
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5283
|
+
aria-level="3"
|
|
5284
|
+
role="treeitem"
|
|
5285
|
+
title="Sales Report"
|
|
5286
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5287
|
+
aria-expanded="false"
|
|
5288
|
+
aria-selected="false"
|
|
5289
|
+
>
|
|
5290
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5291
|
+
<span class="fd-navigation__text">Sales Report</span>
|
|
5292
|
+
<span
|
|
5293
|
+
class="fd-navigation__selection-indicator"
|
|
5294
|
+
role="presentation"
|
|
5295
|
+
aria-hidden="true"
|
|
5296
|
+
aria-label="selection indicator"
|
|
5297
|
+
></span>
|
|
5298
|
+
</a>
|
|
5299
|
+
</div>
|
|
5300
|
+
</li>
|
|
5301
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5302
|
+
<div
|
|
5303
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5304
|
+
aria-level="3"
|
|
5305
|
+
role="treeitem"
|
|
5306
|
+
title="Customer Reports"
|
|
5307
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5308
|
+
aria-expanded="false"
|
|
5309
|
+
aria-selected="false"
|
|
5310
|
+
>
|
|
5311
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5312
|
+
<span class="fd-navigation__text">Customer Reports</span>
|
|
5313
|
+
<span
|
|
5314
|
+
class="fd-navigation__selection-indicator"
|
|
5315
|
+
role="presentation"
|
|
5316
|
+
aria-hidden="true"
|
|
5317
|
+
aria-label="selection indicator"
|
|
5318
|
+
></span>
|
|
5319
|
+
</a>
|
|
5320
|
+
</div>
|
|
5321
|
+
</li>
|
|
5322
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5323
|
+
<div
|
|
5324
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5325
|
+
aria-level="3"
|
|
5326
|
+
role="treeitem"
|
|
5327
|
+
title="Marketing Reports"
|
|
5328
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5329
|
+
aria-expanded="false"
|
|
5330
|
+
aria-selected="false"
|
|
5331
|
+
>
|
|
5332
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5333
|
+
<span class="fd-navigation__text">Marketing Reports</span>
|
|
5334
|
+
<span
|
|
5335
|
+
class="fd-navigation__selection-indicator"
|
|
5336
|
+
role="presentation"
|
|
5337
|
+
aria-hidden="true"
|
|
5338
|
+
aria-label="selection indicator"
|
|
5339
|
+
></span>
|
|
5340
|
+
</a>
|
|
5341
|
+
</li>
|
|
5342
|
+
</ul>
|
|
5343
|
+
</li>
|
|
5344
|
+
</ul>
|
|
5345
|
+
</li>
|
|
5346
|
+
|
|
5347
|
+
<li
|
|
5348
|
+
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
5349
|
+
role="presentation"
|
|
5350
|
+
aria-hidden="true"
|
|
5351
|
+
></li>
|
|
5352
|
+
</ul>
|
|
5353
|
+
|
|
5354
|
+
<div class="fd-navigation__container fd-navigation__container--bottom">
|
|
5355
|
+
<ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
|
|
5356
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5357
|
+
<div
|
|
5358
|
+
class="fd-navigation__item fd-navigation__item--create"
|
|
5359
|
+
aria-level="1"
|
|
5360
|
+
role="treeitem"
|
|
5361
|
+
title="Create Ticket"
|
|
5362
|
+
aria-roledescription="Navigation List Tree Item"
|
|
5363
|
+
aria-selected="false"
|
|
5364
|
+
aria-expanded="false"
|
|
5365
|
+
>
|
|
5366
|
+
<button class="fd-navigation__link">
|
|
5367
|
+
<span
|
|
5368
|
+
class="fd-navigation__icon sap-icon--write-new"
|
|
5369
|
+
role="presentation"
|
|
5370
|
+
aria-hidden="true"
|
|
5371
|
+
></span>
|
|
5372
|
+
<span class="fd-navigation__text">Create Ticket</span>
|
|
5373
|
+
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
|
|
5374
|
+
</button>
|
|
5375
|
+
</div>
|
|
5376
|
+
</li>
|
|
5377
|
+
|
|
5378
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5379
|
+
<div
|
|
5380
|
+
class="fd-navigation__item"
|
|
5381
|
+
aria-level="1"
|
|
5382
|
+
role="treeitem"
|
|
5383
|
+
title="Product Settings"
|
|
5384
|
+
aria-roledescription="Navigation List Tree Item"
|
|
5385
|
+
aria-selected="false"
|
|
5386
|
+
aria-expanded="false"
|
|
5387
|
+
>
|
|
5388
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5389
|
+
<span
|
|
5390
|
+
class="fd-navigation__icon sap-icon--settings"
|
|
5391
|
+
role="presentation"
|
|
5392
|
+
aria-hidden="true"
|
|
5393
|
+
></span>
|
|
5394
|
+
<span class="fd-navigation__text">Product Settings</span>
|
|
5395
|
+
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
|
|
5396
|
+
</a>
|
|
5397
|
+
</li>
|
|
5398
|
+
</ul>
|
|
5399
|
+
```
|
|
5400
|
+
|
|
5401
|
+
### Vertical Navigation - Search
|
|
5402
|
+
|
|
5403
|
+
Search Only: for a sticky search field, the sticky header area with separator is not needed. The search field can be sticky by applying <code>.fd-navigation__list-item--sticky</code> modifier class to the parent navigation list item.
|
|
5404
|
+
<br><br><strong>Note:</strong> The <code>.fd-navigation__list-item--home</code> class is still supported for backward compatibility and functions identically to <code>.fd-navigation__list-item--sticky</code>. It was originally intended specifically for Home navigation link, but <code>.fd-navigation__list-item--sticky</code> is now the recommended approach as it can be applied to any list item that needs to be sticky at the top.
|
|
5405
|
+
|
|
5406
|
+
```html
|
|
5407
|
+
<div
|
|
5408
|
+
class="fd-navigation fd-navigation--vertical"
|
|
5409
|
+
role="navigation"
|
|
5410
|
+
aria-roledescription="Side Navigation"
|
|
5411
|
+
|
|
5412
|
+
>
|
|
5413
|
+
<div class="fd-navigation__container fd-navigation__container--top">
|
|
5414
|
+
<ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
|
|
5415
|
+
<li class="fd-navigation__list-item fd-navigation__list-item--sticky">
|
|
5416
|
+
<div class="fd-input-group">
|
|
5417
|
+
<input
|
|
5418
|
+
class="fd-input fd-input-group__input"
|
|
5419
|
+
type="text"
|
|
5420
|
+
id="side-nav-search"
|
|
5421
|
+
name="two-icon-actions"
|
|
5422
|
+
placeholder="Search"
|
|
5423
|
+
autocomplete="off"
|
|
5424
|
+
aria-label="Search"
|
|
5425
|
+
/>
|
|
5426
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
5427
|
+
<button
|
|
5428
|
+
class="fd-input-group__button fd-button fd-button--icon fd-button--transparent"
|
|
5429
|
+
type="button"
|
|
5430
|
+
aria-label="Search value"
|
|
5431
|
+
>
|
|
5432
|
+
<i class="sap-icon--search" aria-hidden="true" role="presentation"></i>
|
|
5433
|
+
</button>
|
|
5434
|
+
</span>
|
|
5435
|
+
</div>
|
|
5436
|
+
</li>
|
|
5437
|
+
|
|
5438
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5439
|
+
<div
|
|
5440
|
+
class="fd-navigation__item"
|
|
5441
|
+
aria-level="1"
|
|
5442
|
+
role="treeitem"
|
|
5443
|
+
title="Home"
|
|
5444
|
+
aria-roledescription="Navigation List Tree Item"
|
|
5445
|
+
aria-selected="false"
|
|
5446
|
+
aria-expanded="false"
|
|
5447
|
+
>
|
|
5448
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5449
|
+
<span class="fd-navigation__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
|
|
5450
|
+
<span class="fd-navigation__text">Home</span>
|
|
5451
|
+
<span
|
|
5452
|
+
class="fd-navigation__selection-indicator"
|
|
5453
|
+
role="presentation"
|
|
5454
|
+
aria-hidden="true"
|
|
5455
|
+
aria-label="selection indicator"
|
|
5456
|
+
></span>
|
|
5457
|
+
</a>
|
|
5458
|
+
</div>
|
|
5459
|
+
</li>
|
|
5460
|
+
|
|
5461
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5462
|
+
<div
|
|
5463
|
+
class="fd-navigation__item"
|
|
5464
|
+
aria-level="1"
|
|
5465
|
+
role="treeitem"
|
|
5466
|
+
title="Resource Planning and Business Management Solutions"
|
|
5467
|
+
aria-roledescription="Navigation List Tree Item"
|
|
5468
|
+
aria-selected="false"
|
|
5469
|
+
aria-expanded="false"
|
|
5470
|
+
>
|
|
5471
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5472
|
+
<span
|
|
5473
|
+
class="fd-navigation__icon sap-icon--bbyd-dashboard"
|
|
5474
|
+
role="presentation"
|
|
5475
|
+
aria-hidden="true"
|
|
5476
|
+
></span>
|
|
5477
|
+
<span class="fd-navigation__text"> Resource Planning and Business Management Solutions </span>
|
|
5478
|
+
<span
|
|
5479
|
+
class="fd-navigation__selection-indicator"
|
|
5480
|
+
role="presentation"
|
|
5481
|
+
aria-hidden="true"
|
|
5482
|
+
aria-label="selection indicator"
|
|
5483
|
+
></span>
|
|
5484
|
+
</a>
|
|
5485
|
+
</li>
|
|
5486
|
+
|
|
5487
|
+
<li
|
|
5488
|
+
class="fd-navigation__list-item fd-navigation__list-item--separator"
|
|
5489
|
+
role="presentation"
|
|
5490
|
+
aria-hidden="true"
|
|
5491
|
+
></li>
|
|
5492
|
+
|
|
5493
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5494
|
+
<div
|
|
5495
|
+
class="fd-navigation__item fd-navigation__item--group"
|
|
5496
|
+
aria-level="1"
|
|
5497
|
+
role="treeitem"
|
|
5498
|
+
title="Main Items Group"
|
|
5499
|
+
aria-roledescription="Navigation List Tree Item - Group"
|
|
5500
|
+
aria-selected="false"
|
|
5501
|
+
aria-expanded="true"
|
|
5502
|
+
>
|
|
5503
|
+
<a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
|
|
5504
|
+
<span class="fd-navigation__text">Main Items</span>
|
|
5505
|
+
<span
|
|
5506
|
+
class="fd-navigation__has-children-indicator"
|
|
5507
|
+
role="presentation"
|
|
5508
|
+
aria-hidden="true"
|
|
5509
|
+
aria-label="has children indicator, expanded"
|
|
5510
|
+
></span>
|
|
5511
|
+
</a>
|
|
5512
|
+
|
|
5513
|
+
<ul
|
|
5514
|
+
class="fd-navigation__list fd-navigation__list--parent-items"
|
|
5515
|
+
role="tree"
|
|
5516
|
+
aria-roledescription="Navigation List Tree - Parent Items"
|
|
5517
|
+
tabindex="-1"
|
|
5518
|
+
>
|
|
5519
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5520
|
+
<div
|
|
5521
|
+
class="fd-navigation__item"
|
|
5522
|
+
aria-level="2"
|
|
5523
|
+
role="treeitem"
|
|
5524
|
+
title="Basket"
|
|
5525
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
5526
|
+
aria-expanded="true"
|
|
5527
|
+
aria-selected="false"
|
|
5528
|
+
>
|
|
5529
|
+
<a
|
|
5530
|
+
class="fd-navigation__link"
|
|
5531
|
+
role="button"
|
|
5532
|
+
tabindex="-1"
|
|
5533
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
5534
|
+
>
|
|
5535
|
+
<span
|
|
5536
|
+
class="fd-navigation__icon sap-icon--unfavorite"
|
|
5537
|
+
role="presentation"
|
|
5538
|
+
aria-hidden="true"
|
|
5539
|
+
></span>
|
|
5540
|
+
<span class="fd-navigation__text"
|
|
5541
|
+
>Favorites<span
|
|
5542
|
+
class="fd-object-status fd-object-status--inverted fd-object-status--indication-9"
|
|
5543
|
+
>
|
|
5544
|
+
<span class="fd-object-status__text">New</span>
|
|
5545
|
+
<span class="fd-object-status__sr-only">Object Status</span>
|
|
5546
|
+
<span class="fd-object-status__sr-only">Indication Color 9</span>
|
|
5547
|
+
</span>
|
|
5548
|
+
</span>
|
|
5549
|
+
|
|
5550
|
+
<span
|
|
5551
|
+
class="fd-navigation__has-children-indicator"
|
|
5552
|
+
role="presentation"
|
|
5553
|
+
aria-hidden="true"
|
|
5554
|
+
aria-label="has children indicator, expanded"
|
|
5555
|
+
></span>
|
|
5556
|
+
</a>
|
|
5557
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
5558
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
5559
|
+
<ul
|
|
5560
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
5561
|
+
role="tree"
|
|
5562
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
5563
|
+
tabindex="-1"
|
|
5564
|
+
>
|
|
5565
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5566
|
+
<div
|
|
5567
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5568
|
+
aria-level="3"
|
|
5569
|
+
role="treeitem"
|
|
5570
|
+
title="My Accounts"
|
|
5571
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5572
|
+
aria-expanded="false"
|
|
5573
|
+
aria-selected="false"
|
|
5574
|
+
>
|
|
5575
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5576
|
+
<span class="fd-navigation__text">My Accounts</span>
|
|
5577
|
+
<span
|
|
5578
|
+
class="fd-navigation__selection-indicator"
|
|
5579
|
+
role="presentation"
|
|
5580
|
+
aria-hidden="true"
|
|
5581
|
+
aria-label="selection indicator"
|
|
5582
|
+
></span>
|
|
5583
|
+
</a>
|
|
5584
|
+
</div>
|
|
5585
|
+
</li>
|
|
5586
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5587
|
+
<div
|
|
5588
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5589
|
+
aria-level="3"
|
|
5590
|
+
role="treeitem"
|
|
5591
|
+
title="My Orders"
|
|
5592
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5593
|
+
aria-expanded="false"
|
|
5594
|
+
aria-selected="false"
|
|
5595
|
+
>
|
|
5596
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5597
|
+
<span class="fd-navigation__text">My Orders</span>
|
|
5598
|
+
<span
|
|
5599
|
+
class="fd-navigation__selection-indicator"
|
|
5600
|
+
role="presentation"
|
|
5601
|
+
aria-hidden="true"
|
|
5602
|
+
aria-label="selection indicator"
|
|
5603
|
+
></span>
|
|
5604
|
+
</a>
|
|
5605
|
+
</div>
|
|
5606
|
+
</li>
|
|
5607
|
+
</ul>
|
|
5608
|
+
</li>
|
|
5609
|
+
|
|
5610
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5611
|
+
<div
|
|
5612
|
+
class="fd-navigation__item"
|
|
5613
|
+
aria-level="2"
|
|
5614
|
+
role="treeitem"
|
|
5615
|
+
title="Reports"
|
|
5616
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
5617
|
+
aria-expanded="true"
|
|
5618
|
+
aria-selected="false"
|
|
5619
|
+
>
|
|
5620
|
+
<a
|
|
5621
|
+
class="fd-navigation__link"
|
|
5622
|
+
role="button"
|
|
5623
|
+
tabindex="-1"
|
|
5624
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
5625
|
+
>
|
|
5626
|
+
<span
|
|
5627
|
+
class="fd-navigation__icon sap-icon--document"
|
|
5628
|
+
role="presentation"
|
|
5629
|
+
aria-hidden="true"
|
|
5630
|
+
></span>
|
|
5631
|
+
<span class="fd-navigation__text">Reports</span>
|
|
5632
|
+
<span
|
|
5633
|
+
class="fd-navigation__selection-indicator"
|
|
5634
|
+
role="presentation"
|
|
5635
|
+
aria-hidden="true"
|
|
5636
|
+
aria-label="selection indicator"
|
|
5637
|
+
></span>
|
|
5638
|
+
<span
|
|
5639
|
+
class="fd-navigation__has-children-indicator"
|
|
5640
|
+
role="presentation"
|
|
5641
|
+
aria-hidden="true"
|
|
5642
|
+
aria-label="has children indicator, expanded"
|
|
5643
|
+
></span>
|
|
5644
|
+
</a>
|
|
5645
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
5646
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
5647
|
+
<ul
|
|
5648
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
5649
|
+
role="tree"
|
|
5650
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
5651
|
+
tabindex="-1"
|
|
5652
|
+
>
|
|
5653
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5654
|
+
<div
|
|
5655
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5656
|
+
aria-level="3"
|
|
5657
|
+
role="treeitem"
|
|
5658
|
+
title="Sales Reports"
|
|
5659
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5660
|
+
aria-expanded="false"
|
|
5661
|
+
aria-selected="false"
|
|
5662
|
+
>
|
|
5663
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5664
|
+
<span class="fd-navigation__text">Sales Reports</span>
|
|
5665
|
+
<span
|
|
5666
|
+
class="fd-navigation__selection-indicator"
|
|
5667
|
+
role="presentation"
|
|
5668
|
+
aria-hidden="true"
|
|
5669
|
+
aria-label="selection indicator"
|
|
5670
|
+
></span>
|
|
5671
|
+
</a>
|
|
5672
|
+
</div>
|
|
5673
|
+
</li>
|
|
5674
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5675
|
+
<div
|
|
5676
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5677
|
+
aria-level="3"
|
|
5678
|
+
role="treeitem"
|
|
5679
|
+
title="Companies"
|
|
5680
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5681
|
+
aria-expanded="false"
|
|
5682
|
+
aria-selected="false"
|
|
5683
|
+
>
|
|
5684
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5685
|
+
<span class="fd-navigation__text">Companies</span>
|
|
5686
|
+
<span
|
|
5687
|
+
class="fd-navigation__selection-indicator"
|
|
5688
|
+
role="presentation"
|
|
5689
|
+
aria-hidden="true"
|
|
5690
|
+
aria-label="selection indicator"
|
|
5691
|
+
></span>
|
|
5692
|
+
</a>
|
|
5693
|
+
</div>
|
|
5694
|
+
</li>
|
|
5695
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5696
|
+
<div
|
|
5697
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5698
|
+
aria-level="3"
|
|
5699
|
+
role="treeitem"
|
|
5700
|
+
title="Partners"
|
|
5701
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5702
|
+
aria-expanded="false"
|
|
5703
|
+
aria-selected="false"
|
|
5704
|
+
>
|
|
5705
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5706
|
+
<span class="fd-navigation__text">Partners (external link)</span>
|
|
5707
|
+
|
|
5708
|
+
<span
|
|
5709
|
+
class="fd-navigation__selection-indicator"
|
|
5710
|
+
role="presentation"
|
|
5711
|
+
aria-hidden="true"
|
|
5712
|
+
aria-label="selection indicator"
|
|
5713
|
+
></span>
|
|
5714
|
+
<span
|
|
5715
|
+
class="fd-navigation__external-link-indicator"
|
|
5716
|
+
role="presentation"
|
|
5717
|
+
aria-hidden="true"
|
|
5718
|
+
aria-label="external link indicator"
|
|
5719
|
+
></span>
|
|
5720
|
+
</a>
|
|
5721
|
+
</li>
|
|
5722
|
+
</ul>
|
|
5723
|
+
</li>
|
|
5724
|
+
|
|
5725
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5726
|
+
<div
|
|
5727
|
+
class="fd-navigation__item"
|
|
5728
|
+
aria-level="2"
|
|
5729
|
+
role="treeitem"
|
|
5730
|
+
title="Sales"
|
|
5731
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
5732
|
+
aria-expanded="false"
|
|
5733
|
+
aria-selected="false"
|
|
5734
|
+
>
|
|
5735
|
+
<a
|
|
5736
|
+
class="fd-navigation__link"
|
|
5737
|
+
role="button"
|
|
5738
|
+
tabindex="-1"
|
|
5739
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
5740
|
+
>
|
|
5741
|
+
<span
|
|
5742
|
+
class="fd-navigation__icon sap-icon--crm-sales"
|
|
5743
|
+
role="presentation"
|
|
5744
|
+
aria-hidden="true"
|
|
5745
|
+
></span>
|
|
5746
|
+
<span class="fd-navigation__text">Sales</span>
|
|
5747
|
+
<span
|
|
5748
|
+
class="fd-navigation__selection-indicator"
|
|
5749
|
+
role="presentation"
|
|
5750
|
+
aria-hidden="true"
|
|
5751
|
+
aria-label="selection indicator"
|
|
5752
|
+
></span>
|
|
5753
|
+
<span
|
|
5754
|
+
class="fd-navigation__has-children-indicator"
|
|
5755
|
+
role="presentation"
|
|
5756
|
+
aria-hidden="true"
|
|
5757
|
+
aria-label="has children indicator, collapsed"
|
|
5758
|
+
></span>
|
|
5759
|
+
</a>
|
|
5760
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
5761
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
5762
|
+
<ul
|
|
5763
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
5764
|
+
role="tree"
|
|
5765
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
5766
|
+
tabindex="-1"
|
|
5767
|
+
>
|
|
5768
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5769
|
+
<div
|
|
5770
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5771
|
+
aria-level="3"
|
|
5772
|
+
role="treeitem"
|
|
5773
|
+
title="Leads"
|
|
5774
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5775
|
+
aria-expanded="false"
|
|
5776
|
+
aria-selected="false"
|
|
5777
|
+
>
|
|
5778
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5779
|
+
<span class="fd-navigation__text">Leads</span>
|
|
5780
|
+
<span
|
|
5781
|
+
class="fd-navigation__selection-indicator"
|
|
5782
|
+
role="presentation"
|
|
5783
|
+
aria-hidden="true"
|
|
5784
|
+
aria-label="selection indicator"
|
|
5785
|
+
></span>
|
|
5786
|
+
</a>
|
|
5787
|
+
</div>
|
|
5788
|
+
</li>
|
|
5789
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5790
|
+
<div
|
|
5791
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5792
|
+
aria-level="3"
|
|
5793
|
+
role="treeitem"
|
|
5794
|
+
title="Opportunities"
|
|
5795
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5796
|
+
aria-expanded="false"
|
|
5797
|
+
aria-selected="false"
|
|
5798
|
+
>
|
|
5799
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5800
|
+
<span class="fd-navigation__text">Opportunities</span>
|
|
5801
|
+
<span
|
|
5802
|
+
class="fd-navigation__selection-indicator"
|
|
5803
|
+
role="presentation"
|
|
5804
|
+
aria-hidden="true"
|
|
5805
|
+
aria-label="selection indicator"
|
|
5806
|
+
></span>
|
|
5807
|
+
</a>
|
|
5808
|
+
</div>
|
|
5809
|
+
</li>
|
|
5810
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5811
|
+
<div
|
|
5812
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5813
|
+
aria-level="3"
|
|
5814
|
+
role="treeitem"
|
|
5815
|
+
title="Quotes"
|
|
5816
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5817
|
+
aria-expanded="false"
|
|
5818
|
+
aria-selected="false"
|
|
5819
|
+
>
|
|
5820
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5821
|
+
<span class="fd-navigation__text">Quotes</span>
|
|
5822
|
+
<span
|
|
5823
|
+
class="fd-navigation__selection-indicator"
|
|
5824
|
+
role="presentation"
|
|
5825
|
+
aria-hidden="true"
|
|
5826
|
+
aria-label="selection indicator"
|
|
5827
|
+
></span>
|
|
5828
|
+
</a>
|
|
5829
|
+
</li>
|
|
5830
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5831
|
+
<div
|
|
5832
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5833
|
+
aria-level="3"
|
|
5834
|
+
role="treeitem"
|
|
5835
|
+
title="Orders"
|
|
5836
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5837
|
+
aria-expanded="false"
|
|
5838
|
+
aria-selected="false"
|
|
5839
|
+
>
|
|
5840
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5841
|
+
<span class="fd-navigation__text">Orders</span>
|
|
5842
|
+
<span
|
|
5843
|
+
class="fd-navigation__selection-indicator"
|
|
5844
|
+
role="presentation"
|
|
5845
|
+
aria-hidden="true"
|
|
5846
|
+
aria-label="selection indicator"
|
|
5847
|
+
></span>
|
|
5848
|
+
</a>
|
|
5849
|
+
</li>
|
|
5850
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5851
|
+
<div
|
|
5852
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5853
|
+
aria-level="3"
|
|
5854
|
+
role="treeitem"
|
|
5855
|
+
title="Invoices"
|
|
5856
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5857
|
+
aria-expanded="false"
|
|
5858
|
+
aria-selected="false"
|
|
5859
|
+
>
|
|
5860
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5861
|
+
<span class="fd-navigation__text">Invoices</span>
|
|
5862
|
+
<span
|
|
5863
|
+
class="fd-navigation__selection-indicator"
|
|
5864
|
+
role="presentation"
|
|
5865
|
+
aria-hidden="true"
|
|
5866
|
+
aria-label="selection indicator"
|
|
5867
|
+
></span>
|
|
5868
|
+
</a>
|
|
5869
|
+
</li>
|
|
5870
|
+
</ul>
|
|
5871
|
+
</li>
|
|
5872
|
+
</ul>
|
|
5873
|
+
</li>
|
|
5874
|
+
|
|
5875
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5876
|
+
<div
|
|
5877
|
+
class="fd-navigation__item fd-navigation__item--with-expander"
|
|
5878
|
+
aria-level="2"
|
|
5879
|
+
role="treeitem"
|
|
5880
|
+
title="Customer Management"
|
|
5881
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
5882
|
+
aria-expanded="true"
|
|
5883
|
+
aria-selected="false"
|
|
5884
|
+
>
|
|
5885
|
+
<a class="fd-navigation__link" href="#">
|
|
5886
|
+
<span
|
|
5887
|
+
class="fd-navigation__icon sap-icon--account"
|
|
5888
|
+
role="presentation"
|
|
5889
|
+
aria-hidden="true"
|
|
5890
|
+
></span>
|
|
5891
|
+
<span class="fd-navigation__text">Customer Management</span>
|
|
5892
|
+
<span
|
|
5893
|
+
class="fd-navigation__selection-indicator"
|
|
5894
|
+
role="presentation"
|
|
5895
|
+
aria-hidden="true"
|
|
5896
|
+
aria-label="selection indicator"
|
|
5897
|
+
></span>
|
|
5898
|
+
</a>
|
|
5899
|
+
<span
|
|
5900
|
+
class="fd-navigation__has-children-indicator"
|
|
5901
|
+
role="button"
|
|
5902
|
+
aria-label="expand/collapse children"
|
|
5903
|
+
></span>
|
|
5904
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
5905
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
5906
|
+
<ul
|
|
5907
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
5908
|
+
role="tree"
|
|
5909
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
5910
|
+
tabindex="-1"
|
|
5911
|
+
>
|
|
5912
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5913
|
+
<div
|
|
5914
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5915
|
+
aria-level="3"
|
|
5916
|
+
role="treeitem"
|
|
5917
|
+
title="Contacts"
|
|
5918
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5919
|
+
aria-expanded="false"
|
|
5920
|
+
aria-selected="false"
|
|
5921
|
+
>
|
|
5922
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5923
|
+
<span class="fd-navigation__text">Contacts</span>
|
|
5924
|
+
<span
|
|
5925
|
+
class="fd-navigation__selection-indicator"
|
|
5926
|
+
role="presentation"
|
|
5927
|
+
aria-hidden="true"
|
|
5928
|
+
aria-label="selection indicator"
|
|
5929
|
+
></span>
|
|
5930
|
+
</a>
|
|
5931
|
+
</div>
|
|
5932
|
+
</li>
|
|
5933
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5934
|
+
<div
|
|
5935
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5936
|
+
aria-level="3"
|
|
5937
|
+
role="treeitem"
|
|
5938
|
+
title="Companies"
|
|
5939
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5940
|
+
aria-expanded="false"
|
|
5941
|
+
aria-selected="false"
|
|
5942
|
+
>
|
|
5943
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5944
|
+
<span class="fd-navigation__text">Companies</span>
|
|
5945
|
+
<span
|
|
5946
|
+
class="fd-navigation__selection-indicator"
|
|
5947
|
+
role="presentation"
|
|
5948
|
+
aria-hidden="true"
|
|
5949
|
+
aria-label="selection indicator"
|
|
5950
|
+
></span>
|
|
5951
|
+
</a>
|
|
5952
|
+
</div>
|
|
5953
|
+
</li>
|
|
5954
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5955
|
+
<div
|
|
5956
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
5957
|
+
aria-level="3"
|
|
5958
|
+
role="treeitem"
|
|
5959
|
+
title="Partners"
|
|
5960
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
5961
|
+
aria-expanded="false"
|
|
5962
|
+
aria-selected="false"
|
|
5963
|
+
>
|
|
5964
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
5965
|
+
<span class="fd-navigation__text">Partners (external link)</span>
|
|
5966
|
+
<span
|
|
5967
|
+
class="fd-navigation__selection-indicator"
|
|
5968
|
+
role="presentation"
|
|
5969
|
+
aria-hidden="true"
|
|
5970
|
+
aria-label="selection indicator"
|
|
5971
|
+
></span>
|
|
5972
|
+
<span
|
|
5973
|
+
class="fd-navigation__external-link-indicator"
|
|
5974
|
+
role="presentation"
|
|
5975
|
+
aria-hidden="true"
|
|
5976
|
+
aria-label="external link indicator"
|
|
5977
|
+
></span>
|
|
5978
|
+
</a>
|
|
5979
|
+
</li>
|
|
5980
|
+
</ul>
|
|
5981
|
+
</li>
|
|
5982
|
+
|
|
5983
|
+
<li
|
|
5984
|
+
class="fd-navigation__list-item fd-navigation__list-item--separator"
|
|
5985
|
+
role="presentation"
|
|
5986
|
+
aria-hidden="true"
|
|
5987
|
+
></li>
|
|
5988
|
+
|
|
5989
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
5990
|
+
<div
|
|
5991
|
+
class="fd-navigation__item fd-navigation__item--group"
|
|
5992
|
+
aria-level="1"
|
|
5993
|
+
role="treeitem"
|
|
5994
|
+
title="Additional Items"
|
|
5995
|
+
aria-roledescription="Navigation List Tree Item - Group"
|
|
5996
|
+
aria-selected="false"
|
|
5997
|
+
aria-expanded="true"
|
|
5998
|
+
>
|
|
5999
|
+
<a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
|
|
6000
|
+
<span class="fd-navigation__text">Additional Items</span>
|
|
6001
|
+
<span
|
|
6002
|
+
class="fd-navigation__has-children-indicator"
|
|
6003
|
+
role="presentation"
|
|
6004
|
+
aria-hidden="true"
|
|
6005
|
+
aria-label="has children indicator, expanded"
|
|
6006
|
+
></span>
|
|
6007
|
+
</a>
|
|
6008
|
+
|
|
6009
|
+
<ul
|
|
6010
|
+
class="fd-navigation__list fd-navigation__list--parent-items"
|
|
6011
|
+
role="tree"
|
|
6012
|
+
aria-roledescription="Navigation List Tree - Parent Items"
|
|
6013
|
+
tabindex="-1"
|
|
6014
|
+
>
|
|
6015
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
6016
|
+
<div
|
|
6017
|
+
class="fd-navigation__item"
|
|
6018
|
+
aria-level="2"
|
|
6019
|
+
role="treeitem"
|
|
6020
|
+
title="Products"
|
|
6021
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
6022
|
+
aria-selected="false"
|
|
6023
|
+
aria-expanded="false"
|
|
6024
|
+
>
|
|
6025
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
6026
|
+
<span
|
|
6027
|
+
class="fd-navigation__icon sap-icon--customer-view"
|
|
6028
|
+
role="presentation"
|
|
6029
|
+
aria-hidden="true"
|
|
6030
|
+
></span>
|
|
6031
|
+
<span class="fd-navigation__text">Products</span>
|
|
6032
|
+
<span
|
|
6033
|
+
class="fd-navigation__selection-indicator"
|
|
6034
|
+
role="presentation"
|
|
6035
|
+
aria-hidden="true"
|
|
6036
|
+
aria-label="selection indicator"
|
|
6037
|
+
></span>
|
|
6038
|
+
</a>
|
|
6039
|
+
</li>
|
|
6040
|
+
|
|
6041
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
6042
|
+
<div
|
|
6043
|
+
class="fd-navigation__item"
|
|
6044
|
+
aria-level="2"
|
|
6045
|
+
role="treeitem"
|
|
6046
|
+
title="Marketing"
|
|
6047
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
6048
|
+
aria-expanded="true"
|
|
6049
|
+
aria-selected="false"
|
|
6050
|
+
>
|
|
6051
|
+
<a
|
|
6052
|
+
class="fd-navigation__link"
|
|
6053
|
+
role="button"
|
|
6054
|
+
tabindex="-1"
|
|
6055
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
6056
|
+
>
|
|
6057
|
+
<span
|
|
6058
|
+
class="fd-navigation__icon sap-icon--marketing-campaign"
|
|
6059
|
+
role="presentation"
|
|
6060
|
+
aria-hidden="true"
|
|
6061
|
+
></span>
|
|
6062
|
+
<span class="fd-navigation__text">Marketing</span>
|
|
6063
|
+
<span
|
|
6064
|
+
class="fd-navigation__selection-indicator"
|
|
6065
|
+
role="presentation"
|
|
6066
|
+
aria-hidden="true"
|
|
6067
|
+
aria-label="selection indicator"
|
|
6068
|
+
></span>
|
|
6069
|
+
<span
|
|
6070
|
+
class="fd-navigation__has-children-indicator"
|
|
6071
|
+
role="presentation"
|
|
6072
|
+
aria-hidden="true"
|
|
6073
|
+
aria-label="has children indicator, expanded"
|
|
6074
|
+
></span>
|
|
6075
|
+
</a>
|
|
6076
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
6077
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
6078
|
+
<ul
|
|
6079
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
6080
|
+
role="tree"
|
|
6081
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
6082
|
+
tabindex="-1"
|
|
6083
|
+
>
|
|
6084
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
6085
|
+
<div
|
|
6086
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
6087
|
+
aria-level="3"
|
|
6088
|
+
role="treeitem"
|
|
6089
|
+
title="Campaigns"
|
|
6090
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
6091
|
+
aria-expanded="false"
|
|
6092
|
+
aria-selected="false"
|
|
6093
|
+
>
|
|
6094
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
6095
|
+
<span class="fd-navigation__text">Campaigns</span>
|
|
6096
|
+
<span
|
|
6097
|
+
class="fd-navigation__selection-indicator"
|
|
6098
|
+
role="presentation"
|
|
6099
|
+
aria-hidden="true"
|
|
6100
|
+
aria-label="selection indicator"
|
|
6101
|
+
></span>
|
|
6102
|
+
</a>
|
|
6103
|
+
</div>
|
|
6104
|
+
</li>
|
|
6105
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
6106
|
+
<div
|
|
6107
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
6108
|
+
aria-level="3"
|
|
6109
|
+
role="treeitem"
|
|
6110
|
+
title="E-Mail Marketing"
|
|
6111
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
6112
|
+
aria-expanded="false"
|
|
6113
|
+
aria-selected="false"
|
|
6114
|
+
>
|
|
6115
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
6116
|
+
<span class="fd-navigation__text">E-Mail Marketing</span>
|
|
6117
|
+
<span
|
|
6118
|
+
class="fd-navigation__selection-indicator"
|
|
6119
|
+
role="presentation"
|
|
6120
|
+
aria-hidden="true"
|
|
6121
|
+
aria-label="selection indicator"
|
|
6122
|
+
></span>
|
|
6123
|
+
</a>
|
|
6124
|
+
</div>
|
|
6125
|
+
</li>
|
|
6126
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
6127
|
+
<div
|
|
6128
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
6129
|
+
aria-level="3"
|
|
6130
|
+
role="treeitem"
|
|
6131
|
+
title="Marketing Automation"
|
|
6132
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
6133
|
+
aria-expanded="false"
|
|
6134
|
+
aria-selected="false"
|
|
6135
|
+
>
|
|
6136
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
6137
|
+
<span class="fd-navigation__text">Marketing Automation</span>
|
|
6138
|
+
<span
|
|
6139
|
+
class="fd-navigation__selection-indicator"
|
|
6140
|
+
role="presentation"
|
|
6141
|
+
aria-hidden="true"
|
|
6142
|
+
aria-label="selection indicator"
|
|
6143
|
+
></span>
|
|
6144
|
+
</a>
|
|
6145
|
+
</li>
|
|
6146
|
+
</ul>
|
|
6147
|
+
</li>
|
|
6148
|
+
|
|
6149
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
6150
|
+
<div
|
|
6151
|
+
class="fd-navigation__item"
|
|
6152
|
+
aria-level="2"
|
|
6153
|
+
role="treeitem"
|
|
6154
|
+
title="Reports"
|
|
6155
|
+
aria-roledescription="Navigation List Tree Item - Parent"
|
|
6156
|
+
aria-expanded="true"
|
|
6157
|
+
aria-selected="false"
|
|
6158
|
+
>
|
|
6159
|
+
<a
|
|
6160
|
+
class="fd-navigation__link"
|
|
6161
|
+
role="button"
|
|
6162
|
+
tabindex="-1"
|
|
6163
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
6164
|
+
>
|
|
6165
|
+
<span
|
|
6166
|
+
class="fd-navigation__icon sap-icon--manager-insight"
|
|
6167
|
+
role="presentation"
|
|
6168
|
+
aria-hidden="true"
|
|
6169
|
+
></span>
|
|
6170
|
+
<span class="fd-navigation__text">Reports</span>
|
|
6171
|
+
<span
|
|
6172
|
+
class="fd-navigation__selection-indicator"
|
|
6173
|
+
role="presentation"
|
|
6174
|
+
aria-hidden="true"
|
|
6175
|
+
aria-label="selection indicator"
|
|
6176
|
+
></span>
|
|
6177
|
+
<span
|
|
6178
|
+
class="fd-navigation__has-children-indicator"
|
|
6179
|
+
role="presentation"
|
|
6180
|
+
aria-hidden="true"
|
|
6181
|
+
aria-label="has children indicator, expanded"
|
|
6182
|
+
></span>
|
|
6183
|
+
</a>
|
|
6184
|
+
<div class="fd-navigation__list-container" aria-hidden="true">
|
|
6185
|
+
<div class="fd-navigation__list-wrapper" aria-hidden="true">
|
|
6186
|
+
<ul
|
|
6187
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
6188
|
+
role="tree"
|
|
6189
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
6190
|
+
tabindex="-1"
|
|
6191
|
+
>
|
|
6192
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
6193
|
+
<div
|
|
6194
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
6195
|
+
aria-level="3"
|
|
6196
|
+
role="treeitem"
|
|
6197
|
+
title="Sales Report"
|
|
6198
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
6199
|
+
aria-expanded="false"
|
|
6200
|
+
aria-selected="false"
|
|
6201
|
+
>
|
|
6202
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
6203
|
+
<span class="fd-navigation__text">Sales Report</span>
|
|
6204
|
+
<span
|
|
6205
|
+
class="fd-navigation__selection-indicator"
|
|
6206
|
+
role="presentation"
|
|
6207
|
+
aria-hidden="true"
|
|
6208
|
+
aria-label="selection indicator"
|
|
6209
|
+
></span>
|
|
6210
|
+
</a>
|
|
6211
|
+
</div>
|
|
6212
|
+
</li>
|
|
6213
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
6214
|
+
<div
|
|
6215
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
6216
|
+
aria-level="3"
|
|
6217
|
+
role="treeitem"
|
|
6218
|
+
title="Customer Reports"
|
|
6219
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
6220
|
+
aria-expanded="false"
|
|
6221
|
+
aria-selected="false"
|
|
6222
|
+
>
|
|
6223
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
6224
|
+
<span class="fd-navigation__text">Customer Reports</span>
|
|
6225
|
+
<span
|
|
6226
|
+
class="fd-navigation__selection-indicator"
|
|
6227
|
+
role="presentation"
|
|
6228
|
+
aria-hidden="true"
|
|
6229
|
+
aria-label="selection indicator"
|
|
6230
|
+
></span>
|
|
6231
|
+
</a>
|
|
6232
|
+
</div>
|
|
6233
|
+
</li>
|
|
6234
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
6235
|
+
<div
|
|
6236
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
6237
|
+
aria-level="3"
|
|
6238
|
+
role="treeitem"
|
|
6239
|
+
title="Marketing Reports"
|
|
6240
|
+
aria-roledescription="Navigation List Tree Item - Child"
|
|
6241
|
+
aria-expanded="false"
|
|
6242
|
+
aria-selected="false"
|
|
6243
|
+
>
|
|
6244
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
6245
|
+
<span class="fd-navigation__text">Marketing Reports</span>
|
|
6246
|
+
<span
|
|
6247
|
+
class="fd-navigation__selection-indicator"
|
|
6248
|
+
role="presentation"
|
|
6249
|
+
aria-hidden="true"
|
|
6250
|
+
aria-label="selection indicator"
|
|
6251
|
+
></span>
|
|
6252
|
+
</a>
|
|
6253
|
+
</li>
|
|
6254
|
+
</ul>
|
|
6255
|
+
</li>
|
|
6256
|
+
</ul>
|
|
6257
|
+
</li>
|
|
6258
|
+
|
|
6259
|
+
<li
|
|
6260
|
+
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
6261
|
+
role="presentation"
|
|
6262
|
+
aria-hidden="true"
|
|
6263
|
+
></li>
|
|
6264
|
+
</ul>
|
|
6265
|
+
|
|
6266
|
+
<div class="fd-navigation__container fd-navigation__container--bottom">
|
|
6267
|
+
<ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
|
|
6268
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
6269
|
+
<div
|
|
6270
|
+
class="fd-navigation__item fd-navigation__item--create"
|
|
6271
|
+
aria-level="1"
|
|
6272
|
+
role="treeitem"
|
|
6273
|
+
title="Create Ticket"
|
|
6274
|
+
aria-roledescription="Navigation List Tree Item"
|
|
6275
|
+
aria-selected="false"
|
|
6276
|
+
aria-expanded="false"
|
|
6277
|
+
>
|
|
6278
|
+
<button class="fd-navigation__link">
|
|
6279
|
+
<span
|
|
6280
|
+
class="fd-navigation__icon sap-icon--write-new"
|
|
6281
|
+
role="presentation"
|
|
6282
|
+
aria-hidden="true"
|
|
6283
|
+
></span>
|
|
6284
|
+
<span class="fd-navigation__text">Create Ticket</span>
|
|
6285
|
+
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
|
|
6286
|
+
</button>
|
|
6287
|
+
</div>
|
|
6288
|
+
</li>
|
|
6289
|
+
|
|
6290
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
6291
|
+
<div
|
|
6292
|
+
class="fd-navigation__item"
|
|
6293
|
+
aria-level="1"
|
|
6294
|
+
role="treeitem"
|
|
6295
|
+
title="Product Settings"
|
|
6296
|
+
aria-roledescription="Navigation List Tree Item"
|
|
6297
|
+
aria-selected="false"
|
|
6298
|
+
aria-expanded="false"
|
|
6299
|
+
>
|
|
6300
|
+
<a class="fd-navigation__link" role="link" tabindex="-1" href="#">
|
|
6301
|
+
<span
|
|
6302
|
+
class="fd-navigation__icon sap-icon--settings"
|
|
6303
|
+
role="presentation"
|
|
6304
|
+
aria-hidden="true"
|
|
6305
|
+
></span>
|
|
6306
|
+
<span class="fd-navigation__text">Product Settings</span>
|
|
6307
|
+
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
|
|
6308
|
+
</a>
|
|
6309
|
+
</li>
|
|
6310
|
+
</ul>
|
|
4531
6311
|
```
|
|
4532
6312
|
|
|
4533
6313
|
## Accessibility
|