@patternfly/patternfly 4.156.2 → 4.158.0
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/components/Dropdown/dropdown.css +89 -12
- package/components/Dropdown/dropdown.scss +122 -12
- package/components/DualListSelector/dual-list-selector.css +3 -5
- package/components/DualListSelector/dual-list-selector.scss +4 -6
- package/components/Menu/menu.css +21 -19
- package/components/Menu/menu.scss +29 -24
- package/components/MenuToggle/menu-toggle.css +48 -1
- package/components/MenuToggle/menu-toggle.scss +62 -1
- package/components/Nav/nav.css +129 -41
- package/components/Nav/nav.scss +164 -51
- package/docs/components/Dropdown/examples/Dropdown.css +4 -1
- package/docs/components/Dropdown/examples/Dropdown.md +251 -2
- package/docs/components/DualListSelector/examples/DualListSelector.md +359 -182
- package/docs/components/Menu/examples/Menu.css +2 -1
- package/docs/components/Menu/examples/Menu.md +123 -0
- package/docs/components/MenuToggle/examples/MenuToggle.md +79 -14
- package/docs/components/Nav/examples/Navigation.css +7 -6
- package/docs/components/Nav/examples/Navigation.md +1368 -12
- package/package.json +1 -1
- package/patternfly-no-reset.css +290 -78
- package/patternfly.css +290 -78
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -709,7 +709,7 @@ cssPrefix: pf-c-nav
|
|
|
709
709
|
|
|
710
710
|
```
|
|
711
711
|
|
|
712
|
-
###
|
|
712
|
+
### Nav with flyout
|
|
713
713
|
|
|
714
714
|
```html isBeta
|
|
715
715
|
<nav class="pf-c-nav" aria-label="Global">
|
|
@@ -813,22 +813,1378 @@ cssPrefix: pf-c-nav
|
|
|
813
813
|
|
|
814
814
|
```
|
|
815
815
|
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
```
|
|
819
|
-
|
|
816
|
+
### Nav with menu and flyout
|
|
817
|
+
|
|
818
|
+
```html isBeta
|
|
819
|
+
<nav class="pf-c-nav" aria-label="Flyout menu example">
|
|
820
|
+
<div class="pf-c-menu">
|
|
821
|
+
<div class="pf-c-menu__content">
|
|
822
|
+
<ul class="pf-c-menu__list">
|
|
823
|
+
<li class="pf-c-menu__list-item">
|
|
824
|
+
<button class="pf-c-menu__item" type="button">
|
|
825
|
+
<span class="pf-c-menu__item-main">
|
|
826
|
+
<span class="pf-c-menu__item-text">Start rollout</span>
|
|
827
|
+
</span>
|
|
828
|
+
</button>
|
|
829
|
+
</li>
|
|
830
|
+
<li class="pf-c-menu__list-item">
|
|
831
|
+
<button class="pf-c-menu__item" type="button">
|
|
832
|
+
<span class="pf-c-menu__item-main">
|
|
833
|
+
<span class="pf-c-menu__item-text">Pause rollouts</span>
|
|
834
|
+
</span>
|
|
835
|
+
</button>
|
|
836
|
+
</li>
|
|
837
|
+
<li class="pf-c-menu__list-item">
|
|
838
|
+
<button class="pf-c-menu__item" type="button" aria-expanded="false">
|
|
839
|
+
<span class="pf-c-menu__item-main">
|
|
840
|
+
<span class="pf-c-menu__item-text">Add storage</span>
|
|
841
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
842
|
+
<i class="fas fa-angle-right"></i>
|
|
843
|
+
</span>
|
|
844
|
+
</span>
|
|
845
|
+
</button>
|
|
846
|
+
<div class="pf-c-menu pf-m-flyout" hidden>
|
|
847
|
+
<div class="pf-c-menu__content">
|
|
848
|
+
<ul class="pf-c-menu__list">
|
|
849
|
+
<li class="pf-c-menu__list-item">
|
|
850
|
+
<a class="pf-c-menu__item" href="#">
|
|
851
|
+
<span class="pf-c-menu__item-main">
|
|
852
|
+
<span class="pf-c-menu__item-text">Container platform</span>
|
|
853
|
+
</span>
|
|
854
|
+
</a>
|
|
855
|
+
</li>
|
|
856
|
+
<li class="pf-c-menu__list-item">
|
|
857
|
+
<button
|
|
858
|
+
class="pf-c-menu__item"
|
|
859
|
+
type="button"
|
|
860
|
+
aria-expanded="true"
|
|
861
|
+
>
|
|
862
|
+
<span class="pf-c-menu__item-main">
|
|
863
|
+
<span class="pf-c-menu__item-text">Dedicated</span>
|
|
864
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
865
|
+
<i class="fas fa-angle-right"></i>
|
|
866
|
+
</span>
|
|
867
|
+
</span>
|
|
868
|
+
</button>
|
|
869
|
+
<div class="pf-c-menu">
|
|
870
|
+
<div class="pf-c-menu__content">
|
|
871
|
+
<ul class="pf-c-menu__list">
|
|
872
|
+
<li class="pf-c-menu__list-item">
|
|
873
|
+
<a class="pf-c-menu__item" href="#">
|
|
874
|
+
<span class="pf-c-menu__item-main">
|
|
875
|
+
<span
|
|
876
|
+
class="pf-c-menu__item-text"
|
|
877
|
+
>Dedicated (Annual)</span>
|
|
878
|
+
</span>
|
|
879
|
+
</a>
|
|
880
|
+
</li>
|
|
881
|
+
<li class="pf-c-menu__list-item">
|
|
882
|
+
<a class="pf-c-menu__item" href="#">
|
|
883
|
+
<span class="pf-c-menu__item-main">
|
|
884
|
+
<span
|
|
885
|
+
class="pf-c-menu__item-text"
|
|
886
|
+
>Dedicated (On-Demand)</span>
|
|
887
|
+
</span>
|
|
888
|
+
</a>
|
|
889
|
+
</li>
|
|
890
|
+
<li class="pf-c-menu__list-item">
|
|
891
|
+
<a class="pf-c-menu__item" href="#">
|
|
892
|
+
<span class="pf-c-menu__item-main">
|
|
893
|
+
<span
|
|
894
|
+
class="pf-c-menu__item-text"
|
|
895
|
+
>Dedicated (On-Demand limits)</span>
|
|
896
|
+
</span>
|
|
897
|
+
</a>
|
|
898
|
+
</li>
|
|
899
|
+
</ul>
|
|
900
|
+
</div>
|
|
901
|
+
</div>
|
|
902
|
+
</li>
|
|
903
|
+
</ul>
|
|
904
|
+
</div>
|
|
905
|
+
</div>
|
|
906
|
+
</li>
|
|
907
|
+
<li class="pf-c-menu__list-item">
|
|
908
|
+
<button class="pf-c-menu__item" type="button" aria-expanded="true">
|
|
909
|
+
<span class="pf-c-menu__item-main">
|
|
910
|
+
<span class="pf-c-menu__item-text">Edit</span>
|
|
911
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
912
|
+
<i class="fas fa-angle-right"></i>
|
|
913
|
+
</span>
|
|
914
|
+
</span>
|
|
915
|
+
<span class="pf-c-menu__item-description">Description</span>
|
|
916
|
+
</button>
|
|
917
|
+
<div class="pf-c-menu pf-m-flyout">
|
|
918
|
+
<div class="pf-c-menu__content">
|
|
919
|
+
<ul class="pf-c-menu__list">
|
|
920
|
+
<li class="pf-c-menu__list-item">
|
|
921
|
+
<a class="pf-c-menu__item" href="#">
|
|
922
|
+
<span class="pf-c-menu__item-main">
|
|
923
|
+
<span class="pf-c-menu__item-text">Container platform</span>
|
|
924
|
+
</span>
|
|
925
|
+
</a>
|
|
926
|
+
</li>
|
|
927
|
+
<li class="pf-c-menu__list-item">
|
|
928
|
+
<button
|
|
929
|
+
class="pf-c-menu__item"
|
|
930
|
+
type="button"
|
|
931
|
+
aria-expanded="true"
|
|
932
|
+
>
|
|
933
|
+
<span class="pf-c-menu__item-main">
|
|
934
|
+
<span class="pf-c-menu__item-text">Dedicated</span>
|
|
935
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
936
|
+
<i class="fas fa-angle-right"></i>
|
|
937
|
+
</span>
|
|
938
|
+
</span>
|
|
939
|
+
</button>
|
|
940
|
+
<div class="pf-c-menu">
|
|
941
|
+
<div class="pf-c-menu__content">
|
|
942
|
+
<ul class="pf-c-menu__list">
|
|
943
|
+
<li class="pf-c-menu__list-item">
|
|
944
|
+
<a class="pf-c-menu__item" href="#">
|
|
945
|
+
<span class="pf-c-menu__item-main">
|
|
946
|
+
<span
|
|
947
|
+
class="pf-c-menu__item-text"
|
|
948
|
+
>Dedicated (Annual)</span>
|
|
949
|
+
</span>
|
|
950
|
+
</a>
|
|
951
|
+
</li>
|
|
952
|
+
<li class="pf-c-menu__list-item">
|
|
953
|
+
<a class="pf-c-menu__item" href="#">
|
|
954
|
+
<span class="pf-c-menu__item-main">
|
|
955
|
+
<span
|
|
956
|
+
class="pf-c-menu__item-text"
|
|
957
|
+
>Dedicated (On-Demand)</span>
|
|
958
|
+
</span>
|
|
959
|
+
</a>
|
|
960
|
+
</li>
|
|
961
|
+
<li class="pf-c-menu__list-item">
|
|
962
|
+
<a class="pf-c-menu__item" href="#">
|
|
963
|
+
<span class="pf-c-menu__item-main">
|
|
964
|
+
<span
|
|
965
|
+
class="pf-c-menu__item-text"
|
|
966
|
+
>Dedicated (On-Demand limits)</span>
|
|
967
|
+
</span>
|
|
968
|
+
</a>
|
|
969
|
+
</li>
|
|
970
|
+
</ul>
|
|
971
|
+
</div>
|
|
972
|
+
</div>
|
|
973
|
+
</li>
|
|
974
|
+
</ul>
|
|
975
|
+
</div>
|
|
976
|
+
</div>
|
|
977
|
+
</li>
|
|
978
|
+
<li class="pf-c-menu__list-item">
|
|
979
|
+
<button class="pf-c-menu__item" type="button">
|
|
980
|
+
<span class="pf-c-menu__item-main">
|
|
981
|
+
<span class="pf-c-menu__item-text">Delete deployment config</span>
|
|
982
|
+
</span>
|
|
983
|
+
</button>
|
|
984
|
+
</li>
|
|
985
|
+
</ul>
|
|
986
|
+
</div>
|
|
987
|
+
</div>
|
|
988
|
+
</nav>
|
|
989
|
+
|
|
990
|
+
```
|
|
991
|
+
|
|
992
|
+
### Nav with drilldown menu
|
|
993
|
+
|
|
994
|
+
```html isBeta
|
|
995
|
+
<nav class="pf-c-nav" aria-label="Drilldown menu example">
|
|
996
|
+
<div class="pf-c-menu pf-m-drilldown">
|
|
997
|
+
<div class="pf-c-menu__content">
|
|
998
|
+
<ul class="pf-c-menu__list">
|
|
999
|
+
<li class="pf-c-menu__list-item">
|
|
1000
|
+
<button class="pf-c-menu__item" type="button">
|
|
1001
|
+
<span class="pf-c-menu__item-main">
|
|
1002
|
+
<span class="pf-c-menu__item-text">Start rollout</span>
|
|
1003
|
+
</span>
|
|
1004
|
+
</button>
|
|
1005
|
+
</li>
|
|
1006
|
+
<li class="pf-c-menu__list-item">
|
|
1007
|
+
<button class="pf-c-menu__item" type="button">
|
|
1008
|
+
<span class="pf-c-menu__item-main">
|
|
1009
|
+
<span class="pf-c-menu__item-text">Pause rollout</span>
|
|
1010
|
+
</span>
|
|
1011
|
+
</button>
|
|
1012
|
+
</li>
|
|
1013
|
+
<li class="pf-c-menu__list-item">
|
|
1014
|
+
<button class="pf-c-menu__item pf-m-current" type="button">
|
|
1015
|
+
<span class="pf-c-menu__item-main">
|
|
1016
|
+
<span class="pf-c-menu__item-text">Current link</span>
|
|
1017
|
+
</span>
|
|
1018
|
+
</button>
|
|
1019
|
+
</li>
|
|
1020
|
+
<li class="pf-c-menu__list-item">
|
|
1021
|
+
<button class="pf-c-menu__item" type="button">
|
|
1022
|
+
<span class="pf-c-menu__item-main">
|
|
1023
|
+
<span class="pf-c-menu__item-text">Add storage</span>
|
|
1024
|
+
</span>
|
|
1025
|
+
</button>
|
|
1026
|
+
</li>
|
|
1027
|
+
<li class="pf-c-menu__list-item">
|
|
1028
|
+
<button class="pf-c-menu__item" type="button" aria-expanded="false">
|
|
1029
|
+
<span class="pf-c-menu__item-main">
|
|
1030
|
+
<span class="pf-c-menu__item-text">Edit</span>
|
|
1031
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1032
|
+
<i class="fas fa-angle-right"></i>
|
|
1033
|
+
</span>
|
|
1034
|
+
</span>
|
|
1035
|
+
</button>
|
|
1036
|
+
<div class="pf-c-menu">
|
|
1037
|
+
<div class="pf-c-menu__content">
|
|
1038
|
+
<ul class="pf-c-menu__list">
|
|
1039
|
+
<li class="pf-c-menu__list-item">
|
|
1040
|
+
<button class="pf-c-menu__item" type="button" tabindex="0">
|
|
1041
|
+
<span class="pf-c-menu__item-main">
|
|
1042
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1043
|
+
<i class="fas fa-angle-left"></i>
|
|
1044
|
+
</span>
|
|
1045
|
+
<span class="pf-c-menu__item-text">Edit</span>
|
|
1046
|
+
</span>
|
|
1047
|
+
</button>
|
|
1048
|
+
</li>
|
|
1049
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1050
|
+
<li class="pf-c-menu__list-item">
|
|
1051
|
+
<button
|
|
1052
|
+
class="pf-c-menu__item"
|
|
1053
|
+
type="button"
|
|
1054
|
+
aria-expanded="false"
|
|
1055
|
+
>
|
|
1056
|
+
<span class="pf-c-menu__item-main">
|
|
1057
|
+
<span class="pf-c-menu__item-text">Deployment</span>
|
|
1058
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1059
|
+
<i class="fas fa-angle-right"></i>
|
|
1060
|
+
</span>
|
|
1061
|
+
</span>
|
|
1062
|
+
</button>
|
|
1063
|
+
<div class="pf-c-menu">
|
|
1064
|
+
<div class="pf-c-menu__content">
|
|
1065
|
+
<ul class="pf-c-menu__list">
|
|
1066
|
+
<li class="pf-c-menu__list-item">
|
|
1067
|
+
<button
|
|
1068
|
+
class="pf-c-menu__item"
|
|
1069
|
+
type="button"
|
|
1070
|
+
tabindex="0"
|
|
1071
|
+
>
|
|
1072
|
+
<span class="pf-c-menu__item-main">
|
|
1073
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1074
|
+
<i class="fas fa-angle-left"></i>
|
|
1075
|
+
</span>
|
|
1076
|
+
<span class="pf-c-menu__item-text">Deployment</span>
|
|
1077
|
+
</span>
|
|
1078
|
+
</button>
|
|
1079
|
+
</li>
|
|
1080
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1081
|
+
<li class="pf-c-menu__list-item">
|
|
1082
|
+
<button class="pf-c-menu__item" type="button">
|
|
1083
|
+
<span class="pf-c-menu__item-main">
|
|
1084
|
+
<span class="pf-c-menu__item-text">Routes</span>
|
|
1085
|
+
</span>
|
|
1086
|
+
</button>
|
|
1087
|
+
</li>
|
|
1088
|
+
<li class="pf-c-menu__list-item">
|
|
1089
|
+
<button class="pf-c-menu__item" type="button">
|
|
1090
|
+
<span class="pf-c-menu__item-main">
|
|
1091
|
+
<span class="pf-c-menu__item-text">Nodes</span>
|
|
1092
|
+
</span>
|
|
1093
|
+
</button>
|
|
1094
|
+
</li>
|
|
1095
|
+
<li class="pf-c-menu__list-item">
|
|
1096
|
+
<button class="pf-c-menu__item" type="button">
|
|
1097
|
+
<span class="pf-c-menu__item-main">
|
|
1098
|
+
<span class="pf-c-menu__item-text">URLs</span>
|
|
1099
|
+
</span>
|
|
1100
|
+
</button>
|
|
1101
|
+
</li>
|
|
1102
|
+
<li class="pf-c-menu__list-item">
|
|
1103
|
+
<button
|
|
1104
|
+
class="pf-c-menu__item"
|
|
1105
|
+
type="button"
|
|
1106
|
+
aria-expanded="false"
|
|
1107
|
+
>
|
|
1108
|
+
<span class="pf-c-menu__item-main">
|
|
1109
|
+
<span
|
|
1110
|
+
class="pf-c-menu__item-text"
|
|
1111
|
+
>Advanced settings</span>
|
|
1112
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1113
|
+
<i class="fas fa-angle-right"></i>
|
|
1114
|
+
</span>
|
|
1115
|
+
</span>
|
|
1116
|
+
</button>
|
|
1117
|
+
<div class="pf-c-menu">
|
|
1118
|
+
<div class="pf-c-menu__content">
|
|
1119
|
+
<ul class="pf-c-menu__list">
|
|
1120
|
+
<li class="pf-c-menu__list-item">
|
|
1121
|
+
<button
|
|
1122
|
+
class="pf-c-menu__item"
|
|
1123
|
+
type="button"
|
|
1124
|
+
tabindex="0"
|
|
1125
|
+
>
|
|
1126
|
+
<span class="pf-c-menu__item-main">
|
|
1127
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1128
|
+
<i class="fas fa-angle-left"></i>
|
|
1129
|
+
</span>
|
|
1130
|
+
<span
|
|
1131
|
+
class="pf-c-menu__item-text"
|
|
1132
|
+
>Advanced settings</span>
|
|
1133
|
+
</span>
|
|
1134
|
+
</button>
|
|
1135
|
+
</li>
|
|
1136
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1137
|
+
<li class="pf-c-menu__list-item">
|
|
1138
|
+
<button class="pf-c-menu__item" type="button">
|
|
1139
|
+
<span class="pf-c-menu__item-main">
|
|
1140
|
+
<span class="pf-c-menu__item-text">Reports</span>
|
|
1141
|
+
</span>
|
|
1142
|
+
</button>
|
|
1143
|
+
</li>
|
|
1144
|
+
<li class="pf-c-menu__list-item">
|
|
1145
|
+
<button class="pf-c-menu__item" type="button">
|
|
1146
|
+
<span class="pf-c-menu__item-main">
|
|
1147
|
+
<span
|
|
1148
|
+
class="pf-c-menu__item-text"
|
|
1149
|
+
>Policies</span>
|
|
1150
|
+
</span>
|
|
1151
|
+
</button>
|
|
1152
|
+
</li>
|
|
1153
|
+
<li class="pf-c-menu__list-item">
|
|
1154
|
+
<button class="pf-c-menu__item" type="button">
|
|
1155
|
+
<span class="pf-c-menu__item-main">
|
|
1156
|
+
<span class="pf-c-menu__item-text">Systems</span>
|
|
1157
|
+
</span>
|
|
1158
|
+
</button>
|
|
1159
|
+
</li>
|
|
1160
|
+
</ul>
|
|
1161
|
+
</div>
|
|
1162
|
+
</div>
|
|
1163
|
+
</li>
|
|
1164
|
+
</ul>
|
|
1165
|
+
</div>
|
|
1166
|
+
</div>
|
|
1167
|
+
</li>
|
|
1168
|
+
<li class="pf-c-menu__list-item">
|
|
1169
|
+
<button
|
|
1170
|
+
class="pf-c-menu__item"
|
|
1171
|
+
type="button"
|
|
1172
|
+
aria-expanded="false"
|
|
1173
|
+
>
|
|
1174
|
+
<span class="pf-c-menu__item-main">
|
|
1175
|
+
<span class="pf-c-menu__item-text">RBAC</span>
|
|
1176
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1177
|
+
<i class="fas fa-angle-right"></i>
|
|
1178
|
+
</span>
|
|
1179
|
+
</span>
|
|
1180
|
+
</button>
|
|
1181
|
+
<div class="pf-c-menu">
|
|
1182
|
+
<div class="pf-c-menu__content">
|
|
1183
|
+
<ul class="pf-c-menu__list">
|
|
1184
|
+
<li class="pf-c-menu__list-item">
|
|
1185
|
+
<button class="pf-c-menu__item" type="button">
|
|
1186
|
+
<span class="pf-c-menu__item-main">
|
|
1187
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1188
|
+
<i class="fas fa-angle-left"></i>
|
|
1189
|
+
</span>
|
|
1190
|
+
<span class="pf-c-menu__item-text">RBAC</span>
|
|
1191
|
+
</span>
|
|
1192
|
+
</button>
|
|
1193
|
+
</li>
|
|
1194
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1195
|
+
<li class="pf-c-menu__list-item">
|
|
1196
|
+
<button class="pf-c-menu__item" type="button">
|
|
1197
|
+
<span class="pf-c-menu__item-main">
|
|
1198
|
+
<span class="pf-c-menu__item-text">Reports</span>
|
|
1199
|
+
</span>
|
|
1200
|
+
</button>
|
|
1201
|
+
</li>
|
|
1202
|
+
<li class="pf-c-menu__list-item">
|
|
1203
|
+
<button class="pf-c-menu__item" type="button">
|
|
1204
|
+
<span class="pf-c-menu__item-main">
|
|
1205
|
+
<span class="pf-c-menu__item-text">Policies</span>
|
|
1206
|
+
</span>
|
|
1207
|
+
</button>
|
|
1208
|
+
</li>
|
|
1209
|
+
<li class="pf-c-menu__list-item">
|
|
1210
|
+
<button class="pf-c-menu__item" type="button">
|
|
1211
|
+
<span class="pf-c-menu__item-main">
|
|
1212
|
+
<span class="pf-c-menu__item-text">Systems</span>
|
|
1213
|
+
</span>
|
|
1214
|
+
</button>
|
|
1215
|
+
</li>
|
|
1216
|
+
</ul>
|
|
1217
|
+
</div>
|
|
1218
|
+
</div>
|
|
1219
|
+
</li>
|
|
1220
|
+
<li class="pf-c-menu__list-item">
|
|
1221
|
+
<button class="pf-c-menu__item" type="button">
|
|
1222
|
+
<span class="pf-c-menu__item-main">
|
|
1223
|
+
<span
|
|
1224
|
+
class="pf-c-menu__item-text"
|
|
1225
|
+
>Thing with a longer label</span>
|
|
1226
|
+
</span>
|
|
1227
|
+
</button>
|
|
1228
|
+
</li>
|
|
1229
|
+
</ul>
|
|
1230
|
+
</div>
|
|
1231
|
+
</div>
|
|
1232
|
+
</li>
|
|
1233
|
+
<li class="pf-c-menu__list-item">
|
|
1234
|
+
<button class="pf-c-menu__item" type="button" aria-expanded="false">
|
|
1235
|
+
<span class="pf-c-menu__item-main">
|
|
1236
|
+
<span class="pf-c-menu__item-text">Configuration</span>
|
|
1237
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1238
|
+
<i class="fas fa-angle-right"></i>
|
|
1239
|
+
</span>
|
|
1240
|
+
</span>
|
|
1241
|
+
</button>
|
|
1242
|
+
<div class="pf-c-menu">
|
|
1243
|
+
<div class="pf-c-menu__content">
|
|
1244
|
+
<ul class="pf-c-menu__list">
|
|
1245
|
+
<li class="pf-c-menu__list-item">
|
|
1246
|
+
<button class="pf-c-menu__item" type="button">
|
|
1247
|
+
<span class="pf-c-menu__item-main">
|
|
1248
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1249
|
+
<i class="fas fa-angle-left"></i>
|
|
1250
|
+
</span>
|
|
1251
|
+
<span class="pf-c-menu__item-text">Configuration</span>
|
|
1252
|
+
</span>
|
|
1253
|
+
</button>
|
|
1254
|
+
</li>
|
|
1255
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1256
|
+
<li class="pf-c-menu__list-item">
|
|
1257
|
+
<button
|
|
1258
|
+
class="pf-c-menu__item"
|
|
1259
|
+
type="button"
|
|
1260
|
+
aria-expanded="false"
|
|
1261
|
+
>
|
|
1262
|
+
<span class="pf-c-menu__item-main">
|
|
1263
|
+
<span class="pf-c-menu__item-text">Profile</span>
|
|
1264
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1265
|
+
<i class="fas fa-angle-right"></i>
|
|
1266
|
+
</span>
|
|
1267
|
+
</span>
|
|
1268
|
+
</button>
|
|
1269
|
+
<div class="pf-c-menu">
|
|
1270
|
+
<div class="pf-c-menu__content">
|
|
1271
|
+
<ul class="pf-c-menu__list">
|
|
1272
|
+
<li class="pf-c-menu__list-item">
|
|
1273
|
+
<button class="pf-c-menu__item" type="button">
|
|
1274
|
+
<span class="pf-c-menu__item-main">
|
|
1275
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1276
|
+
<i class="fas fa-angle-left"></i>
|
|
1277
|
+
</span>
|
|
1278
|
+
<span class="pf-c-menu__item-text">Profile</span>
|
|
1279
|
+
</span>
|
|
1280
|
+
</button>
|
|
1281
|
+
</li>
|
|
1282
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1283
|
+
<li class="pf-c-menu__list-item">
|
|
1284
|
+
<button class="pf-c-menu__item" type="button">
|
|
1285
|
+
<span class="pf-c-menu__item-main">
|
|
1286
|
+
<span class="pf-c-menu__item-text">Avatar</span>
|
|
1287
|
+
</span>
|
|
1288
|
+
</button>
|
|
1289
|
+
</li>
|
|
1290
|
+
<li class="pf-c-menu__list-item">
|
|
1291
|
+
<button class="pf-c-menu__item" type="button">
|
|
1292
|
+
<span class="pf-c-menu__item-main">
|
|
1293
|
+
<span class="pf-c-menu__item-text">Name</span>
|
|
1294
|
+
</span>
|
|
1295
|
+
</button>
|
|
1296
|
+
</li>
|
|
1297
|
+
<li class="pf-c-menu__list-item">
|
|
1298
|
+
<button class="pf-c-menu__item" type="button">
|
|
1299
|
+
<span class="pf-c-menu__item-main">
|
|
1300
|
+
<span class="pf-c-menu__item-text">Title</span>
|
|
1301
|
+
</span>
|
|
1302
|
+
</button>
|
|
1303
|
+
</li>
|
|
1304
|
+
</ul>
|
|
1305
|
+
</div>
|
|
1306
|
+
</div>
|
|
1307
|
+
</li>
|
|
1308
|
+
<li class="pf-c-menu__list-item">
|
|
1309
|
+
<button class="pf-c-menu__item" type="button">
|
|
1310
|
+
<span class="pf-c-menu__item-main">
|
|
1311
|
+
<span class="pf-c-menu__item-text">Time zone</span>
|
|
1312
|
+
</span>
|
|
1313
|
+
</button>
|
|
1314
|
+
</li>
|
|
1315
|
+
<li class="pf-c-menu__list-item">
|
|
1316
|
+
<button class="pf-c-menu__item" type="button">
|
|
1317
|
+
<span class="pf-c-menu__item-main">
|
|
1318
|
+
<span class="pf-c-menu__item-text">Account settings</span>
|
|
1319
|
+
</span>
|
|
1320
|
+
</button>
|
|
1321
|
+
</li>
|
|
1322
|
+
<li class="pf-c-menu__list-item">
|
|
1323
|
+
<button class="pf-c-menu__item" type="button">
|
|
1324
|
+
<span class="pf-c-menu__item-main">
|
|
1325
|
+
<span
|
|
1326
|
+
class="pf-c-menu__item-text"
|
|
1327
|
+
>Thing with a longer label</span>
|
|
1328
|
+
</span>
|
|
1329
|
+
</button>
|
|
1330
|
+
</li>
|
|
1331
|
+
<li class="pf-c-menu__list-item">
|
|
1332
|
+
<button
|
|
1333
|
+
class="pf-c-menu__item"
|
|
1334
|
+
type="button"
|
|
1335
|
+
aria-expanded="false"
|
|
1336
|
+
>
|
|
1337
|
+
<span class="pf-c-menu__item-main">
|
|
1338
|
+
<span class="pf-c-menu__item-text">Edit access settings</span>
|
|
1339
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1340
|
+
<i class="fas fa-angle-right"></i>
|
|
1341
|
+
</span>
|
|
1342
|
+
</span>
|
|
1343
|
+
</button>
|
|
1344
|
+
<div class="pf-c-menu">
|
|
1345
|
+
<div class="pf-c-menu__content">
|
|
1346
|
+
<ul class="pf-c-menu__list">
|
|
1347
|
+
<li class="pf-c-menu__list-item">
|
|
1348
|
+
<button class="pf-c-menu__item" type="button">
|
|
1349
|
+
<span class="pf-c-menu__item-main">
|
|
1350
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1351
|
+
<i class="fas fa-angle-left"></i>
|
|
1352
|
+
</span>
|
|
1353
|
+
<span
|
|
1354
|
+
class="pf-c-menu__item-text"
|
|
1355
|
+
>Edit access settings</span>
|
|
1356
|
+
</span>
|
|
1357
|
+
</button>
|
|
1358
|
+
</li>
|
|
1359
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1360
|
+
<li class="pf-c-menu__list-item">
|
|
1361
|
+
<button class="pf-c-menu__item" type="button">
|
|
1362
|
+
<span class="pf-c-menu__item-main">
|
|
1363
|
+
<span class="pf-c-menu__item-text">Global access</span>
|
|
1364
|
+
</span>
|
|
1365
|
+
</button>
|
|
1366
|
+
</li>
|
|
1367
|
+
<li class="pf-c-menu__list-item">
|
|
1368
|
+
<button class="pf-c-menu__item" type="button">
|
|
1369
|
+
<span class="pf-c-menu__item-main">
|
|
1370
|
+
<span class="pf-c-menu__item-text">Account access</span>
|
|
1371
|
+
</span>
|
|
1372
|
+
</button>
|
|
1373
|
+
</li>
|
|
1374
|
+
</ul>
|
|
1375
|
+
</div>
|
|
1376
|
+
</div>
|
|
1377
|
+
</li>
|
|
1378
|
+
</ul>
|
|
1379
|
+
</div>
|
|
1380
|
+
</div>
|
|
1381
|
+
</li>
|
|
1382
|
+
</ul>
|
|
1383
|
+
</div>
|
|
1384
|
+
</div>
|
|
1385
|
+
</nav>
|
|
1386
|
+
|
|
820
1387
|
```
|
|
821
1388
|
|
|
822
|
-
###
|
|
823
|
-
|
|
824
|
-
|
|
1389
|
+
### Nav with drilldown menu level two
|
|
1390
|
+
|
|
1391
|
+
```html isBeta
|
|
1392
|
+
<nav class="pf-c-nav" aria-label="Drilldown menu example">
|
|
1393
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-drilled-in">
|
|
1394
|
+
<div
|
|
1395
|
+
class="pf-c-menu__content"
|
|
1396
|
+
style="--pf-c-menu__content--Height: 226px;"
|
|
1397
|
+
>
|
|
1398
|
+
<ul class="pf-c-menu__list">
|
|
1399
|
+
<li class="pf-c-menu__list-item">
|
|
1400
|
+
<button class="pf-c-menu__item" type="button">
|
|
1401
|
+
<span class="pf-c-menu__item-main">
|
|
1402
|
+
<span class="pf-c-menu__item-text">Start rollout</span>
|
|
1403
|
+
</span>
|
|
1404
|
+
</button>
|
|
1405
|
+
</li>
|
|
1406
|
+
<li class="pf-c-menu__list-item">
|
|
1407
|
+
<button class="pf-c-menu__item" type="button">
|
|
1408
|
+
<span class="pf-c-menu__item-main">
|
|
1409
|
+
<span class="pf-c-menu__item-text">Pause rollout</span>
|
|
1410
|
+
</span>
|
|
1411
|
+
</button>
|
|
1412
|
+
</li>
|
|
1413
|
+
<li class="pf-c-menu__list-item">
|
|
1414
|
+
<button class="pf-c-menu__item pf-m-current" type="button">
|
|
1415
|
+
<span class="pf-c-menu__item-main">
|
|
1416
|
+
<span class="pf-c-menu__item-text">Current link</span>
|
|
1417
|
+
</span>
|
|
1418
|
+
</button>
|
|
1419
|
+
</li>
|
|
1420
|
+
<li class="pf-c-menu__list-item">
|
|
1421
|
+
<button class="pf-c-menu__item" type="button">
|
|
1422
|
+
<span class="pf-c-menu__item-main">
|
|
1423
|
+
<span class="pf-c-menu__item-text">Add storage</span>
|
|
1424
|
+
</span>
|
|
1425
|
+
</button>
|
|
1426
|
+
</li>
|
|
1427
|
+
<li class="pf-c-menu__list-item pf-m-current-path">
|
|
1428
|
+
<button class="pf-c-menu__item" type="button" aria-expanded="true">
|
|
1429
|
+
<span class="pf-c-menu__item-main">
|
|
1430
|
+
<span class="pf-c-menu__item-text">Edit</span>
|
|
1431
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1432
|
+
<i class="fas fa-angle-right"></i>
|
|
1433
|
+
</span>
|
|
1434
|
+
</span>
|
|
1435
|
+
</button>
|
|
1436
|
+
<div class="pf-c-menu">
|
|
1437
|
+
<div class="pf-c-menu__content">
|
|
1438
|
+
<ul class="pf-c-menu__list">
|
|
1439
|
+
<li class="pf-c-menu__list-item">
|
|
1440
|
+
<button class="pf-c-menu__item" type="button" tabindex="0">
|
|
1441
|
+
<span class="pf-c-menu__item-main">
|
|
1442
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1443
|
+
<i class="fas fa-angle-left"></i>
|
|
1444
|
+
</span>
|
|
1445
|
+
<span class="pf-c-menu__item-text">Edit</span>
|
|
1446
|
+
</span>
|
|
1447
|
+
</button>
|
|
1448
|
+
</li>
|
|
1449
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1450
|
+
<li class="pf-c-menu__list-item">
|
|
1451
|
+
<button
|
|
1452
|
+
class="pf-c-menu__item"
|
|
1453
|
+
type="button"
|
|
1454
|
+
aria-expanded="false"
|
|
1455
|
+
>
|
|
1456
|
+
<span class="pf-c-menu__item-main">
|
|
1457
|
+
<span class="pf-c-menu__item-text">Deployment</span>
|
|
1458
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1459
|
+
<i class="fas fa-angle-right"></i>
|
|
1460
|
+
</span>
|
|
1461
|
+
</span>
|
|
1462
|
+
</button>
|
|
1463
|
+
<div class="pf-c-menu">
|
|
1464
|
+
<div class="pf-c-menu__content">
|
|
1465
|
+
<ul class="pf-c-menu__list">
|
|
1466
|
+
<li class="pf-c-menu__list-item">
|
|
1467
|
+
<button
|
|
1468
|
+
class="pf-c-menu__item"
|
|
1469
|
+
type="button"
|
|
1470
|
+
tabindex="0"
|
|
1471
|
+
>
|
|
1472
|
+
<span class="pf-c-menu__item-main">
|
|
1473
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1474
|
+
<i class="fas fa-angle-left"></i>
|
|
1475
|
+
</span>
|
|
1476
|
+
<span class="pf-c-menu__item-text">Deployment</span>
|
|
1477
|
+
</span>
|
|
1478
|
+
</button>
|
|
1479
|
+
</li>
|
|
1480
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1481
|
+
<li class="pf-c-menu__list-item">
|
|
1482
|
+
<button class="pf-c-menu__item" type="button">
|
|
1483
|
+
<span class="pf-c-menu__item-main">
|
|
1484
|
+
<span class="pf-c-menu__item-text">Routes</span>
|
|
1485
|
+
</span>
|
|
1486
|
+
</button>
|
|
1487
|
+
</li>
|
|
1488
|
+
<li class="pf-c-menu__list-item">
|
|
1489
|
+
<button class="pf-c-menu__item" type="button">
|
|
1490
|
+
<span class="pf-c-menu__item-main">
|
|
1491
|
+
<span class="pf-c-menu__item-text">Nodes</span>
|
|
1492
|
+
</span>
|
|
1493
|
+
</button>
|
|
1494
|
+
</li>
|
|
1495
|
+
<li class="pf-c-menu__list-item">
|
|
1496
|
+
<button class="pf-c-menu__item" type="button">
|
|
1497
|
+
<span class="pf-c-menu__item-main">
|
|
1498
|
+
<span class="pf-c-menu__item-text">URLs</span>
|
|
1499
|
+
</span>
|
|
1500
|
+
</button>
|
|
1501
|
+
</li>
|
|
1502
|
+
<li class="pf-c-menu__list-item">
|
|
1503
|
+
<button
|
|
1504
|
+
class="pf-c-menu__item"
|
|
1505
|
+
type="button"
|
|
1506
|
+
aria-expanded="false"
|
|
1507
|
+
>
|
|
1508
|
+
<span class="pf-c-menu__item-main">
|
|
1509
|
+
<span
|
|
1510
|
+
class="pf-c-menu__item-text"
|
|
1511
|
+
>Advanced settings</span>
|
|
1512
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1513
|
+
<i class="fas fa-angle-right"></i>
|
|
1514
|
+
</span>
|
|
1515
|
+
</span>
|
|
1516
|
+
</button>
|
|
1517
|
+
<div class="pf-c-menu">
|
|
1518
|
+
<div class="pf-c-menu__content">
|
|
1519
|
+
<ul class="pf-c-menu__list">
|
|
1520
|
+
<li class="pf-c-menu__list-item">
|
|
1521
|
+
<button
|
|
1522
|
+
class="pf-c-menu__item"
|
|
1523
|
+
type="button"
|
|
1524
|
+
tabindex="0"
|
|
1525
|
+
>
|
|
1526
|
+
<span class="pf-c-menu__item-main">
|
|
1527
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1528
|
+
<i class="fas fa-angle-left"></i>
|
|
1529
|
+
</span>
|
|
1530
|
+
<span
|
|
1531
|
+
class="pf-c-menu__item-text"
|
|
1532
|
+
>Advanced settings</span>
|
|
1533
|
+
</span>
|
|
1534
|
+
</button>
|
|
1535
|
+
</li>
|
|
1536
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1537
|
+
<li class="pf-c-menu__list-item">
|
|
1538
|
+
<button class="pf-c-menu__item" type="button">
|
|
1539
|
+
<span class="pf-c-menu__item-main">
|
|
1540
|
+
<span class="pf-c-menu__item-text">Reports</span>
|
|
1541
|
+
</span>
|
|
1542
|
+
</button>
|
|
1543
|
+
</li>
|
|
1544
|
+
<li class="pf-c-menu__list-item">
|
|
1545
|
+
<button class="pf-c-menu__item" type="button">
|
|
1546
|
+
<span class="pf-c-menu__item-main">
|
|
1547
|
+
<span
|
|
1548
|
+
class="pf-c-menu__item-text"
|
|
1549
|
+
>Policies</span>
|
|
1550
|
+
</span>
|
|
1551
|
+
</button>
|
|
1552
|
+
</li>
|
|
1553
|
+
<li class="pf-c-menu__list-item">
|
|
1554
|
+
<button class="pf-c-menu__item" type="button">
|
|
1555
|
+
<span class="pf-c-menu__item-main">
|
|
1556
|
+
<span class="pf-c-menu__item-text">Systems</span>
|
|
1557
|
+
</span>
|
|
1558
|
+
</button>
|
|
1559
|
+
</li>
|
|
1560
|
+
</ul>
|
|
1561
|
+
</div>
|
|
1562
|
+
</div>
|
|
1563
|
+
</li>
|
|
1564
|
+
</ul>
|
|
1565
|
+
</div>
|
|
1566
|
+
</div>
|
|
1567
|
+
</li>
|
|
1568
|
+
<li class="pf-c-menu__list-item">
|
|
1569
|
+
<button
|
|
1570
|
+
class="pf-c-menu__item"
|
|
1571
|
+
type="button"
|
|
1572
|
+
aria-expanded="false"
|
|
1573
|
+
>
|
|
1574
|
+
<span class="pf-c-menu__item-main">
|
|
1575
|
+
<span class="pf-c-menu__item-text">RBAC</span>
|
|
1576
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1577
|
+
<i class="fas fa-angle-right"></i>
|
|
1578
|
+
</span>
|
|
1579
|
+
</span>
|
|
1580
|
+
</button>
|
|
1581
|
+
<div class="pf-c-menu">
|
|
1582
|
+
<div class="pf-c-menu__content">
|
|
1583
|
+
<ul class="pf-c-menu__list">
|
|
1584
|
+
<li class="pf-c-menu__list-item">
|
|
1585
|
+
<button class="pf-c-menu__item" type="button">
|
|
1586
|
+
<span class="pf-c-menu__item-main">
|
|
1587
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1588
|
+
<i class="fas fa-angle-left"></i>
|
|
1589
|
+
</span>
|
|
1590
|
+
<span class="pf-c-menu__item-text">RBAC</span>
|
|
1591
|
+
</span>
|
|
1592
|
+
</button>
|
|
1593
|
+
</li>
|
|
1594
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1595
|
+
<li class="pf-c-menu__list-item">
|
|
1596
|
+
<button class="pf-c-menu__item" type="button">
|
|
1597
|
+
<span class="pf-c-menu__item-main">
|
|
1598
|
+
<span class="pf-c-menu__item-text">Reports</span>
|
|
1599
|
+
</span>
|
|
1600
|
+
</button>
|
|
1601
|
+
</li>
|
|
1602
|
+
<li class="pf-c-menu__list-item">
|
|
1603
|
+
<button class="pf-c-menu__item" type="button">
|
|
1604
|
+
<span class="pf-c-menu__item-main">
|
|
1605
|
+
<span class="pf-c-menu__item-text">Policies</span>
|
|
1606
|
+
</span>
|
|
1607
|
+
</button>
|
|
1608
|
+
</li>
|
|
1609
|
+
<li class="pf-c-menu__list-item">
|
|
1610
|
+
<button class="pf-c-menu__item" type="button">
|
|
1611
|
+
<span class="pf-c-menu__item-main">
|
|
1612
|
+
<span class="pf-c-menu__item-text">Systems</span>
|
|
1613
|
+
</span>
|
|
1614
|
+
</button>
|
|
1615
|
+
</li>
|
|
1616
|
+
</ul>
|
|
1617
|
+
</div>
|
|
1618
|
+
</div>
|
|
1619
|
+
</li>
|
|
1620
|
+
<li class="pf-c-menu__list-item">
|
|
1621
|
+
<button class="pf-c-menu__item" type="button">
|
|
1622
|
+
<span class="pf-c-menu__item-main">
|
|
1623
|
+
<span
|
|
1624
|
+
class="pf-c-menu__item-text"
|
|
1625
|
+
>Thing with a longer label</span>
|
|
1626
|
+
</span>
|
|
1627
|
+
</button>
|
|
1628
|
+
</li>
|
|
1629
|
+
</ul>
|
|
1630
|
+
</div>
|
|
1631
|
+
</div>
|
|
1632
|
+
</li>
|
|
1633
|
+
<li class="pf-c-menu__list-item">
|
|
1634
|
+
<button class="pf-c-menu__item" type="button" aria-expanded="false">
|
|
1635
|
+
<span class="pf-c-menu__item-main">
|
|
1636
|
+
<span class="pf-c-menu__item-text">Configuration</span>
|
|
1637
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1638
|
+
<i class="fas fa-angle-right"></i>
|
|
1639
|
+
</span>
|
|
1640
|
+
</span>
|
|
1641
|
+
</button>
|
|
1642
|
+
<div class="pf-c-menu">
|
|
1643
|
+
<div class="pf-c-menu__content">
|
|
1644
|
+
<ul class="pf-c-menu__list">
|
|
1645
|
+
<li class="pf-c-menu__list-item">
|
|
1646
|
+
<button class="pf-c-menu__item" type="button">
|
|
1647
|
+
<span class="pf-c-menu__item-main">
|
|
1648
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1649
|
+
<i class="fas fa-angle-left"></i>
|
|
1650
|
+
</span>
|
|
1651
|
+
<span class="pf-c-menu__item-text">Configuration</span>
|
|
1652
|
+
</span>
|
|
1653
|
+
</button>
|
|
1654
|
+
</li>
|
|
1655
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1656
|
+
<li class="pf-c-menu__list-item">
|
|
1657
|
+
<button
|
|
1658
|
+
class="pf-c-menu__item"
|
|
1659
|
+
type="button"
|
|
1660
|
+
aria-expanded="false"
|
|
1661
|
+
>
|
|
1662
|
+
<span class="pf-c-menu__item-main">
|
|
1663
|
+
<span class="pf-c-menu__item-text">Profile</span>
|
|
1664
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1665
|
+
<i class="fas fa-angle-right"></i>
|
|
1666
|
+
</span>
|
|
1667
|
+
</span>
|
|
1668
|
+
</button>
|
|
1669
|
+
<div class="pf-c-menu">
|
|
1670
|
+
<div class="pf-c-menu__content">
|
|
1671
|
+
<ul class="pf-c-menu__list">
|
|
1672
|
+
<li class="pf-c-menu__list-item">
|
|
1673
|
+
<button class="pf-c-menu__item" type="button">
|
|
1674
|
+
<span class="pf-c-menu__item-main">
|
|
1675
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1676
|
+
<i class="fas fa-angle-left"></i>
|
|
1677
|
+
</span>
|
|
1678
|
+
<span class="pf-c-menu__item-text">Profile</span>
|
|
1679
|
+
</span>
|
|
1680
|
+
</button>
|
|
1681
|
+
</li>
|
|
1682
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1683
|
+
<li class="pf-c-menu__list-item">
|
|
1684
|
+
<button class="pf-c-menu__item" type="button">
|
|
1685
|
+
<span class="pf-c-menu__item-main">
|
|
1686
|
+
<span class="pf-c-menu__item-text">Avatar</span>
|
|
1687
|
+
</span>
|
|
1688
|
+
</button>
|
|
1689
|
+
</li>
|
|
1690
|
+
<li class="pf-c-menu__list-item">
|
|
1691
|
+
<button class="pf-c-menu__item" type="button">
|
|
1692
|
+
<span class="pf-c-menu__item-main">
|
|
1693
|
+
<span class="pf-c-menu__item-text">Name</span>
|
|
1694
|
+
</span>
|
|
1695
|
+
</button>
|
|
1696
|
+
</li>
|
|
1697
|
+
<li class="pf-c-menu__list-item">
|
|
1698
|
+
<button class="pf-c-menu__item" type="button">
|
|
1699
|
+
<span class="pf-c-menu__item-main">
|
|
1700
|
+
<span class="pf-c-menu__item-text">Title</span>
|
|
1701
|
+
</span>
|
|
1702
|
+
</button>
|
|
1703
|
+
</li>
|
|
1704
|
+
</ul>
|
|
1705
|
+
</div>
|
|
1706
|
+
</div>
|
|
1707
|
+
</li>
|
|
1708
|
+
<li class="pf-c-menu__list-item">
|
|
1709
|
+
<button class="pf-c-menu__item" type="button">
|
|
1710
|
+
<span class="pf-c-menu__item-main">
|
|
1711
|
+
<span class="pf-c-menu__item-text">Time zone</span>
|
|
1712
|
+
</span>
|
|
1713
|
+
</button>
|
|
1714
|
+
</li>
|
|
1715
|
+
<li class="pf-c-menu__list-item">
|
|
1716
|
+
<button class="pf-c-menu__item" type="button">
|
|
1717
|
+
<span class="pf-c-menu__item-main">
|
|
1718
|
+
<span class="pf-c-menu__item-text">Account settings</span>
|
|
1719
|
+
</span>
|
|
1720
|
+
</button>
|
|
1721
|
+
</li>
|
|
1722
|
+
<li class="pf-c-menu__list-item">
|
|
1723
|
+
<button class="pf-c-menu__item" type="button">
|
|
1724
|
+
<span class="pf-c-menu__item-main">
|
|
1725
|
+
<span
|
|
1726
|
+
class="pf-c-menu__item-text"
|
|
1727
|
+
>Thing with a longer label</span>
|
|
1728
|
+
</span>
|
|
1729
|
+
</button>
|
|
1730
|
+
</li>
|
|
1731
|
+
<li class="pf-c-menu__list-item">
|
|
1732
|
+
<button
|
|
1733
|
+
class="pf-c-menu__item"
|
|
1734
|
+
type="button"
|
|
1735
|
+
aria-expanded="false"
|
|
1736
|
+
>
|
|
1737
|
+
<span class="pf-c-menu__item-main">
|
|
1738
|
+
<span class="pf-c-menu__item-text">Edit access settings</span>
|
|
1739
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1740
|
+
<i class="fas fa-angle-right"></i>
|
|
1741
|
+
</span>
|
|
1742
|
+
</span>
|
|
1743
|
+
</button>
|
|
1744
|
+
<div class="pf-c-menu">
|
|
1745
|
+
<div class="pf-c-menu__content">
|
|
1746
|
+
<ul class="pf-c-menu__list">
|
|
1747
|
+
<li class="pf-c-menu__list-item">
|
|
1748
|
+
<button class="pf-c-menu__item" type="button">
|
|
1749
|
+
<span class="pf-c-menu__item-main">
|
|
1750
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1751
|
+
<i class="fas fa-angle-left"></i>
|
|
1752
|
+
</span>
|
|
1753
|
+
<span
|
|
1754
|
+
class="pf-c-menu__item-text"
|
|
1755
|
+
>Edit access settings</span>
|
|
1756
|
+
</span>
|
|
1757
|
+
</button>
|
|
1758
|
+
</li>
|
|
1759
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1760
|
+
<li class="pf-c-menu__list-item">
|
|
1761
|
+
<button class="pf-c-menu__item" type="button">
|
|
1762
|
+
<span class="pf-c-menu__item-main">
|
|
1763
|
+
<span class="pf-c-menu__item-text">Global access</span>
|
|
1764
|
+
</span>
|
|
1765
|
+
</button>
|
|
1766
|
+
</li>
|
|
1767
|
+
<li class="pf-c-menu__list-item">
|
|
1768
|
+
<button class="pf-c-menu__item" type="button">
|
|
1769
|
+
<span class="pf-c-menu__item-main">
|
|
1770
|
+
<span class="pf-c-menu__item-text">Account access</span>
|
|
1771
|
+
</span>
|
|
1772
|
+
</button>
|
|
1773
|
+
</li>
|
|
1774
|
+
</ul>
|
|
1775
|
+
</div>
|
|
1776
|
+
</div>
|
|
1777
|
+
</li>
|
|
1778
|
+
</ul>
|
|
1779
|
+
</div>
|
|
1780
|
+
</div>
|
|
1781
|
+
</li>
|
|
1782
|
+
</ul>
|
|
1783
|
+
</div>
|
|
1784
|
+
</div>
|
|
1785
|
+
</nav>
|
|
1786
|
+
|
|
825
1787
|
```
|
|
826
1788
|
|
|
827
|
-
###
|
|
828
|
-
|
|
829
|
-
|
|
1789
|
+
### Nav with drilldown menu level three
|
|
1790
|
+
|
|
1791
|
+
```html isBeta
|
|
1792
|
+
<nav class="pf-c-nav" aria-label="Drilldown menu example">
|
|
1793
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-drilled-in">
|
|
1794
|
+
<div
|
|
1795
|
+
class="pf-c-menu__content"
|
|
1796
|
+
style="--pf-c-menu__content--Height: 282px;"
|
|
1797
|
+
>
|
|
1798
|
+
<ul class="pf-c-menu__list">
|
|
1799
|
+
<li class="pf-c-menu__list-item">
|
|
1800
|
+
<button class="pf-c-menu__item" type="button">
|
|
1801
|
+
<span class="pf-c-menu__item-main">
|
|
1802
|
+
<span class="pf-c-menu__item-text">Start rollout</span>
|
|
1803
|
+
</span>
|
|
1804
|
+
</button>
|
|
1805
|
+
</li>
|
|
1806
|
+
<li class="pf-c-menu__list-item">
|
|
1807
|
+
<button class="pf-c-menu__item" type="button">
|
|
1808
|
+
<span class="pf-c-menu__item-main">
|
|
1809
|
+
<span class="pf-c-menu__item-text">Pause rollout</span>
|
|
1810
|
+
</span>
|
|
1811
|
+
</button>
|
|
1812
|
+
</li>
|
|
1813
|
+
<li class="pf-c-menu__list-item">
|
|
1814
|
+
<button class="pf-c-menu__item pf-m-current" type="button">
|
|
1815
|
+
<span class="pf-c-menu__item-main">
|
|
1816
|
+
<span class="pf-c-menu__item-text">Current link</span>
|
|
1817
|
+
</span>
|
|
1818
|
+
</button>
|
|
1819
|
+
</li>
|
|
1820
|
+
<li class="pf-c-menu__list-item">
|
|
1821
|
+
<button class="pf-c-menu__item" type="button">
|
|
1822
|
+
<span class="pf-c-menu__item-main">
|
|
1823
|
+
<span class="pf-c-menu__item-text">Add storage</span>
|
|
1824
|
+
</span>
|
|
1825
|
+
</button>
|
|
1826
|
+
</li>
|
|
1827
|
+
<li class="pf-c-menu__list-item pf-m-current-path">
|
|
1828
|
+
<button class="pf-c-menu__item" type="button" aria-expanded="true">
|
|
1829
|
+
<span class="pf-c-menu__item-main">
|
|
1830
|
+
<span class="pf-c-menu__item-text">Edit</span>
|
|
1831
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1832
|
+
<i class="fas fa-angle-right"></i>
|
|
1833
|
+
</span>
|
|
1834
|
+
</span>
|
|
1835
|
+
</button>
|
|
1836
|
+
<div class="pf-c-menu pf-m-drilled-in">
|
|
1837
|
+
<div class="pf-c-menu__content">
|
|
1838
|
+
<ul class="pf-c-menu__list">
|
|
1839
|
+
<li class="pf-c-menu__list-item">
|
|
1840
|
+
<button class="pf-c-menu__item" type="button" tabindex="0">
|
|
1841
|
+
<span class="pf-c-menu__item-main">
|
|
1842
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1843
|
+
<i class="fas fa-angle-left"></i>
|
|
1844
|
+
</span>
|
|
1845
|
+
<span class="pf-c-menu__item-text">Edit</span>
|
|
1846
|
+
</span>
|
|
1847
|
+
</button>
|
|
1848
|
+
</li>
|
|
1849
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1850
|
+
<li class="pf-c-menu__list-item pf-m-current-path">
|
|
1851
|
+
<button
|
|
1852
|
+
class="pf-c-menu__item"
|
|
1853
|
+
type="button"
|
|
1854
|
+
aria-expanded="true"
|
|
1855
|
+
>
|
|
1856
|
+
<span class="pf-c-menu__item-main">
|
|
1857
|
+
<span class="pf-c-menu__item-text">Deployment</span>
|
|
1858
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1859
|
+
<i class="fas fa-angle-right"></i>
|
|
1860
|
+
</span>
|
|
1861
|
+
</span>
|
|
1862
|
+
</button>
|
|
1863
|
+
<div class="pf-c-menu">
|
|
1864
|
+
<div class="pf-c-menu__content">
|
|
1865
|
+
<ul class="pf-c-menu__list">
|
|
1866
|
+
<li class="pf-c-menu__list-item">
|
|
1867
|
+
<button
|
|
1868
|
+
class="pf-c-menu__item"
|
|
1869
|
+
type="button"
|
|
1870
|
+
tabindex="0"
|
|
1871
|
+
>
|
|
1872
|
+
<span class="pf-c-menu__item-main">
|
|
1873
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1874
|
+
<i class="fas fa-angle-left"></i>
|
|
1875
|
+
</span>
|
|
1876
|
+
<span class="pf-c-menu__item-text">Deployment</span>
|
|
1877
|
+
</span>
|
|
1878
|
+
</button>
|
|
1879
|
+
</li>
|
|
1880
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1881
|
+
<li class="pf-c-menu__list-item">
|
|
1882
|
+
<button class="pf-c-menu__item" type="button">
|
|
1883
|
+
<span class="pf-c-menu__item-main">
|
|
1884
|
+
<span class="pf-c-menu__item-text">Routes</span>
|
|
1885
|
+
</span>
|
|
1886
|
+
</button>
|
|
1887
|
+
</li>
|
|
1888
|
+
<li class="pf-c-menu__list-item">
|
|
1889
|
+
<button class="pf-c-menu__item" type="button">
|
|
1890
|
+
<span class="pf-c-menu__item-main">
|
|
1891
|
+
<span class="pf-c-menu__item-text">Nodes</span>
|
|
1892
|
+
</span>
|
|
1893
|
+
</button>
|
|
1894
|
+
</li>
|
|
1895
|
+
<li class="pf-c-menu__list-item">
|
|
1896
|
+
<button class="pf-c-menu__item" type="button">
|
|
1897
|
+
<span class="pf-c-menu__item-main">
|
|
1898
|
+
<span class="pf-c-menu__item-text">URLs</span>
|
|
1899
|
+
</span>
|
|
1900
|
+
</button>
|
|
1901
|
+
</li>
|
|
1902
|
+
<li class="pf-c-menu__list-item">
|
|
1903
|
+
<button
|
|
1904
|
+
class="pf-c-menu__item"
|
|
1905
|
+
type="button"
|
|
1906
|
+
aria-expanded="false"
|
|
1907
|
+
>
|
|
1908
|
+
<span class="pf-c-menu__item-main">
|
|
1909
|
+
<span
|
|
1910
|
+
class="pf-c-menu__item-text"
|
|
1911
|
+
>Advanced settings</span>
|
|
1912
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1913
|
+
<i class="fas fa-angle-right"></i>
|
|
1914
|
+
</span>
|
|
1915
|
+
</span>
|
|
1916
|
+
</button>
|
|
1917
|
+
<div class="pf-c-menu">
|
|
1918
|
+
<div class="pf-c-menu__content">
|
|
1919
|
+
<ul class="pf-c-menu__list">
|
|
1920
|
+
<li class="pf-c-menu__list-item">
|
|
1921
|
+
<button
|
|
1922
|
+
class="pf-c-menu__item"
|
|
1923
|
+
type="button"
|
|
1924
|
+
tabindex="0"
|
|
1925
|
+
>
|
|
1926
|
+
<span class="pf-c-menu__item-main">
|
|
1927
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1928
|
+
<i class="fas fa-angle-left"></i>
|
|
1929
|
+
</span>
|
|
1930
|
+
<span
|
|
1931
|
+
class="pf-c-menu__item-text"
|
|
1932
|
+
>Advanced settings</span>
|
|
1933
|
+
</span>
|
|
1934
|
+
</button>
|
|
1935
|
+
</li>
|
|
1936
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1937
|
+
<li class="pf-c-menu__list-item">
|
|
1938
|
+
<button class="pf-c-menu__item" type="button">
|
|
1939
|
+
<span class="pf-c-menu__item-main">
|
|
1940
|
+
<span class="pf-c-menu__item-text">Reports</span>
|
|
1941
|
+
</span>
|
|
1942
|
+
</button>
|
|
1943
|
+
</li>
|
|
1944
|
+
<li class="pf-c-menu__list-item">
|
|
1945
|
+
<button class="pf-c-menu__item" type="button">
|
|
1946
|
+
<span class="pf-c-menu__item-main">
|
|
1947
|
+
<span
|
|
1948
|
+
class="pf-c-menu__item-text"
|
|
1949
|
+
>Policies</span>
|
|
1950
|
+
</span>
|
|
1951
|
+
</button>
|
|
1952
|
+
</li>
|
|
1953
|
+
<li class="pf-c-menu__list-item">
|
|
1954
|
+
<button class="pf-c-menu__item" type="button">
|
|
1955
|
+
<span class="pf-c-menu__item-main">
|
|
1956
|
+
<span class="pf-c-menu__item-text">Systems</span>
|
|
1957
|
+
</span>
|
|
1958
|
+
</button>
|
|
1959
|
+
</li>
|
|
1960
|
+
</ul>
|
|
1961
|
+
</div>
|
|
1962
|
+
</div>
|
|
1963
|
+
</li>
|
|
1964
|
+
</ul>
|
|
1965
|
+
</div>
|
|
1966
|
+
</div>
|
|
1967
|
+
</li>
|
|
1968
|
+
<li class="pf-c-menu__list-item">
|
|
1969
|
+
<button
|
|
1970
|
+
class="pf-c-menu__item"
|
|
1971
|
+
type="button"
|
|
1972
|
+
aria-expanded="false"
|
|
1973
|
+
>
|
|
1974
|
+
<span class="pf-c-menu__item-main">
|
|
1975
|
+
<span class="pf-c-menu__item-text">RBAC</span>
|
|
1976
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1977
|
+
<i class="fas fa-angle-right"></i>
|
|
1978
|
+
</span>
|
|
1979
|
+
</span>
|
|
1980
|
+
</button>
|
|
1981
|
+
<div class="pf-c-menu">
|
|
1982
|
+
<div class="pf-c-menu__content">
|
|
1983
|
+
<ul class="pf-c-menu__list">
|
|
1984
|
+
<li class="pf-c-menu__list-item">
|
|
1985
|
+
<button class="pf-c-menu__item" type="button">
|
|
1986
|
+
<span class="pf-c-menu__item-main">
|
|
1987
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1988
|
+
<i class="fas fa-angle-left"></i>
|
|
1989
|
+
</span>
|
|
1990
|
+
<span class="pf-c-menu__item-text">RBAC</span>
|
|
1991
|
+
</span>
|
|
1992
|
+
</button>
|
|
1993
|
+
</li>
|
|
1994
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1995
|
+
<li class="pf-c-menu__list-item">
|
|
1996
|
+
<button class="pf-c-menu__item" type="button">
|
|
1997
|
+
<span class="pf-c-menu__item-main">
|
|
1998
|
+
<span class="pf-c-menu__item-text">Reports</span>
|
|
1999
|
+
</span>
|
|
2000
|
+
</button>
|
|
2001
|
+
</li>
|
|
2002
|
+
<li class="pf-c-menu__list-item">
|
|
2003
|
+
<button class="pf-c-menu__item" type="button">
|
|
2004
|
+
<span class="pf-c-menu__item-main">
|
|
2005
|
+
<span class="pf-c-menu__item-text">Policies</span>
|
|
2006
|
+
</span>
|
|
2007
|
+
</button>
|
|
2008
|
+
</li>
|
|
2009
|
+
<li class="pf-c-menu__list-item">
|
|
2010
|
+
<button class="pf-c-menu__item" type="button">
|
|
2011
|
+
<span class="pf-c-menu__item-main">
|
|
2012
|
+
<span class="pf-c-menu__item-text">Systems</span>
|
|
2013
|
+
</span>
|
|
2014
|
+
</button>
|
|
2015
|
+
</li>
|
|
2016
|
+
</ul>
|
|
2017
|
+
</div>
|
|
2018
|
+
</div>
|
|
2019
|
+
</li>
|
|
2020
|
+
<li class="pf-c-menu__list-item">
|
|
2021
|
+
<button class="pf-c-menu__item" type="button">
|
|
2022
|
+
<span class="pf-c-menu__item-main">
|
|
2023
|
+
<span
|
|
2024
|
+
class="pf-c-menu__item-text"
|
|
2025
|
+
>Thing with a longer label</span>
|
|
2026
|
+
</span>
|
|
2027
|
+
</button>
|
|
2028
|
+
</li>
|
|
2029
|
+
</ul>
|
|
2030
|
+
</div>
|
|
2031
|
+
</div>
|
|
2032
|
+
</li>
|
|
2033
|
+
<li class="pf-c-menu__list-item">
|
|
2034
|
+
<button class="pf-c-menu__item" type="button" aria-expanded="false">
|
|
2035
|
+
<span class="pf-c-menu__item-main">
|
|
2036
|
+
<span class="pf-c-menu__item-text">Configuration</span>
|
|
2037
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2038
|
+
<i class="fas fa-angle-right"></i>
|
|
2039
|
+
</span>
|
|
2040
|
+
</span>
|
|
2041
|
+
</button>
|
|
2042
|
+
<div class="pf-c-menu">
|
|
2043
|
+
<div class="pf-c-menu__content">
|
|
2044
|
+
<ul class="pf-c-menu__list">
|
|
2045
|
+
<li class="pf-c-menu__list-item">
|
|
2046
|
+
<button class="pf-c-menu__item" type="button">
|
|
2047
|
+
<span class="pf-c-menu__item-main">
|
|
2048
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2049
|
+
<i class="fas fa-angle-left"></i>
|
|
2050
|
+
</span>
|
|
2051
|
+
<span class="pf-c-menu__item-text">Configuration</span>
|
|
2052
|
+
</span>
|
|
2053
|
+
</button>
|
|
2054
|
+
</li>
|
|
2055
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2056
|
+
<li class="pf-c-menu__list-item">
|
|
2057
|
+
<button
|
|
2058
|
+
class="pf-c-menu__item"
|
|
2059
|
+
type="button"
|
|
2060
|
+
aria-expanded="false"
|
|
2061
|
+
>
|
|
2062
|
+
<span class="pf-c-menu__item-main">
|
|
2063
|
+
<span class="pf-c-menu__item-text">Profile</span>
|
|
2064
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2065
|
+
<i class="fas fa-angle-right"></i>
|
|
2066
|
+
</span>
|
|
2067
|
+
</span>
|
|
2068
|
+
</button>
|
|
2069
|
+
<div class="pf-c-menu">
|
|
2070
|
+
<div class="pf-c-menu__content">
|
|
2071
|
+
<ul class="pf-c-menu__list">
|
|
2072
|
+
<li class="pf-c-menu__list-item">
|
|
2073
|
+
<button class="pf-c-menu__item" type="button">
|
|
2074
|
+
<span class="pf-c-menu__item-main">
|
|
2075
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2076
|
+
<i class="fas fa-angle-left"></i>
|
|
2077
|
+
</span>
|
|
2078
|
+
<span class="pf-c-menu__item-text">Profile</span>
|
|
2079
|
+
</span>
|
|
2080
|
+
</button>
|
|
2081
|
+
</li>
|
|
2082
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2083
|
+
<li class="pf-c-menu__list-item">
|
|
2084
|
+
<button class="pf-c-menu__item" type="button">
|
|
2085
|
+
<span class="pf-c-menu__item-main">
|
|
2086
|
+
<span class="pf-c-menu__item-text">Avatar</span>
|
|
2087
|
+
</span>
|
|
2088
|
+
</button>
|
|
2089
|
+
</li>
|
|
2090
|
+
<li class="pf-c-menu__list-item">
|
|
2091
|
+
<button class="pf-c-menu__item" type="button">
|
|
2092
|
+
<span class="pf-c-menu__item-main">
|
|
2093
|
+
<span class="pf-c-menu__item-text">Name</span>
|
|
2094
|
+
</span>
|
|
2095
|
+
</button>
|
|
2096
|
+
</li>
|
|
2097
|
+
<li class="pf-c-menu__list-item">
|
|
2098
|
+
<button class="pf-c-menu__item" type="button">
|
|
2099
|
+
<span class="pf-c-menu__item-main">
|
|
2100
|
+
<span class="pf-c-menu__item-text">Title</span>
|
|
2101
|
+
</span>
|
|
2102
|
+
</button>
|
|
2103
|
+
</li>
|
|
2104
|
+
</ul>
|
|
2105
|
+
</div>
|
|
2106
|
+
</div>
|
|
2107
|
+
</li>
|
|
2108
|
+
<li class="pf-c-menu__list-item">
|
|
2109
|
+
<button class="pf-c-menu__item" type="button">
|
|
2110
|
+
<span class="pf-c-menu__item-main">
|
|
2111
|
+
<span class="pf-c-menu__item-text">Time zone</span>
|
|
2112
|
+
</span>
|
|
2113
|
+
</button>
|
|
2114
|
+
</li>
|
|
2115
|
+
<li class="pf-c-menu__list-item">
|
|
2116
|
+
<button class="pf-c-menu__item" type="button">
|
|
2117
|
+
<span class="pf-c-menu__item-main">
|
|
2118
|
+
<span class="pf-c-menu__item-text">Account settings</span>
|
|
2119
|
+
</span>
|
|
2120
|
+
</button>
|
|
2121
|
+
</li>
|
|
2122
|
+
<li class="pf-c-menu__list-item">
|
|
2123
|
+
<button class="pf-c-menu__item" type="button">
|
|
2124
|
+
<span class="pf-c-menu__item-main">
|
|
2125
|
+
<span
|
|
2126
|
+
class="pf-c-menu__item-text"
|
|
2127
|
+
>Thing with a longer label</span>
|
|
2128
|
+
</span>
|
|
2129
|
+
</button>
|
|
2130
|
+
</li>
|
|
2131
|
+
<li class="pf-c-menu__list-item">
|
|
2132
|
+
<button
|
|
2133
|
+
class="pf-c-menu__item"
|
|
2134
|
+
type="button"
|
|
2135
|
+
aria-expanded="false"
|
|
2136
|
+
>
|
|
2137
|
+
<span class="pf-c-menu__item-main">
|
|
2138
|
+
<span class="pf-c-menu__item-text">Edit access settings</span>
|
|
2139
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2140
|
+
<i class="fas fa-angle-right"></i>
|
|
2141
|
+
</span>
|
|
2142
|
+
</span>
|
|
2143
|
+
</button>
|
|
2144
|
+
<div class="pf-c-menu">
|
|
2145
|
+
<div class="pf-c-menu__content">
|
|
2146
|
+
<ul class="pf-c-menu__list">
|
|
2147
|
+
<li class="pf-c-menu__list-item">
|
|
2148
|
+
<button class="pf-c-menu__item" type="button">
|
|
2149
|
+
<span class="pf-c-menu__item-main">
|
|
2150
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2151
|
+
<i class="fas fa-angle-left"></i>
|
|
2152
|
+
</span>
|
|
2153
|
+
<span
|
|
2154
|
+
class="pf-c-menu__item-text"
|
|
2155
|
+
>Edit access settings</span>
|
|
2156
|
+
</span>
|
|
2157
|
+
</button>
|
|
2158
|
+
</li>
|
|
2159
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2160
|
+
<li class="pf-c-menu__list-item">
|
|
2161
|
+
<button class="pf-c-menu__item" type="button">
|
|
2162
|
+
<span class="pf-c-menu__item-main">
|
|
2163
|
+
<span class="pf-c-menu__item-text">Global access</span>
|
|
2164
|
+
</span>
|
|
2165
|
+
</button>
|
|
2166
|
+
</li>
|
|
2167
|
+
<li class="pf-c-menu__list-item">
|
|
2168
|
+
<button class="pf-c-menu__item" type="button">
|
|
2169
|
+
<span class="pf-c-menu__item-main">
|
|
2170
|
+
<span class="pf-c-menu__item-text">Account access</span>
|
|
2171
|
+
</span>
|
|
2172
|
+
</button>
|
|
2173
|
+
</li>
|
|
2174
|
+
</ul>
|
|
2175
|
+
</div>
|
|
2176
|
+
</div>
|
|
2177
|
+
</li>
|
|
2178
|
+
</ul>
|
|
2179
|
+
</div>
|
|
2180
|
+
</div>
|
|
2181
|
+
</li>
|
|
2182
|
+
</ul>
|
|
2183
|
+
</div>
|
|
2184
|
+
</div>
|
|
2185
|
+
</nav>
|
|
2186
|
+
|
|
830
2187
|
```
|
|
831
|
-
-->
|
|
832
2188
|
|
|
833
2189
|
## Documentation
|
|
834
2190
|
|