@patternfly/patternfly 4.140.0 → 4.141.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/Menu/menu.css +32 -1
- package/components/Menu/menu.scss +39 -1
- package/docs/components/Menu/examples/Menu.md +548 -67
- package/package.json +1 -1
- package/patternfly-no-reset.css +32 -1
- package/patternfly.css +32 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -89,44 +89,193 @@ cssPrefix: pf-c-menu
|
|
|
89
89
|
|
|
90
90
|
```
|
|
91
91
|
|
|
92
|
-
###
|
|
92
|
+
### Scrollable
|
|
93
93
|
|
|
94
94
|
```html
|
|
95
|
-
<div class="pf-c-menu">
|
|
95
|
+
<div class="pf-c-menu pf-m-scrollable">
|
|
96
96
|
<div class="pf-c-menu__content">
|
|
97
97
|
<ul class="pf-c-menu__list">
|
|
98
98
|
<li class="pf-c-menu__list-item">
|
|
99
99
|
<button class="pf-c-menu__item" type="button">
|
|
100
100
|
<span class="pf-c-menu__item-main">
|
|
101
|
-
<span class="pf-c-menu__item-text">
|
|
102
|
-
<span class="pf-c-menu__item-toggle-icon">
|
|
103
|
-
<i class="fas fa-angle-right"></i>
|
|
104
|
-
</span>
|
|
101
|
+
<span class="pf-c-menu__item-text">Action 1</span>
|
|
105
102
|
</span>
|
|
106
103
|
</button>
|
|
107
104
|
</li>
|
|
108
|
-
<li class="pf-c-menu__list-item
|
|
109
|
-
<button class="pf-c-menu__item" type="button"
|
|
105
|
+
<li class="pf-c-menu__list-item">
|
|
106
|
+
<button class="pf-c-menu__item" type="button">
|
|
110
107
|
<span class="pf-c-menu__item-main">
|
|
111
|
-
<span class="pf-c-menu__item-text">
|
|
112
|
-
<span class="pf-c-menu__item-toggle-icon">
|
|
113
|
-
<i class="fas fa-angle-right"></i>
|
|
114
|
-
</span>
|
|
108
|
+
<span class="pf-c-menu__item-text">Action 2</span>
|
|
115
109
|
</span>
|
|
116
110
|
</button>
|
|
117
111
|
</li>
|
|
118
112
|
<li class="pf-c-menu__list-item">
|
|
119
113
|
<button class="pf-c-menu__item" type="button">
|
|
120
114
|
<span class="pf-c-menu__item-main">
|
|
121
|
-
<span class="pf-c-menu__item-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
115
|
+
<span class="pf-c-menu__item-text">Action 3</span>
|
|
116
|
+
</span>
|
|
117
|
+
</button>
|
|
118
|
+
</li>
|
|
119
|
+
<li class="pf-c-menu__list-item">
|
|
120
|
+
<button class="pf-c-menu__item" type="button">
|
|
121
|
+
<span class="pf-c-menu__item-main">
|
|
122
|
+
<span class="pf-c-menu__item-text">Action 4</span>
|
|
123
|
+
</span>
|
|
124
|
+
</button>
|
|
125
|
+
</li>
|
|
126
|
+
<li class="pf-c-menu__list-item">
|
|
127
|
+
<button class="pf-c-menu__item" type="button">
|
|
128
|
+
<span class="pf-c-menu__item-main">
|
|
129
|
+
<span class="pf-c-menu__item-text">Action 5</span>
|
|
130
|
+
</span>
|
|
131
|
+
</button>
|
|
132
|
+
</li>
|
|
133
|
+
<li class="pf-c-menu__list-item">
|
|
134
|
+
<button class="pf-c-menu__item" type="button">
|
|
135
|
+
<span class="pf-c-menu__item-main">
|
|
136
|
+
<span class="pf-c-menu__item-text">Action 6</span>
|
|
137
|
+
</span>
|
|
138
|
+
</button>
|
|
139
|
+
</li>
|
|
140
|
+
<li class="pf-c-menu__list-item">
|
|
141
|
+
<button class="pf-c-menu__item" type="button">
|
|
142
|
+
<span class="pf-c-menu__item-main">
|
|
143
|
+
<span class="pf-c-menu__item-text">Action 7</span>
|
|
144
|
+
</span>
|
|
145
|
+
</button>
|
|
146
|
+
</li>
|
|
147
|
+
<li class="pf-c-menu__list-item">
|
|
148
|
+
<button class="pf-c-menu__item" type="button">
|
|
149
|
+
<span class="pf-c-menu__item-main">
|
|
150
|
+
<span class="pf-c-menu__item-text">Action 8</span>
|
|
151
|
+
</span>
|
|
152
|
+
</button>
|
|
153
|
+
</li>
|
|
154
|
+
<li class="pf-c-menu__list-item">
|
|
155
|
+
<button class="pf-c-menu__item" type="button">
|
|
156
|
+
<span class="pf-c-menu__item-main">
|
|
157
|
+
<span class="pf-c-menu__item-text">Action 9</span>
|
|
158
|
+
</span>
|
|
159
|
+
</button>
|
|
160
|
+
</li>
|
|
161
|
+
<li class="pf-c-menu__list-item">
|
|
162
|
+
<button class="pf-c-menu__item" type="button">
|
|
163
|
+
<span class="pf-c-menu__item-main">
|
|
164
|
+
<span class="pf-c-menu__item-text">Action 10</span>
|
|
165
|
+
</span>
|
|
166
|
+
</button>
|
|
167
|
+
</li>
|
|
168
|
+
<li class="pf-c-menu__list-item">
|
|
169
|
+
<button class="pf-c-menu__item" type="button">
|
|
170
|
+
<span class="pf-c-menu__item-main">
|
|
171
|
+
<span class="pf-c-menu__item-text">Action 11</span>
|
|
172
|
+
</span>
|
|
173
|
+
</button>
|
|
174
|
+
</li>
|
|
175
|
+
<li class="pf-c-menu__list-item">
|
|
176
|
+
<button class="pf-c-menu__item" type="button">
|
|
177
|
+
<span class="pf-c-menu__item-main">
|
|
178
|
+
<span class="pf-c-menu__item-text">Action 12</span>
|
|
179
|
+
</span>
|
|
180
|
+
</button>
|
|
181
|
+
</li>
|
|
182
|
+
</ul>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### Scrollable with custom menu height
|
|
189
|
+
|
|
190
|
+
```html
|
|
191
|
+
<div
|
|
192
|
+
class="pf-c-menu pf-m-scrollable"
|
|
193
|
+
style="--pf-c-menu__content--MaxHeight: 200px;"
|
|
194
|
+
>
|
|
195
|
+
<div class="pf-c-menu__content">
|
|
196
|
+
<ul class="pf-c-menu__list">
|
|
197
|
+
<li class="pf-c-menu__list-item">
|
|
198
|
+
<button class="pf-c-menu__item" type="button">
|
|
199
|
+
<span class="pf-c-menu__item-main">
|
|
200
|
+
<span class="pf-c-menu__item-text">Action 1</span>
|
|
201
|
+
</span>
|
|
202
|
+
</button>
|
|
203
|
+
</li>
|
|
204
|
+
<li class="pf-c-menu__list-item">
|
|
205
|
+
<button class="pf-c-menu__item" type="button">
|
|
206
|
+
<span class="pf-c-menu__item-main">
|
|
207
|
+
<span class="pf-c-menu__item-text">Action 2</span>
|
|
208
|
+
</span>
|
|
209
|
+
</button>
|
|
210
|
+
</li>
|
|
211
|
+
<li class="pf-c-menu__list-item">
|
|
212
|
+
<button class="pf-c-menu__item" type="button">
|
|
213
|
+
<span class="pf-c-menu__item-main">
|
|
214
|
+
<span class="pf-c-menu__item-text">Action 3</span>
|
|
215
|
+
</span>
|
|
216
|
+
</button>
|
|
217
|
+
</li>
|
|
218
|
+
<li class="pf-c-menu__list-item">
|
|
219
|
+
<button class="pf-c-menu__item" type="button">
|
|
220
|
+
<span class="pf-c-menu__item-main">
|
|
221
|
+
<span class="pf-c-menu__item-text">Action 4</span>
|
|
222
|
+
</span>
|
|
223
|
+
</button>
|
|
224
|
+
</li>
|
|
225
|
+
<li class="pf-c-menu__list-item">
|
|
226
|
+
<button class="pf-c-menu__item" type="button">
|
|
227
|
+
<span class="pf-c-menu__item-main">
|
|
228
|
+
<span class="pf-c-menu__item-text">Action 5</span>
|
|
229
|
+
</span>
|
|
230
|
+
</button>
|
|
231
|
+
</li>
|
|
232
|
+
<li class="pf-c-menu__list-item">
|
|
233
|
+
<button class="pf-c-menu__item" type="button">
|
|
234
|
+
<span class="pf-c-menu__item-main">
|
|
235
|
+
<span class="pf-c-menu__item-text">Action 6</span>
|
|
236
|
+
</span>
|
|
237
|
+
</button>
|
|
238
|
+
</li>
|
|
239
|
+
<li class="pf-c-menu__list-item">
|
|
240
|
+
<button class="pf-c-menu__item" type="button">
|
|
241
|
+
<span class="pf-c-menu__item-main">
|
|
242
|
+
<span class="pf-c-menu__item-text">Action 7</span>
|
|
243
|
+
</span>
|
|
244
|
+
</button>
|
|
245
|
+
</li>
|
|
246
|
+
<li class="pf-c-menu__list-item">
|
|
247
|
+
<button class="pf-c-menu__item" type="button">
|
|
248
|
+
<span class="pf-c-menu__item-main">
|
|
249
|
+
<span class="pf-c-menu__item-text">Action 8</span>
|
|
250
|
+
</span>
|
|
251
|
+
</button>
|
|
252
|
+
</li>
|
|
253
|
+
<li class="pf-c-menu__list-item">
|
|
254
|
+
<button class="pf-c-menu__item" type="button">
|
|
255
|
+
<span class="pf-c-menu__item-main">
|
|
256
|
+
<span class="pf-c-menu__item-text">Action 9</span>
|
|
257
|
+
</span>
|
|
258
|
+
</button>
|
|
259
|
+
</li>
|
|
260
|
+
<li class="pf-c-menu__list-item">
|
|
261
|
+
<button class="pf-c-menu__item" type="button">
|
|
262
|
+
<span class="pf-c-menu__item-main">
|
|
263
|
+
<span class="pf-c-menu__item-text">Action 10</span>
|
|
264
|
+
</span>
|
|
265
|
+
</button>
|
|
266
|
+
</li>
|
|
267
|
+
<li class="pf-c-menu__list-item">
|
|
268
|
+
<button class="pf-c-menu__item" type="button">
|
|
269
|
+
<span class="pf-c-menu__item-main">
|
|
270
|
+
<span class="pf-c-menu__item-text">Action 11</span>
|
|
271
|
+
</span>
|
|
272
|
+
</button>
|
|
273
|
+
</li>
|
|
274
|
+
<li class="pf-c-menu__list-item">
|
|
275
|
+
<button class="pf-c-menu__item" type="button">
|
|
276
|
+
<span class="pf-c-menu__item-main">
|
|
277
|
+
<span class="pf-c-menu__item-text">Action 12</span>
|
|
128
278
|
</span>
|
|
129
|
-
<span class="pf-c-menu__item-description">Description</span>
|
|
130
279
|
</button>
|
|
131
280
|
</li>
|
|
132
281
|
</ul>
|
|
@@ -2147,7 +2296,7 @@ cssPrefix: pf-c-menu
|
|
|
2147
2296
|
|
|
2148
2297
|
```html
|
|
2149
2298
|
<div
|
|
2150
|
-
class="pf-c-menu pf-m-drilldown"
|
|
2299
|
+
class="pf-c-menu pf-m-drilldown pf-m-scrollable"
|
|
2151
2300
|
style="--pf-c-menu__content--MaxHeight: 100px;"
|
|
2152
2301
|
>
|
|
2153
2302
|
<div class="pf-c-menu__content">
|
|
@@ -3626,7 +3775,7 @@ cssPrefix: pf-c-menu
|
|
|
3626
3775
|
### Scrollable menu with header and footer
|
|
3627
3776
|
|
|
3628
3777
|
```html
|
|
3629
|
-
<div class="pf-c-menu
|
|
3778
|
+
<div class="pf-c-menu pf-m-scrollable">
|
|
3630
3779
|
<div class="pf-c-menu__header">Header</div>
|
|
3631
3780
|
<hr class="pf-c-divider" />
|
|
3632
3781
|
<div class="pf-c-menu__content">
|
|
@@ -3680,6 +3829,41 @@ cssPrefix: pf-c-menu
|
|
|
3680
3829
|
</span>
|
|
3681
3830
|
</button>
|
|
3682
3831
|
</li>
|
|
3832
|
+
<li class="pf-c-menu__list-item">
|
|
3833
|
+
<button class="pf-c-menu__item" type="button">
|
|
3834
|
+
<span class="pf-c-menu__item-main">
|
|
3835
|
+
<span class="pf-c-menu__item-text">Action 8</span>
|
|
3836
|
+
</span>
|
|
3837
|
+
</button>
|
|
3838
|
+
</li>
|
|
3839
|
+
<li class="pf-c-menu__list-item">
|
|
3840
|
+
<button class="pf-c-menu__item" type="button">
|
|
3841
|
+
<span class="pf-c-menu__item-main">
|
|
3842
|
+
<span class="pf-c-menu__item-text">Action 9</span>
|
|
3843
|
+
</span>
|
|
3844
|
+
</button>
|
|
3845
|
+
</li>
|
|
3846
|
+
<li class="pf-c-menu__list-item">
|
|
3847
|
+
<button class="pf-c-menu__item" type="button">
|
|
3848
|
+
<span class="pf-c-menu__item-main">
|
|
3849
|
+
<span class="pf-c-menu__item-text">Action 10</span>
|
|
3850
|
+
</span>
|
|
3851
|
+
</button>
|
|
3852
|
+
</li>
|
|
3853
|
+
<li class="pf-c-menu__list-item">
|
|
3854
|
+
<button class="pf-c-menu__item" type="button">
|
|
3855
|
+
<span class="pf-c-menu__item-main">
|
|
3856
|
+
<span class="pf-c-menu__item-text">Action 11</span>
|
|
3857
|
+
</span>
|
|
3858
|
+
</button>
|
|
3859
|
+
</li>
|
|
3860
|
+
<li class="pf-c-menu__list-item">
|
|
3861
|
+
<button class="pf-c-menu__item" type="button">
|
|
3862
|
+
<span class="pf-c-menu__item-main">
|
|
3863
|
+
<span class="pf-c-menu__item-text">Action 12</span>
|
|
3864
|
+
</span>
|
|
3865
|
+
</button>
|
|
3866
|
+
</li>
|
|
3683
3867
|
</ul>
|
|
3684
3868
|
</div>
|
|
3685
3869
|
<div class="pf-c-menu__footer">
|
|
@@ -3692,7 +3876,7 @@ cssPrefix: pf-c-menu
|
|
|
3692
3876
|
### Scrollable menu with search and footer
|
|
3693
3877
|
|
|
3694
3878
|
```html
|
|
3695
|
-
<div class="pf-c-menu
|
|
3879
|
+
<div class="pf-c-menu pf-m-scrollable">
|
|
3696
3880
|
<div class="pf-c-menu__search">
|
|
3697
3881
|
<div class="pf-c-menu__search-input">
|
|
3698
3882
|
<input
|
|
@@ -3756,6 +3940,41 @@ cssPrefix: pf-c-menu
|
|
|
3756
3940
|
</span>
|
|
3757
3941
|
</button>
|
|
3758
3942
|
</li>
|
|
3943
|
+
<li class="pf-c-menu__list-item">
|
|
3944
|
+
<button class="pf-c-menu__item" type="button">
|
|
3945
|
+
<span class="pf-c-menu__item-main">
|
|
3946
|
+
<span class="pf-c-menu__item-text">Action 8</span>
|
|
3947
|
+
</span>
|
|
3948
|
+
</button>
|
|
3949
|
+
</li>
|
|
3950
|
+
<li class="pf-c-menu__list-item">
|
|
3951
|
+
<button class="pf-c-menu__item" type="button">
|
|
3952
|
+
<span class="pf-c-menu__item-main">
|
|
3953
|
+
<span class="pf-c-menu__item-text">Action 9</span>
|
|
3954
|
+
</span>
|
|
3955
|
+
</button>
|
|
3956
|
+
</li>
|
|
3957
|
+
<li class="pf-c-menu__list-item">
|
|
3958
|
+
<button class="pf-c-menu__item" type="button">
|
|
3959
|
+
<span class="pf-c-menu__item-main">
|
|
3960
|
+
<span class="pf-c-menu__item-text">Action 10</span>
|
|
3961
|
+
</span>
|
|
3962
|
+
</button>
|
|
3963
|
+
</li>
|
|
3964
|
+
<li class="pf-c-menu__list-item">
|
|
3965
|
+
<button class="pf-c-menu__item" type="button">
|
|
3966
|
+
<span class="pf-c-menu__item-main">
|
|
3967
|
+
<span class="pf-c-menu__item-text">Action 11</span>
|
|
3968
|
+
</span>
|
|
3969
|
+
</button>
|
|
3970
|
+
</li>
|
|
3971
|
+
<li class="pf-c-menu__list-item">
|
|
3972
|
+
<button class="pf-c-menu__item" type="button">
|
|
3973
|
+
<span class="pf-c-menu__item-main">
|
|
3974
|
+
<span class="pf-c-menu__item-text">Action 12</span>
|
|
3975
|
+
</span>
|
|
3976
|
+
</button>
|
|
3977
|
+
</li>
|
|
3759
3978
|
</ul>
|
|
3760
3979
|
</div>
|
|
3761
3980
|
<div class="pf-c-menu__footer">
|
|
@@ -4435,9 +4654,269 @@ cssPrefix: pf-c-menu
|
|
|
4435
4654
|
|
|
4436
4655
|
```
|
|
4437
4656
|
|
|
4438
|
-
|
|
4657
|
+
### Plain
|
|
4658
|
+
|
|
4659
|
+
```html
|
|
4660
|
+
<div class="pf-c-menu pf-m-plain">
|
|
4661
|
+
<div class="pf-c-menu__content">
|
|
4662
|
+
<ul class="pf-c-menu__list">
|
|
4663
|
+
<li class="pf-c-menu__list-item">
|
|
4664
|
+
<button class="pf-c-menu__item" type="button">
|
|
4665
|
+
<span class="pf-c-menu__item-main">
|
|
4666
|
+
<span class="pf-c-menu__item-text">Action</span>
|
|
4667
|
+
</span>
|
|
4668
|
+
</button>
|
|
4669
|
+
</li>
|
|
4670
|
+
<li class="pf-c-menu__list-item">
|
|
4671
|
+
<a class="pf-c-menu__item" href="#">
|
|
4672
|
+
<span class="pf-c-menu__item-main">
|
|
4673
|
+
<span class="pf-c-menu__item-text">Link</span>
|
|
4674
|
+
</span>
|
|
4675
|
+
</a>
|
|
4676
|
+
</li>
|
|
4677
|
+
<li class="pf-c-menu__list-item pf-m-disabled">
|
|
4678
|
+
<button class="pf-c-menu__item" type="button" disabled>
|
|
4679
|
+
<span class="pf-c-menu__item-main">
|
|
4680
|
+
<span class="pf-c-menu__item-text">Disabled action</span>
|
|
4681
|
+
</span>
|
|
4682
|
+
</button>
|
|
4683
|
+
</li>
|
|
4684
|
+
<li class="pf-c-menu__list-item pf-m-disabled">
|
|
4685
|
+
<a class="pf-c-menu__item" href="#" aria-disabled="true" tabindex="-1">
|
|
4686
|
+
<span class="pf-c-menu__item-main">
|
|
4687
|
+
<span class="pf-c-menu__item-text">Disabled link</span>
|
|
4688
|
+
</span>
|
|
4689
|
+
</a>
|
|
4690
|
+
</li>
|
|
4691
|
+
</ul>
|
|
4692
|
+
</div>
|
|
4693
|
+
</div>
|
|
4694
|
+
|
|
4695
|
+
```
|
|
4696
|
+
|
|
4697
|
+
### Plain with search and footer
|
|
4698
|
+
|
|
4699
|
+
```html
|
|
4700
|
+
<div class="pf-c-menu pf-m-plain">
|
|
4701
|
+
<div class="pf-c-menu__search">
|
|
4702
|
+
<div class="pf-c-menu__search-input">
|
|
4703
|
+
<input
|
|
4704
|
+
class="pf-c-form-control pf-m-search"
|
|
4705
|
+
type="search"
|
|
4706
|
+
id="-search-input"
|
|
4707
|
+
name="-search-input"
|
|
4708
|
+
aria-label="Search"
|
|
4709
|
+
/>
|
|
4710
|
+
</div>
|
|
4711
|
+
</div>
|
|
4712
|
+
<hr class="pf-c-divider" />
|
|
4713
|
+
<div class="pf-c-menu__content">
|
|
4714
|
+
<ul class="pf-c-menu__list">
|
|
4715
|
+
<li class="pf-c-menu__list-item">
|
|
4716
|
+
<button class="pf-c-menu__item" type="button">
|
|
4717
|
+
<span class="pf-c-menu__item-main">
|
|
4718
|
+
<span class="pf-c-menu__item-text">Action 1</span>
|
|
4719
|
+
</span>
|
|
4720
|
+
</button>
|
|
4721
|
+
</li>
|
|
4722
|
+
<li class="pf-c-menu__list-item">
|
|
4723
|
+
<button class="pf-c-menu__item" type="button">
|
|
4724
|
+
<span class="pf-c-menu__item-main">
|
|
4725
|
+
<span class="pf-c-menu__item-text">Action 2</span>
|
|
4726
|
+
</span>
|
|
4727
|
+
</button>
|
|
4728
|
+
</li>
|
|
4729
|
+
<li class="pf-c-menu__list-item">
|
|
4730
|
+
<button class="pf-c-menu__item" type="button">
|
|
4731
|
+
<span class="pf-c-menu__item-main">
|
|
4732
|
+
<span class="pf-c-menu__item-text">Action 3</span>
|
|
4733
|
+
</span>
|
|
4734
|
+
</button>
|
|
4735
|
+
</li>
|
|
4736
|
+
<li class="pf-c-menu__list-item">
|
|
4737
|
+
<button class="pf-c-menu__item" type="button">
|
|
4738
|
+
<span class="pf-c-menu__item-main">
|
|
4739
|
+
<span class="pf-c-menu__item-text">Action 4</span>
|
|
4740
|
+
</span>
|
|
4741
|
+
</button>
|
|
4742
|
+
</li>
|
|
4743
|
+
<li class="pf-c-menu__list-item">
|
|
4744
|
+
<button class="pf-c-menu__item" type="button">
|
|
4745
|
+
<span class="pf-c-menu__item-main">
|
|
4746
|
+
<span class="pf-c-menu__item-text">Action 5</span>
|
|
4747
|
+
</span>
|
|
4748
|
+
</button>
|
|
4749
|
+
</li>
|
|
4750
|
+
<li class="pf-c-menu__list-item">
|
|
4751
|
+
<button class="pf-c-menu__item" type="button">
|
|
4752
|
+
<span class="pf-c-menu__item-main">
|
|
4753
|
+
<span class="pf-c-menu__item-text">Action 6</span>
|
|
4754
|
+
</span>
|
|
4755
|
+
</button>
|
|
4756
|
+
</li>
|
|
4757
|
+
<li class="pf-c-menu__list-item">
|
|
4758
|
+
<button class="pf-c-menu__item" type="button">
|
|
4759
|
+
<span class="pf-c-menu__item-main">
|
|
4760
|
+
<span class="pf-c-menu__item-text">Action 7</span>
|
|
4761
|
+
</span>
|
|
4762
|
+
</button>
|
|
4763
|
+
</li>
|
|
4764
|
+
<li class="pf-c-menu__list-item">
|
|
4765
|
+
<button class="pf-c-menu__item" type="button">
|
|
4766
|
+
<span class="pf-c-menu__item-main">
|
|
4767
|
+
<span class="pf-c-menu__item-text">Action 8</span>
|
|
4768
|
+
</span>
|
|
4769
|
+
</button>
|
|
4770
|
+
</li>
|
|
4771
|
+
<li class="pf-c-menu__list-item">
|
|
4772
|
+
<button class="pf-c-menu__item" type="button">
|
|
4773
|
+
<span class="pf-c-menu__item-main">
|
|
4774
|
+
<span class="pf-c-menu__item-text">Action 9</span>
|
|
4775
|
+
</span>
|
|
4776
|
+
</button>
|
|
4777
|
+
</li>
|
|
4778
|
+
<li class="pf-c-menu__list-item">
|
|
4779
|
+
<button class="pf-c-menu__item" type="button">
|
|
4780
|
+
<span class="pf-c-menu__item-main">
|
|
4781
|
+
<span class="pf-c-menu__item-text">Action 10</span>
|
|
4782
|
+
</span>
|
|
4783
|
+
</button>
|
|
4784
|
+
</li>
|
|
4785
|
+
<li class="pf-c-menu__list-item">
|
|
4786
|
+
<button class="pf-c-menu__item" type="button">
|
|
4787
|
+
<span class="pf-c-menu__item-main">
|
|
4788
|
+
<span class="pf-c-menu__item-text">Action 11</span>
|
|
4789
|
+
</span>
|
|
4790
|
+
</button>
|
|
4791
|
+
</li>
|
|
4792
|
+
<li class="pf-c-menu__list-item">
|
|
4793
|
+
<button class="pf-c-menu__item" type="button">
|
|
4794
|
+
<span class="pf-c-menu__item-main">
|
|
4795
|
+
<span class="pf-c-menu__item-text">Action 12</span>
|
|
4796
|
+
</span>
|
|
4797
|
+
</button>
|
|
4798
|
+
</li>
|
|
4799
|
+
</ul>
|
|
4800
|
+
</div>
|
|
4801
|
+
<div class="pf-c-menu__footer">
|
|
4802
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">Footer</button>
|
|
4803
|
+
</div>
|
|
4804
|
+
</div>
|
|
4805
|
+
|
|
4806
|
+
```
|
|
4807
|
+
|
|
4808
|
+
### Plain scrollable with search and footer
|
|
4809
|
+
|
|
4810
|
+
```html
|
|
4811
|
+
<div class="pf-c-menu pf-m-plain pf-m-scrollable">
|
|
4812
|
+
<div class="pf-c-menu__search">
|
|
4813
|
+
<div class="pf-c-menu__search-input">
|
|
4814
|
+
<input
|
|
4815
|
+
class="pf-c-form-control pf-m-search"
|
|
4816
|
+
type="search"
|
|
4817
|
+
id="-search-input"
|
|
4818
|
+
name="-search-input"
|
|
4819
|
+
aria-label="Search"
|
|
4820
|
+
/>
|
|
4821
|
+
</div>
|
|
4822
|
+
</div>
|
|
4823
|
+
<hr class="pf-c-divider" />
|
|
4824
|
+
<div class="pf-c-menu__content">
|
|
4825
|
+
<ul class="pf-c-menu__list">
|
|
4826
|
+
<li class="pf-c-menu__list-item">
|
|
4827
|
+
<button class="pf-c-menu__item" type="button">
|
|
4828
|
+
<span class="pf-c-menu__item-main">
|
|
4829
|
+
<span class="pf-c-menu__item-text">Action 1</span>
|
|
4830
|
+
</span>
|
|
4831
|
+
</button>
|
|
4832
|
+
</li>
|
|
4833
|
+
<li class="pf-c-menu__list-item">
|
|
4834
|
+
<button class="pf-c-menu__item" type="button">
|
|
4835
|
+
<span class="pf-c-menu__item-main">
|
|
4836
|
+
<span class="pf-c-menu__item-text">Action 2</span>
|
|
4837
|
+
</span>
|
|
4838
|
+
</button>
|
|
4839
|
+
</li>
|
|
4840
|
+
<li class="pf-c-menu__list-item">
|
|
4841
|
+
<button class="pf-c-menu__item" type="button">
|
|
4842
|
+
<span class="pf-c-menu__item-main">
|
|
4843
|
+
<span class="pf-c-menu__item-text">Action 3</span>
|
|
4844
|
+
</span>
|
|
4845
|
+
</button>
|
|
4846
|
+
</li>
|
|
4847
|
+
<li class="pf-c-menu__list-item">
|
|
4848
|
+
<button class="pf-c-menu__item" type="button">
|
|
4849
|
+
<span class="pf-c-menu__item-main">
|
|
4850
|
+
<span class="pf-c-menu__item-text">Action 4</span>
|
|
4851
|
+
</span>
|
|
4852
|
+
</button>
|
|
4853
|
+
</li>
|
|
4854
|
+
<li class="pf-c-menu__list-item">
|
|
4855
|
+
<button class="pf-c-menu__item" type="button">
|
|
4856
|
+
<span class="pf-c-menu__item-main">
|
|
4857
|
+
<span class="pf-c-menu__item-text">Action 5</span>
|
|
4858
|
+
</span>
|
|
4859
|
+
</button>
|
|
4860
|
+
</li>
|
|
4861
|
+
<li class="pf-c-menu__list-item">
|
|
4862
|
+
<button class="pf-c-menu__item" type="button">
|
|
4863
|
+
<span class="pf-c-menu__item-main">
|
|
4864
|
+
<span class="pf-c-menu__item-text">Action 6</span>
|
|
4865
|
+
</span>
|
|
4866
|
+
</button>
|
|
4867
|
+
</li>
|
|
4868
|
+
<li class="pf-c-menu__list-item">
|
|
4869
|
+
<button class="pf-c-menu__item" type="button">
|
|
4870
|
+
<span class="pf-c-menu__item-main">
|
|
4871
|
+
<span class="pf-c-menu__item-text">Action 7</span>
|
|
4872
|
+
</span>
|
|
4873
|
+
</button>
|
|
4874
|
+
</li>
|
|
4875
|
+
<li class="pf-c-menu__list-item">
|
|
4876
|
+
<button class="pf-c-menu__item" type="button">
|
|
4877
|
+
<span class="pf-c-menu__item-main">
|
|
4878
|
+
<span class="pf-c-menu__item-text">Action 8</span>
|
|
4879
|
+
</span>
|
|
4880
|
+
</button>
|
|
4881
|
+
</li>
|
|
4882
|
+
<li class="pf-c-menu__list-item">
|
|
4883
|
+
<button class="pf-c-menu__item" type="button">
|
|
4884
|
+
<span class="pf-c-menu__item-main">
|
|
4885
|
+
<span class="pf-c-menu__item-text">Action 9</span>
|
|
4886
|
+
</span>
|
|
4887
|
+
</button>
|
|
4888
|
+
</li>
|
|
4889
|
+
<li class="pf-c-menu__list-item">
|
|
4890
|
+
<button class="pf-c-menu__item" type="button">
|
|
4891
|
+
<span class="pf-c-menu__item-main">
|
|
4892
|
+
<span class="pf-c-menu__item-text">Action 10</span>
|
|
4893
|
+
</span>
|
|
4894
|
+
</button>
|
|
4895
|
+
</li>
|
|
4896
|
+
<li class="pf-c-menu__list-item">
|
|
4897
|
+
<button class="pf-c-menu__item" type="button">
|
|
4898
|
+
<span class="pf-c-menu__item-main">
|
|
4899
|
+
<span class="pf-c-menu__item-text">Action 11</span>
|
|
4900
|
+
</span>
|
|
4901
|
+
</button>
|
|
4902
|
+
</li>
|
|
4903
|
+
<li class="pf-c-menu__list-item">
|
|
4904
|
+
<button class="pf-c-menu__item" type="button">
|
|
4905
|
+
<span class="pf-c-menu__item-main">
|
|
4906
|
+
<span class="pf-c-menu__item-text">Action 12</span>
|
|
4907
|
+
</span>
|
|
4908
|
+
</button>
|
|
4909
|
+
</li>
|
|
4910
|
+
</ul>
|
|
4911
|
+
</div>
|
|
4912
|
+
<div class="pf-c-menu__footer">
|
|
4913
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">Footer</button>
|
|
4914
|
+
</div>
|
|
4915
|
+
</div>
|
|
4439
4916
|
|
|
4440
|
-
|
|
4917
|
+
```
|
|
4918
|
+
|
|
4919
|
+
## Documentation
|
|
4441
4920
|
|
|
4442
4921
|
### Accessibility
|
|
4443
4922
|
|
|
@@ -4452,45 +4931,47 @@ cssPrefix: pf-c-menu
|
|
|
4452
4931
|
|
|
4453
4932
|
### Usage
|
|
4454
4933
|
|
|
4455
|
-
| Class | Applied to | Outcome
|
|
4456
|
-
| --------------------------------------------------- | ----------------------------------------------------------------- |
|
|
4457
|
-
| `.pf-c-menu` | `<div>` | Initiates the menu. **Required**
|
|
4458
|
-
| `.pf-c-menu__header` | `<div>` | Initiates the menu header container.
|
|
4459
|
-
| `.pf-c-menu__search` | `<div>` | Initiates the menu search container. Use for filtering.
|
|
4460
|
-
| `.pf-c-menu__search-input` | `<div>` | Initiates the menu search input container.
|
|
4461
|
-
| `.pf-c-menu__content` | `<div>` | Initiates the menu content. Use for lists. **Required**
|
|
4462
|
-
| `.pf-c-menu__list` | `<ul>` | Initiates the menu list. **Required**
|
|
4463
|
-
| `.pf-c-menu__list-item` | `<li>` | Initiates the menu list item. **Required**
|
|
4464
|
-
| `.pf-c-menu__item` | `<button>`, `<a>`, `<div>` | Initiates the menu item. **Required**
|
|
4465
|
-
| `.pf-c-menu__item-main` | `<span>` | Initiates the menu item main container. **Required**
|
|
4466
|
-
| `.pf-c-menu__item-text` | `<span>` | Initiates the menu item text. **Required**
|
|
4467
|
-
| `.pf-c-menu__item-description` | `<span>` | Initiates the menu item description.
|
|
4468
|
-
| `.pf-c-menu__item-group` | `<section>` | Initiates the menu item group.
|
|
4469
|
-
| `.pf-c-menu__item-group-title` | `<h1>` | Initiates the menu item group title.
|
|
4470
|
-
| `.pf-c-menu__item-icon` | `<span>` | Initiates the menu item icon.
|
|
4471
|
-
| `.pf-c-menu__item-toggle-icon` | `<span>` | Initiates the menu item toggle icon.
|
|
4472
|
-
| `.pf-c-menu__item-select-icon` | `<span>` | Initiates the menu item select icon.
|
|
4473
|
-
| `.pf-c-menu__item-action` | `<button>` | Initiates the menu item action.
|
|
4474
|
-
| `.pf-c-menu__item-action-icon` | `<span>` | Initiates the menu item action icon.
|
|
4475
|
-
| `.pf-c-menu__item-external-icon` | `<span>` | Initiates the menu item external icon.
|
|
4476
|
-
| `.pf-c-menu__footer` | `<div>` | Initiates the menu footer.
|
|
4477
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be hidden, at optional breakpoint.
|
|
4478
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be shown, at optional breakpoint.
|
|
4479
|
-
| `.pf-m-favorite` | `.pf-c-menu__item-action` | Modifies the menu item action to handle the favorite icon.
|
|
4480
|
-
| `.pf-m-favorited` | `.pf-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited.
|
|
4481
|
-
| `.pf-m-selected` | `.pf-c-menu__item` | Modifies the menu item to be selected.
|
|
4482
|
-
| `.pf-m-flyout` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "flyout".
|
|
4483
|
-
| `.pf-m-top` | `.pf-c-menu` | Modifies a flyout menu to expand to the top.
|
|
4484
|
-
| `.pf-m-left` | `.pf-c-menu` | Modifies a flyout menu to expand to the left.
|
|
4485
|
-
| `.pf-m-
|
|
4486
|
-
| `.pf-m-
|
|
4487
|
-
| `.pf-m-
|
|
4488
|
-
| `.pf-m-
|
|
4489
|
-
| `.pf-m-
|
|
4490
|
-
| `.pf-m-
|
|
4491
|
-
|
|
|
4492
|
-
|
|
|
4493
|
-
| `--pf-c-
|
|
4494
|
-
| `--pf-c-
|
|
4495
|
-
| `--pf-c-
|
|
4496
|
-
| `--pf-c-menu--m-flyout__menu--
|
|
4934
|
+
| Class | Applied to | Outcome |
|
|
4935
|
+
| --------------------------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4936
|
+
| `.pf-c-menu` | `<div>` | Initiates the menu. **Required** |
|
|
4937
|
+
| `.pf-c-menu__header` | `<div>` | Initiates the menu header container. |
|
|
4938
|
+
| `.pf-c-menu__search` | `<div>` | Initiates the menu search container. Use for filtering. |
|
|
4939
|
+
| `.pf-c-menu__search-input` | `<div>` | Initiates the menu search input container. |
|
|
4940
|
+
| `.pf-c-menu__content` | `<div>` | Initiates the menu content. Use for lists. **Required** |
|
|
4941
|
+
| `.pf-c-menu__list` | `<ul>` | Initiates the menu list. **Required** |
|
|
4942
|
+
| `.pf-c-menu__list-item` | `<li>` | Initiates the menu list item. **Required** |
|
|
4943
|
+
| `.pf-c-menu__item` | `<button>`, `<a>`, `<div>` | Initiates the menu item. **Required** |
|
|
4944
|
+
| `.pf-c-menu__item-main` | `<span>` | Initiates the menu item main container. **Required** |
|
|
4945
|
+
| `.pf-c-menu__item-text` | `<span>` | Initiates the menu item text. **Required** |
|
|
4946
|
+
| `.pf-c-menu__item-description` | `<span>` | Initiates the menu item description. |
|
|
4947
|
+
| `.pf-c-menu__item-group` | `<section>` | Initiates the menu item group. |
|
|
4948
|
+
| `.pf-c-menu__item-group-title` | `<h1>` | Initiates the menu item group title. |
|
|
4949
|
+
| `.pf-c-menu__item-icon` | `<span>` | Initiates the menu item icon. |
|
|
4950
|
+
| `.pf-c-menu__item-toggle-icon` | `<span>` | Initiates the menu item toggle icon. |
|
|
4951
|
+
| `.pf-c-menu__item-select-icon` | `<span>` | Initiates the menu item select icon. |
|
|
4952
|
+
| `.pf-c-menu__item-action` | `<button>` | Initiates the menu item action. |
|
|
4953
|
+
| `.pf-c-menu__item-action-icon` | `<span>` | Initiates the menu item action icon. |
|
|
4954
|
+
| `.pf-c-menu__item-external-icon` | `<span>` | Initiates the menu item external icon. |
|
|
4955
|
+
| `.pf-c-menu__footer` | `<div>` | Initiates the menu footer. |
|
|
4956
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be hidden, at optional breakpoint. |
|
|
4957
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be shown, at optional breakpoint. |
|
|
4958
|
+
| `.pf-m-favorite` | `.pf-c-menu__item-action` | Modifies the menu item action to handle the favorite icon. |
|
|
4959
|
+
| `.pf-m-favorited` | `.pf-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited. |
|
|
4960
|
+
| `.pf-m-selected` | `.pf-c-menu__item` | Modifies the menu item to be selected. |
|
|
4961
|
+
| `.pf-m-flyout` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "flyout". |
|
|
4962
|
+
| `.pf-m-top` | `.pf-c-menu` | Modifies a flyout menu to expand to the top. |
|
|
4963
|
+
| `.pf-m-left` | `.pf-c-menu` | Modifies a flyout menu to expand to the left. |
|
|
4964
|
+
| `.pf-m-plain` | `.pf-c-menu` | Modifies the menu component for use in the page instead of as a dropdown. |
|
|
4965
|
+
| `.pf-m-scrollable` | `.pf-c-menu` | Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting `--pf-c-menu__content--MaxHeight`. |
|
|
4966
|
+
| `.pf-m-load` | `.pf-c-menu__list-item` | Modifies a list item for "load more" styles. |
|
|
4967
|
+
| `.pf-m-loading` | `.pf-c-menu__list-item` | Modifies a list item for loading styles. |
|
|
4968
|
+
| `.pf-m-drilldown` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "drill down". |
|
|
4969
|
+
| `.pf-m-current-path` | `.pf-c-menu.pf-m-drilldown .pf-c-menu__list-item` | Modifies the menu list item for current path state. |
|
|
4970
|
+
| `.pf-m-drilled-in` | `.pf-c-menu.pf-m-drilldown, .pf-c-menu.pf-m-drilldown .pf-c-menu` | Modifies the menu list for drilled in state. |
|
|
4971
|
+
| `.pf-m-static` | `.pf-c-menu.pf-m-drilldown .pf-c-menu` | Modifies the menu list for drilled static state. |
|
|
4972
|
+
| `--pf-c-menu--Width: {width}` | `.pf-c-menu` | Modifies the width of the menu. The default value is `auto`. |
|
|
4973
|
+
| `--pf-c-menu__content--MaxHeight: {height}` | `.pf-c-menu__content` | Modifies the height of the menu content. Update this value when header and/or footer elements are intended to be fixed. |
|
|
4974
|
+
| `--pf-c-menu__content--Height: {height}` | `.pf-c-menu` | Modifies the height of the drilldown menu content. The default value is `auto`. |
|
|
4975
|
+
| `--pf-c-menu--m-flyout__menu--top-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the top positioning. |
|
|
4976
|
+
| `--pf-c-menu--m-flyout__menu--left-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the left positioning. |
|
|
4977
|
+
| `--pf-c-menu--m-flyout__menu--m-left--right-offset` | `.pf-c-menu.pf-m-flyout > .pf-c-menu` | Modifies the menu to allow for an offset to the right positioning. |
|