@patternfly/patternfly 6.0.0-alpha.49 → 6.0.0-alpha.50
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/Button/button.css +12 -2
- package/components/Button/button.scss +16 -6
- package/components/Nav/nav.css +240 -918
- package/components/Nav/nav.scss +300 -1082
- package/components/Page/page.scss +1 -1
- package/docs/components/Nav/examples/Navigation.css +1 -39
- package/docs/components/Nav/examples/Navigation.md +68 -242
- package/docs/demos/CardView/examples/CardView.md +4 -8
- package/docs/demos/Masthead/examples/Masthead.md +24 -15
- package/docs/demos/Nav/examples/Nav.md +79 -874
- package/docs/demos/Page/examples/Page.md +24 -12
- package/docs/demos/Page/examples/Penta.md +1 -0
- package/package.json +1 -1
- package/patternfly-no-globals.css +247 -919
- package/patternfly-theme-dark-unversioned.css +247 -919
- package/patternfly.css +247 -919
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -486,7 +486,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
486
486
|
|
|
487
487
|
&.pf-m-sticky-bottom#{$breakpoint-name} {
|
|
488
488
|
position: sticky;
|
|
489
|
-
|
|
489
|
+
inset-block-end: 0;
|
|
490
490
|
z-index: var(--#{$page}--section--m-sticky-bottom--ZIndex);
|
|
491
491
|
box-shadow: var(--#{$page}--section--m-sticky-bottom--BoxShadow);
|
|
492
492
|
}
|
|
@@ -1,41 +1,3 @@
|
|
|
1
|
-
#ws-core-c-navigation-default,
|
|
2
|
-
#ws-core-c-navigation-basic,
|
|
3
|
-
#ws-core-c-navigation-grouped,
|
|
4
|
-
#ws-core-c-navigation-grouped-nav,
|
|
5
|
-
#ws-core-c-navigation-grouped-nav-no-titles,
|
|
6
|
-
#ws-core-c-navigation-expanded,
|
|
7
|
-
#ws-core-c-navigation-expanded-with-subnav-titles,
|
|
8
|
-
#ws-core-c-navigation-mixed,
|
|
9
|
-
#ws-core-c-navigation-horizontal,
|
|
10
|
-
#ws-core-c-navigation-horizontal-overflow,
|
|
11
|
-
#ws-core-c-navigation-horizontal-subnav,
|
|
12
|
-
#ws-core-c-navigation-horizontal-subnav-overflow,
|
|
13
|
-
#ws-core-c-navigation-drilldown,
|
|
14
|
-
#ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
|
|
15
|
-
#ws-core-c-navigation-level-2-drilldown,
|
|
16
|
-
#ws-core-c-navigation-level-3-drilldown,
|
|
17
|
-
#ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
|
|
18
|
-
#ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
|
|
19
|
-
padding: 0;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
#ws-core-c-navigation-horizontal-in-masthead,
|
|
23
|
-
#ws-core-c-navigation-horizontal-in-masthead-overflow {
|
|
24
|
-
grid-template-rows: auto;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
#ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header,
|
|
28
|
-
#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header {
|
|
29
|
-
min-height: 0;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
@media screen and (min-width: 1200px) {
|
|
33
|
-
#ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header,
|
|
34
|
-
#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header {
|
|
35
|
-
min-height: var(--pf-v5-c-page__header--MinHeight);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
1
|
#ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header-nav,
|
|
40
2
|
#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header-nav {
|
|
41
3
|
grid-row: 1;
|
|
@@ -43,7 +5,7 @@
|
|
|
43
5
|
|
|
44
6
|
#ws-core-c-navigation-nav-with-flyout .ws-preview-html,
|
|
45
7
|
[id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html {
|
|
46
|
-
width:
|
|
8
|
+
width: 280px;
|
|
47
9
|
}
|
|
48
10
|
|
|
49
11
|
#ws-core-c-navigation-nav-with-flyout .ws-preview-html {
|
|
@@ -50,6 +50,7 @@ cssPrefix: pf-v5-c-nav
|
|
|
50
50
|
</li>
|
|
51
51
|
</ul>
|
|
52
52
|
</section>
|
|
53
|
+
|
|
53
54
|
<section class="pf-v5-c-nav__section" aria-labelledby="grouped-title2">
|
|
54
55
|
<h2 class="pf-v5-c-nav__section-title" id="grouped-title2">Section title 2</h2>
|
|
55
56
|
<ul class="pf-v5-c-nav__list" role="list">
|
|
@@ -90,6 +91,7 @@ cssPrefix: pf-v5-c-nav
|
|
|
90
91
|
</ul>
|
|
91
92
|
</section>
|
|
92
93
|
<hr class="pf-v5-c-divider" />
|
|
94
|
+
|
|
93
95
|
<section class="pf-v5-c-nav__section" aria-label="Section two">
|
|
94
96
|
<ul class="pf-v5-c-nav__list" role="list">
|
|
95
97
|
<li class="pf-v5-c-nav__item">
|
|
@@ -116,11 +118,11 @@ cssPrefix: pf-v5-c-nav
|
|
|
116
118
|
```html
|
|
117
119
|
<nav class="pf-v5-c-nav" aria-label="Global">
|
|
118
120
|
<ul class="pf-v5-c-nav__list" role="list">
|
|
119
|
-
<li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded
|
|
121
|
+
<li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
|
|
120
122
|
<button
|
|
121
123
|
class="pf-v5-c-nav__link"
|
|
122
|
-
id="expandable-example1"
|
|
123
124
|
aria-expanded="true"
|
|
125
|
+
id="expandable-example1"
|
|
124
126
|
>
|
|
125
127
|
Link 1 (current and expanded example)
|
|
126
128
|
<span class="pf-v5-c-nav__toggle">
|
|
@@ -137,7 +139,6 @@ cssPrefix: pf-v5-c-nav
|
|
|
137
139
|
<li class="pf-v5-c-nav__item">
|
|
138
140
|
<a href="#" class="pf-v5-c-nav__link">Current link</a>
|
|
139
141
|
</li>
|
|
140
|
-
<li class="pf-v5-c-divider" role="separator"></li>
|
|
141
142
|
<li class="pf-v5-c-nav__item">
|
|
142
143
|
<a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
|
|
143
144
|
</li>
|
|
@@ -154,8 +155,8 @@ cssPrefix: pf-v5-c-nav
|
|
|
154
155
|
<li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
|
|
155
156
|
<button
|
|
156
157
|
class="pf-v5-c-nav__link"
|
|
157
|
-
id="expandable-example2"
|
|
158
158
|
aria-expanded="true"
|
|
159
|
+
id="expandable-example2"
|
|
159
160
|
>
|
|
160
161
|
Link 2 (expanded, but not current example)
|
|
161
162
|
<span
|
|
@@ -183,8 +184,8 @@ cssPrefix: pf-v5-c-nav
|
|
|
183
184
|
<li class="pf-v5-c-nav__item pf-m-expandable">
|
|
184
185
|
<button
|
|
185
186
|
class="pf-v5-c-nav__link"
|
|
186
|
-
id="expandable-example3"
|
|
187
187
|
aria-expanded="false"
|
|
188
|
+
id="expandable-example3"
|
|
188
189
|
>
|
|
189
190
|
Link 3
|
|
190
191
|
<span class="pf-v5-c-nav__toggle">
|
|
@@ -218,7 +219,7 @@ cssPrefix: pf-v5-c-nav
|
|
|
218
219
|
```html
|
|
219
220
|
<nav class="pf-v5-c-nav" aria-label="Global">
|
|
220
221
|
<ul class="pf-v5-c-nav__list" role="list">
|
|
221
|
-
<li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded
|
|
222
|
+
<li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
|
|
222
223
|
<button class="pf-v5-c-nav__link" aria-expanded="true">
|
|
223
224
|
Link 1
|
|
224
225
|
<span class="pf-v5-c-nav__toggle">
|
|
@@ -228,10 +229,6 @@ cssPrefix: pf-v5-c-nav
|
|
|
228
229
|
</span>
|
|
229
230
|
</button>
|
|
230
231
|
<section class="pf-v5-c-nav__subnav" aria-labelledby="subnav-title1">
|
|
231
|
-
<h2
|
|
232
|
-
class="pf-v5-c-nav__subnav-title pf-v5-screen-reader"
|
|
233
|
-
id="subnav-title1"
|
|
234
|
-
>Current and expanded example sub-navigation</h2>
|
|
235
232
|
<ul class="pf-v5-c-nav__list" role="list">
|
|
236
233
|
<li class="pf-v5-c-nav__item">
|
|
237
234
|
<a href="#" class="pf-v5-c-nav__link">Current link</a>
|
|
@@ -259,10 +256,6 @@ cssPrefix: pf-v5-c-nav
|
|
|
259
256
|
</span>
|
|
260
257
|
</button>
|
|
261
258
|
<section class="pf-v5-c-nav__subnav" aria-labelledby="subnav-title2">
|
|
262
|
-
<h2
|
|
263
|
-
class="pf-v5-c-nav__subnav-title pf-v5-screen-reader"
|
|
264
|
-
id="subnav-title2"
|
|
265
|
-
>Expanded, but not current example sub-navigation</h2>
|
|
266
259
|
<ul class="pf-v5-c-nav__list" role="list">
|
|
267
260
|
<li class="pf-v5-c-nav__item">
|
|
268
261
|
<a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
|
|
@@ -289,8 +282,8 @@ cssPrefix: pf-v5-c-nav
|
|
|
289
282
|
<li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
|
|
290
283
|
<button
|
|
291
284
|
class="pf-v5-c-nav__link"
|
|
292
|
-
id="nav-mixed-link2"
|
|
293
285
|
aria-expanded="true"
|
|
286
|
+
id="nav-mixed-link2"
|
|
294
287
|
>
|
|
295
288
|
Link 2 (expanded, but not current example)
|
|
296
289
|
<span
|
|
@@ -312,11 +305,11 @@ cssPrefix: pf-v5-c-nav
|
|
|
312
305
|
</ul>
|
|
313
306
|
</section>
|
|
314
307
|
</li>
|
|
315
|
-
<li class="pf-v5-c-nav__item pf-m-expandable
|
|
308
|
+
<li class="pf-v5-c-nav__item pf-m-expandable">
|
|
316
309
|
<button
|
|
317
310
|
class="pf-v5-c-nav__link"
|
|
318
|
-
id="nav-mixed-link4"
|
|
319
311
|
aria-expanded="false"
|
|
312
|
+
id="nav-mixed-link4"
|
|
320
313
|
>
|
|
321
314
|
Link 3 (current, but not expanded example)
|
|
322
315
|
<span
|
|
@@ -362,7 +355,7 @@ cssPrefix: pf-v5-c-nav
|
|
|
362
355
|
<li class="pf-v5-c-nav__item">
|
|
363
356
|
<a href="#" class="pf-v5-c-nav__link">Clusters</a>
|
|
364
357
|
</li>
|
|
365
|
-
<li class="pf-v5-c-nav__item
|
|
358
|
+
<li class="pf-v5-c-nav__item">
|
|
366
359
|
<a href="#" class="pf-v5-c-nav__link">Overview</a>
|
|
367
360
|
</li>
|
|
368
361
|
<li class="pf-v5-c-nav__item">
|
|
@@ -371,8 +364,8 @@ cssPrefix: pf-v5-c-nav
|
|
|
371
364
|
<li class="pf-v5-c-nav__item pf-m-expandable">
|
|
372
365
|
<button
|
|
373
366
|
class="pf-v5-c-nav__link"
|
|
374
|
-
id="expandable-third-level-example-example-1"
|
|
375
367
|
aria-expanded="false"
|
|
368
|
+
id="expandable-third-level-example-example-1"
|
|
376
369
|
>
|
|
377
370
|
Subscriptions
|
|
378
371
|
<span class="pf-v5-c-nav__toggle">
|
|
@@ -399,8 +392,8 @@ cssPrefix: pf-v5-c-nav
|
|
|
399
392
|
<li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
|
|
400
393
|
<button
|
|
401
394
|
class="pf-v5-c-nav__link"
|
|
402
|
-
id="expandable-third-level-example-example-2"
|
|
403
395
|
aria-expanded="true"
|
|
396
|
+
id="expandable-third-level-example-example-2"
|
|
404
397
|
>
|
|
405
398
|
Cost management
|
|
406
399
|
<span class="pf-v5-c-nav__toggle">
|
|
@@ -423,8 +416,8 @@ cssPrefix: pf-v5-c-nav
|
|
|
423
416
|
<li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
|
|
424
417
|
<button
|
|
425
418
|
class="pf-v5-c-nav__link"
|
|
426
|
-
id="expandable-third-level-example-sub-example-1"
|
|
427
419
|
aria-expanded="true"
|
|
420
|
+
id="-sub-example-1"
|
|
428
421
|
>
|
|
429
422
|
Public clouds
|
|
430
423
|
<span class="pf-v5-c-nav__toggle">
|
|
@@ -435,7 +428,7 @@ cssPrefix: pf-v5-c-nav
|
|
|
435
428
|
</button>
|
|
436
429
|
<section
|
|
437
430
|
class="pf-v5-c-nav__subnav"
|
|
438
|
-
aria-labelledby="
|
|
431
|
+
aria-labelledby="-sub-example-1"
|
|
439
432
|
>
|
|
440
433
|
<ul class="pf-v5-c-nav__list" role="list">
|
|
441
434
|
<li class="pf-v5-c-nav__item">
|
|
@@ -471,9 +464,6 @@ cssPrefix: pf-v5-c-nav
|
|
|
471
464
|
|
|
472
465
|
```html
|
|
473
466
|
<nav class="pf-v5-c-nav pf-m-horizontal" aria-label="Global">
|
|
474
|
-
<button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
|
|
475
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
476
|
-
</button>
|
|
477
467
|
<ul class="pf-v5-c-nav__list" role="list">
|
|
478
468
|
<li class="pf-v5-c-nav__item">
|
|
479
469
|
<a
|
|
@@ -489,9 +479,6 @@ cssPrefix: pf-v5-c-nav
|
|
|
489
479
|
<a href="#" class="pf-v5-c-nav__link">Item 3</a>
|
|
490
480
|
</li>
|
|
491
481
|
</ul>
|
|
492
|
-
<button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll right">
|
|
493
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
494
|
-
</button>
|
|
495
482
|
</nav>
|
|
496
483
|
|
|
497
484
|
```
|
|
@@ -499,10 +486,18 @@ cssPrefix: pf-v5-c-nav
|
|
|
499
486
|
### Horizontal overflow
|
|
500
487
|
|
|
501
488
|
```html
|
|
502
|
-
<nav class="pf-v5-c-nav pf-m-
|
|
503
|
-
<
|
|
504
|
-
<
|
|
505
|
-
|
|
489
|
+
<nav class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal" aria-label="Global">
|
|
490
|
+
<div class="pf-v5-c-nav__scroll-button">
|
|
491
|
+
<button
|
|
492
|
+
class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
|
|
493
|
+
type="button"
|
|
494
|
+
aria-label="Scroll start"
|
|
495
|
+
>
|
|
496
|
+
<span class="pf-v5-c-button__icon">
|
|
497
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
498
|
+
</span>
|
|
499
|
+
</button>
|
|
500
|
+
</div>
|
|
506
501
|
<ul class="pf-v5-c-nav__list" role="list">
|
|
507
502
|
<li class="pf-v5-c-nav__item">
|
|
508
503
|
<a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
|
|
@@ -524,9 +519,17 @@ cssPrefix: pf-v5-c-nav
|
|
|
524
519
|
>Horizontal nav item 5</a>
|
|
525
520
|
</li>
|
|
526
521
|
</ul>
|
|
527
|
-
<
|
|
528
|
-
<
|
|
529
|
-
|
|
522
|
+
<div class="pf-v5-c-nav__scroll-button">
|
|
523
|
+
<button
|
|
524
|
+
class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
|
|
525
|
+
type="button"
|
|
526
|
+
aria-label="Scroll end"
|
|
527
|
+
>
|
|
528
|
+
<span class="pf-v5-c-button__icon">
|
|
529
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
530
|
+
</span>
|
|
531
|
+
</button>
|
|
532
|
+
</div>
|
|
530
533
|
</nav>
|
|
531
534
|
|
|
532
535
|
```
|
|
@@ -534,7 +537,7 @@ cssPrefix: pf-v5-c-nav
|
|
|
534
537
|
### Horizontal subnav
|
|
535
538
|
|
|
536
539
|
```html
|
|
537
|
-
<nav class="pf-v5-c-nav pf-m-horizontal-subnav" aria-label="Local">
|
|
540
|
+
<nav class="pf-v5-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
|
|
538
541
|
<ul class="pf-v5-c-nav__list" role="list">
|
|
539
542
|
<li class="pf-v5-c-nav__item">
|
|
540
543
|
<a
|
|
@@ -558,12 +561,20 @@ cssPrefix: pf-v5-c-nav
|
|
|
558
561
|
|
|
559
562
|
```html
|
|
560
563
|
<nav
|
|
561
|
-
class="pf-v5-c-nav pf-m-horizontal
|
|
564
|
+
class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal pf-m-subnav"
|
|
562
565
|
aria-label="Global"
|
|
563
566
|
>
|
|
564
|
-
<
|
|
565
|
-
<
|
|
566
|
-
|
|
567
|
+
<div class="pf-v5-c-nav__scroll-button">
|
|
568
|
+
<button
|
|
569
|
+
class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
|
|
570
|
+
type="button"
|
|
571
|
+
aria-label="Scroll start"
|
|
572
|
+
>
|
|
573
|
+
<span class="pf-v5-c-button__icon">
|
|
574
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
575
|
+
</span>
|
|
576
|
+
</button>
|
|
577
|
+
</div>
|
|
567
578
|
<ul class="pf-v5-c-nav__list" role="list">
|
|
568
579
|
<li class="pf-v5-c-nav__item">
|
|
569
580
|
<a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
|
|
@@ -585,201 +596,17 @@ cssPrefix: pf-v5-c-nav
|
|
|
585
596
|
>Horizontal nav item 5</a>
|
|
586
597
|
</li>
|
|
587
598
|
</ul>
|
|
588
|
-
<
|
|
589
|
-
<
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
<button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
|
|
600
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
601
|
-
</button>
|
|
602
|
-
<ul class="pf-v5-c-nav__list" role="list">
|
|
603
|
-
<li class="pf-v5-c-nav__item">
|
|
604
|
-
<a
|
|
605
|
-
href="#"
|
|
606
|
-
class="pf-v5-c-nav__link pf-m-current"
|
|
607
|
-
aria-current="page"
|
|
608
|
-
>Item 1</a>
|
|
609
|
-
</li>
|
|
610
|
-
<li class="pf-v5-c-nav__item">
|
|
611
|
-
<a href="#" class="pf-v5-c-nav__link">Item 2</a>
|
|
612
|
-
</li>
|
|
613
|
-
<li class="pf-v5-c-nav__item">
|
|
614
|
-
<a href="#" class="pf-v5-c-nav__link">Item 3</a>
|
|
615
|
-
</li>
|
|
616
|
-
</ul>
|
|
617
|
-
<button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll right">
|
|
618
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
619
|
-
</button>
|
|
620
|
-
</nav>
|
|
621
|
-
|
|
622
|
-
```
|
|
623
|
-
|
|
624
|
-
### Tertiary overflow
|
|
625
|
-
|
|
626
|
-
```html isDeprecated
|
|
627
|
-
<nav class="pf-v5-c-nav pf-m-tertiary pf-m-scrollable" aria-label="Local">
|
|
628
|
-
<button class="pf-v5-c-nav__scroll-button" disabled aria-label="Scroll left">
|
|
629
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
630
|
-
</button>
|
|
631
|
-
<ul class="pf-v5-c-nav__list" role="list">
|
|
632
|
-
<li class="pf-v5-c-nav__item">
|
|
633
|
-
<a
|
|
634
|
-
href="#"
|
|
635
|
-
class="pf-v5-c-nav__link pf-m-current"
|
|
636
|
-
aria-current="page"
|
|
637
|
-
>Tertiary nav item 1</a>
|
|
638
|
-
</li>
|
|
639
|
-
<li class="pf-v5-c-nav__item">
|
|
640
|
-
<a href="#" class="pf-v5-c-nav__link">Tertiary nav item 2</a>
|
|
641
|
-
</li>
|
|
642
|
-
<li class="pf-v5-c-nav__item">
|
|
643
|
-
<a href="#" class="pf-v5-c-nav__link">Tertiary nav item 3</a>
|
|
644
|
-
</li>
|
|
645
|
-
<li class="pf-v5-c-nav__item">
|
|
646
|
-
<a href="#" class="pf-v5-c-nav__link">Tertiary nav item 4</a>
|
|
647
|
-
</li>
|
|
648
|
-
<li class="pf-v5-c-nav__item">
|
|
649
|
-
<a href="#" class="pf-v5-c-nav__link">Tertiary nav item 5</a>
|
|
650
|
-
</li>
|
|
651
|
-
</ul>
|
|
652
|
-
<button class="pf-v5-c-nav__scroll-button" aria-label="Scroll right">
|
|
653
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
654
|
-
</button>
|
|
655
|
-
</nav>
|
|
656
|
-
|
|
657
|
-
```
|
|
658
|
-
|
|
659
|
-
### Default in light mode
|
|
660
|
-
|
|
661
|
-
```html isDeprecated
|
|
662
|
-
<nav class="pf-v5-c-nav pf-m-light" aria-label="Global">
|
|
663
|
-
<ul class="pf-v5-c-nav__list" role="list">
|
|
664
|
-
<li class="pf-v5-c-nav__item">
|
|
665
|
-
<a href="#" class="pf-v5-c-nav__link">Current link</a>
|
|
666
|
-
</li>
|
|
667
|
-
<li class="pf-v5-c-nav__item">
|
|
668
|
-
<a
|
|
669
|
-
href="#"
|
|
670
|
-
class="pf-v5-c-nav__link pf-m-current"
|
|
671
|
-
aria-current="page"
|
|
672
|
-
>Link 2</a>
|
|
673
|
-
</li>
|
|
674
|
-
<li class="pf-v5-c-nav__item">
|
|
675
|
-
<a href="#" class="pf-v5-c-nav__link">Link 3</a>
|
|
676
|
-
</li>
|
|
677
|
-
<li class="pf-v5-c-nav__item">
|
|
678
|
-
<a href="#" class="pf-v5-c-nav__link">Link 4</a>
|
|
679
|
-
</li>
|
|
680
|
-
</ul>
|
|
681
|
-
</nav>
|
|
682
|
-
|
|
683
|
-
```
|
|
684
|
-
|
|
685
|
-
### Expanded in light mode
|
|
686
|
-
|
|
687
|
-
```html isDeprecated
|
|
688
|
-
<nav class="pf-v5-c-nav pf-m-light" aria-label="Global">
|
|
689
|
-
<ul class="pf-v5-c-nav__list" role="list">
|
|
690
|
-
<li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
|
|
691
|
-
<button
|
|
692
|
-
class="pf-v5-c-nav__link"
|
|
693
|
-
id="expandable-light-example1"
|
|
694
|
-
aria-expanded="true"
|
|
695
|
-
>
|
|
696
|
-
Link 1 (current and expanded example)
|
|
697
|
-
<span class="pf-v5-c-nav__toggle">
|
|
698
|
-
<span class="pf-v5-c-nav__toggle-icon">
|
|
699
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
700
|
-
</span>
|
|
701
|
-
</span>
|
|
702
|
-
</button>
|
|
703
|
-
<section
|
|
704
|
-
class="pf-v5-c-nav__subnav"
|
|
705
|
-
aria-labelledby="expandable-light-example1"
|
|
706
|
-
>
|
|
707
|
-
<ul class="pf-v5-c-nav__list" role="list">
|
|
708
|
-
<li class="pf-v5-c-nav__item">
|
|
709
|
-
<a href="#" class="pf-v5-c-nav__link">Current link</a>
|
|
710
|
-
</li>
|
|
711
|
-
<li class="pf-v5-c-divider" role="separator"></li>
|
|
712
|
-
<li class="pf-v5-c-nav__item">
|
|
713
|
-
<a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
|
|
714
|
-
</li>
|
|
715
|
-
<li class="pf-v5-c-nav__item">
|
|
716
|
-
<a
|
|
717
|
-
href="#"
|
|
718
|
-
class="pf-v5-c-nav__link pf-m-current"
|
|
719
|
-
aria-current="page"
|
|
720
|
-
>Subnav link 3</a>
|
|
721
|
-
</li>
|
|
722
|
-
</ul>
|
|
723
|
-
</section>
|
|
724
|
-
</li>
|
|
725
|
-
<li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
|
|
726
|
-
<button
|
|
727
|
-
class="pf-v5-c-nav__link"
|
|
728
|
-
id="expandable-light-example2"
|
|
729
|
-
aria-expanded="true"
|
|
730
|
-
>
|
|
731
|
-
Link 2 (expanded, but not current example)
|
|
732
|
-
<span
|
|
733
|
-
class="pf-v5-c-nav__toggle"
|
|
734
|
-
>
|
|
735
|
-
<span class="pf-v5-c-nav__toggle-icon">
|
|
736
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
737
|
-
</span>
|
|
738
|
-
</span>
|
|
739
|
-
</button>
|
|
740
|
-
<section
|
|
741
|
-
class="pf-v5-c-nav__subnav"
|
|
742
|
-
aria-labelledby="expandable-light-example2"
|
|
743
|
-
>
|
|
744
|
-
<ul class="pf-v5-c-nav__list" role="list">
|
|
745
|
-
<li class="pf-v5-c-nav__item">
|
|
746
|
-
<a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
|
|
747
|
-
</li>
|
|
748
|
-
<li class="pf-v5-c-nav__item">
|
|
749
|
-
<a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
|
|
750
|
-
</li>
|
|
751
|
-
</ul>
|
|
752
|
-
</section>
|
|
753
|
-
</li>
|
|
754
|
-
<li class="pf-v5-c-nav__item pf-m-expandable">
|
|
755
|
-
<button
|
|
756
|
-
class="pf-v5-c-nav__link"
|
|
757
|
-
id="expandable-light-example3"
|
|
758
|
-
aria-expanded="false"
|
|
759
|
-
>
|
|
760
|
-
Link 3
|
|
761
|
-
<span class="pf-v5-c-nav__toggle">
|
|
762
|
-
<span class="pf-v5-c-nav__toggle-icon">
|
|
763
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
764
|
-
</span>
|
|
765
|
-
</span>
|
|
766
|
-
</button>
|
|
767
|
-
<section
|
|
768
|
-
class="pf-v5-c-nav__subnav"
|
|
769
|
-
aria-labelledby="expandable-light-example3"
|
|
770
|
-
hidden
|
|
771
|
-
>
|
|
772
|
-
<ul class="pf-v5-c-nav__list" role="list">
|
|
773
|
-
<li class="pf-v5-c-nav__item">
|
|
774
|
-
<a href="#" class="pf-v5-c-nav__link">Subnav link 1</a>
|
|
775
|
-
</li>
|
|
776
|
-
<li class="pf-v5-c-nav__item">
|
|
777
|
-
<a href="#" class="pf-v5-c-nav__link">Subnav link 2</a>
|
|
778
|
-
</li>
|
|
779
|
-
</ul>
|
|
780
|
-
</section>
|
|
781
|
-
</li>
|
|
782
|
-
</ul>
|
|
599
|
+
<div class="pf-v5-c-nav__scroll-button">
|
|
600
|
+
<button
|
|
601
|
+
class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
|
|
602
|
+
type="button"
|
|
603
|
+
aria-label="Scroll end"
|
|
604
|
+
>
|
|
605
|
+
<span class="pf-v5-c-button__icon">
|
|
606
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
607
|
+
</span>
|
|
608
|
+
</button>
|
|
609
|
+
</div>
|
|
783
610
|
</nav>
|
|
784
611
|
|
|
785
612
|
```
|
|
@@ -801,7 +628,8 @@ cssPrefix: pf-v5-c-nav
|
|
|
801
628
|
<li class="pf-v5-c-nav__item pf-m-flyout">
|
|
802
629
|
<a
|
|
803
630
|
href="#"
|
|
804
|
-
class="pf-v5-c-nav__link pf-m-
|
|
631
|
+
class="pf-v5-c-nav__link pf-m-current"
|
|
632
|
+
aria-current="page"
|
|
805
633
|
aria-haspopup="true"
|
|
806
634
|
aria-expanded="true"
|
|
807
635
|
>
|
|
@@ -2528,8 +2356,8 @@ When using anything other than a text node for the link text, wrap the link text
|
|
|
2528
2356
|
<li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
|
|
2529
2357
|
<button
|
|
2530
2358
|
class="pf-v5-c-nav__link"
|
|
2531
|
-
id="nav-link-text-link2"
|
|
2532
2359
|
aria-expanded="true"
|
|
2360
|
+
id="nav-link-text-link2"
|
|
2533
2361
|
>
|
|
2534
2362
|
<span class="pf-v5-c-nav__link-text">
|
|
2535
2363
|
Link 2
|
|
@@ -2565,11 +2393,11 @@ When using anything other than a text node for the link text, wrap the link text
|
|
|
2565
2393
|
</ul>
|
|
2566
2394
|
</section>
|
|
2567
2395
|
</li>
|
|
2568
|
-
<li class="pf-v5-c-nav__item pf-m-expandable
|
|
2396
|
+
<li class="pf-v5-c-nav__item pf-m-expandable">
|
|
2569
2397
|
<button
|
|
2570
2398
|
class="pf-v5-c-nav__link"
|
|
2571
|
-
id="nav-link-text-link4"
|
|
2572
2399
|
aria-expanded="false"
|
|
2400
|
+
id="nav-link-text-link4"
|
|
2573
2401
|
>
|
|
2574
2402
|
<span class="pf-v5-c-nav__link-text">
|
|
2575
2403
|
Link 3
|
|
@@ -2647,12 +2475,10 @@ The navigation system relies on several different sub-components:
|
|
|
2647
2475
|
| `.pf-v5-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
|
|
2648
2476
|
| `.pf-m-horizontal` | `.pf-v5-c-nav` | Modifies nav for the horizontal variation. |
|
|
2649
2477
|
| `.pf-m-horizontal-subnav` | `.pf-v5-c-nav` | Modifies nav for the horizontal subnav variation. |
|
|
2650
|
-
| `.pf-m-
|
|
2651
|
-
| `.pf-m-light` | `.pf-v5-c-nav` | Modifies nav for the light variation. **Note: only for use with vertical navs, and requires `.pf-m-light` on the page component's sidebar element (`.pf-v5-c-page__sidebar`)**. |
|
|
2478
|
+
| `.pf-m-full-width` | `.pf-v5-c-nav` | Modifies nav for to full width of parent. |
|
|
2652
2479
|
| `.pf-m-flyout` | `.pf-v5-c-nav__item` | Modifies nav item for the flyout variation. |
|
|
2653
2480
|
| `.pf-m-scrollable` | `.pf-v5-c-nav` | Modifies nav for the scrollable state. |
|
|
2654
2481
|
| `.pf-m-expandable` | `.pf-v5-c-nav__item` | Modifies for the expandable state. |
|
|
2655
2482
|
| `.pf-m-expanded` | `.pf-v5-c-nav__item` | Modifies for the expanded state. |
|
|
2656
2483
|
| `.pf-m-current` | `.pf-v5-c-nav__link` | Modifies for the current state. |
|
|
2657
2484
|
| `.pf-m-hover` | `.pf-v5-c-nav__link` | Modifies for the hover state. |
|
|
2658
|
-
| `.pf-m-start` | `.pf-v5-c-nav__toggle` | Modifies nav toggle to align left. |
|
|
@@ -195,13 +195,11 @@ section: patterns
|
|
|
195
195
|
aria-label="Global"
|
|
196
196
|
>
|
|
197
197
|
<ul class="pf-v5-c-nav__list" role="list">
|
|
198
|
-
<li
|
|
199
|
-
class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded pf-m-current"
|
|
200
|
-
>
|
|
198
|
+
<li class="pf-v5-c-nav__item pf-m-expandable pf-m-expanded">
|
|
201
199
|
<button
|
|
202
200
|
class="pf-v5-c-nav__link"
|
|
203
|
-
id="card-view-basic-example-expandable-nav-link1"
|
|
204
201
|
aria-expanded="true"
|
|
202
|
+
id="card-view-basic-example-expandable-nav-link1"
|
|
205
203
|
>
|
|
206
204
|
System panel
|
|
207
205
|
<span class="pf-v5-c-nav__toggle">
|
|
@@ -228,8 +226,6 @@ section: patterns
|
|
|
228
226
|
<li class="pf-v5-c-nav__item">
|
|
229
227
|
<a href="#" class="pf-v5-c-nav__link">Hypervisors</a>
|
|
230
228
|
</li>
|
|
231
|
-
<li class="pf-v5-c-divider" role="separator"></li>
|
|
232
|
-
|
|
233
229
|
<li class="pf-v5-c-nav__item">
|
|
234
230
|
<a href="#" class="pf-v5-c-nav__link">Instances</a>
|
|
235
231
|
</li>
|
|
@@ -245,8 +241,8 @@ section: patterns
|
|
|
245
241
|
<li class="pf-v5-c-nav__item pf-m-expandable">
|
|
246
242
|
<button
|
|
247
243
|
class="pf-v5-c-nav__link"
|
|
248
|
-
id="card-view-basic-example-expandable-nav-link2"
|
|
249
244
|
aria-expanded="false"
|
|
245
|
+
id="card-view-basic-example-expandable-nav-link2"
|
|
250
246
|
>
|
|
251
247
|
Policy
|
|
252
248
|
<span class="pf-v5-c-nav__toggle">
|
|
@@ -273,8 +269,8 @@ section: patterns
|
|
|
273
269
|
<li class="pf-v5-c-nav__item pf-m-expandable">
|
|
274
270
|
<button
|
|
275
271
|
class="pf-v5-c-nav__link"
|
|
276
|
-
id="card-view-basic-example-expandable-nav-link3"
|
|
277
272
|
aria-expanded="false"
|
|
273
|
+
id="card-view-basic-example-expandable-nav-link3"
|
|
278
274
|
>
|
|
279
275
|
Authentication
|
|
280
276
|
<span class="pf-v5-c-nav__toggle">
|
|
@@ -2064,17 +2064,21 @@ wrapperTag: div
|
|
|
2064
2064
|
style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
|
|
2065
2065
|
>
|
|
2066
2066
|
<nav
|
|
2067
|
-
class="pf-v5-c-nav pf-m-
|
|
2068
|
-
id="-horizontal-nav"
|
|
2067
|
+
class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal"
|
|
2068
|
+
id="masthead-horizontal-nav-masthead-horizontal-nav"
|
|
2069
2069
|
aria-label="Global"
|
|
2070
2070
|
>
|
|
2071
|
-
<button
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2071
|
+
<div class="pf-v5-c-nav__scroll-button">
|
|
2072
|
+
<button
|
|
2073
|
+
class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
|
|
2074
|
+
type="button"
|
|
2075
|
+
aria-label="Scroll start"
|
|
2076
|
+
>
|
|
2077
|
+
<span class="pf-v5-c-button__icon">
|
|
2078
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
2079
|
+
</span>
|
|
2080
|
+
</button>
|
|
2081
|
+
</div>
|
|
2078
2082
|
<ul class="pf-v5-c-nav__list" role="list">
|
|
2079
2083
|
<li class="pf-v5-c-nav__item">
|
|
2080
2084
|
<a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
|
|
@@ -2096,12 +2100,17 @@ wrapperTag: div
|
|
|
2096
2100
|
>Horizontal nav item 5</a>
|
|
2097
2101
|
</li>
|
|
2098
2102
|
</ul>
|
|
2099
|
-
<button
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2103
|
+
<div class="pf-v5-c-nav__scroll-button">
|
|
2104
|
+
<button
|
|
2105
|
+
class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
|
|
2106
|
+
type="button"
|
|
2107
|
+
aria-label="Scroll end"
|
|
2108
|
+
>
|
|
2109
|
+
<span class="pf-v5-c-button__icon">
|
|
2110
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2111
|
+
</span>
|
|
2112
|
+
</button>
|
|
2113
|
+
</div>
|
|
2105
2114
|
</nav>
|
|
2106
2115
|
</div>
|
|
2107
2116
|
<div
|