@patternfly/patternfly 5.0.0-alpha.1 → 5.0.0-alpha.3
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/RELEASE-NOTES.md +30 -0
- package/components/Dropdown/dropdown.css +15 -0
- package/components/Dropdown/dropdown.scss +20 -0
- package/components/FormControl/form-control.css +1 -1
- package/components/FormControl/themes/dark/form-control.scss +1 -1
- package/components/InputGroup/input-group.css +14 -0
- package/components/InputGroup/input-group.scss +9 -0
- package/components/InputGroup/themes/dark/input-group.scss +8 -0
- package/components/Menu/menu.css +4 -0
- package/components/Menu/menu.scss +5 -0
- package/components/Pagination/pagination.css +120 -0
- package/components/Pagination/pagination.scss +24 -1
- package/components/Slider/slider.css +0 -7
- package/components/Slider/slider.scss +0 -9
- package/docs/components/Dropdown/examples/Dropdown.md +216 -0
- package/docs/components/InputGroup/examples/InputGroup.md +1 -0
- package/docs/components/Pagination/examples/Pagination.md +129 -30
- package/docs/components/Slider/examples/Slider.md +6 -6
- package/docs/components/Tabs/examples/Tabs.md +1 -1
- package/docs/demos/Banner/examples/Banner.md +2 -2
- package/docs/demos/Dashboard/examples/Dashboard.md +0 -1
- package/docs/demos/Nav/examples/Nav.md +671 -718
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -2
- package/docs/demos/Tabs/examples/Tabs.md +42 -539
- package/docs/demos/Wizard/examples/Wizard.md +0 -4
- package/package.json +5 -5
- package/patternfly-no-reset.css +154 -8
- package/patternfly.css +154 -8
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -916,17 +916,17 @@ section: components
|
|
|
916
916
|
|
|
917
917
|
```
|
|
918
918
|
|
|
919
|
-
###
|
|
919
|
+
### Grouped nav
|
|
920
920
|
|
|
921
921
|
```html isFullscreen
|
|
922
|
-
<div class="pf-c-page" id="nav-
|
|
922
|
+
<div class="pf-c-page" id="nav-grouped-nav-example">
|
|
923
923
|
<div class="pf-c-skip-to-content">
|
|
924
924
|
<a
|
|
925
925
|
class="pf-c-button pf-m-primary"
|
|
926
|
-
href="#main-content-nav-
|
|
926
|
+
href="#main-content-nav-grouped-nav-example"
|
|
927
927
|
>Skip to content</a>
|
|
928
928
|
</div>
|
|
929
|
-
<header class="pf-c-masthead" id="nav-
|
|
929
|
+
<header class="pf-c-masthead" id="nav-grouped-nav-example-masthead">
|
|
930
930
|
<span class="pf-c-masthead__toggle">
|
|
931
931
|
<button
|
|
932
932
|
class="pf-c-button pf-m-plain"
|
|
@@ -957,7 +957,7 @@ section: components
|
|
|
957
957
|
<div class="pf-c-masthead__content">
|
|
958
958
|
<div
|
|
959
959
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
960
|
-
id="nav-
|
|
960
|
+
id="nav-grouped-nav-example-masthead-toolbar"
|
|
961
961
|
>
|
|
962
962
|
<div class="pf-c-toolbar__content">
|
|
963
963
|
<div class="pf-c-toolbar__content-section">
|
|
@@ -971,12 +971,12 @@ section: components
|
|
|
971
971
|
<nav
|
|
972
972
|
class="pf-c-app-launcher"
|
|
973
973
|
aria-label="Application launcher"
|
|
974
|
-
id="nav-
|
|
974
|
+
id="nav-grouped-nav-example-masthead-application-launcher"
|
|
975
975
|
>
|
|
976
976
|
<button
|
|
977
977
|
class="pf-c-app-launcher__toggle"
|
|
978
978
|
type="button"
|
|
979
|
-
id="nav-
|
|
979
|
+
id="nav-grouped-nav-example-masthead-application-launcher-button"
|
|
980
980
|
aria-expanded="false"
|
|
981
981
|
aria-label="Application launcher"
|
|
982
982
|
>
|
|
@@ -1116,7 +1116,7 @@ section: components
|
|
|
1116
1116
|
<div class="pf-c-dropdown">
|
|
1117
1117
|
<button
|
|
1118
1118
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1119
|
-
id="nav-
|
|
1119
|
+
id="nav-grouped-nav-example-masthead-settings-button"
|
|
1120
1120
|
aria-expanded="false"
|
|
1121
1121
|
type="button"
|
|
1122
1122
|
aria-label="Settings"
|
|
@@ -1125,7 +1125,7 @@ section: components
|
|
|
1125
1125
|
</button>
|
|
1126
1126
|
<ul
|
|
1127
1127
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1128
|
-
aria-labelledby="nav-
|
|
1128
|
+
aria-labelledby="nav-grouped-nav-example-masthead-settings-button"
|
|
1129
1129
|
hidden
|
|
1130
1130
|
>
|
|
1131
1131
|
<li>
|
|
@@ -1147,7 +1147,7 @@ section: components
|
|
|
1147
1147
|
<div class="pf-c-dropdown">
|
|
1148
1148
|
<button
|
|
1149
1149
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1150
|
-
id="nav-
|
|
1150
|
+
id="nav-grouped-nav-example-masthead-help-button"
|
|
1151
1151
|
aria-expanded="false"
|
|
1152
1152
|
type="button"
|
|
1153
1153
|
aria-label="Help"
|
|
@@ -1156,7 +1156,7 @@ section: components
|
|
|
1156
1156
|
</button>
|
|
1157
1157
|
<ul
|
|
1158
1158
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1159
|
-
aria-labelledby="nav-
|
|
1159
|
+
aria-labelledby="nav-grouped-nav-example-masthead-help-button"
|
|
1160
1160
|
hidden
|
|
1161
1161
|
>
|
|
1162
1162
|
<li>
|
|
@@ -1656,7 +1656,7 @@ section: components
|
|
|
1656
1656
|
>
|
|
1657
1657
|
<button
|
|
1658
1658
|
class="pf-c-dropdown__toggle"
|
|
1659
|
-
id="nav-
|
|
1659
|
+
id="nav-grouped-nav-example-masthead-profile-button"
|
|
1660
1660
|
aria-expanded="false"
|
|
1661
1661
|
type="button"
|
|
1662
1662
|
>
|
|
@@ -1712,119 +1712,57 @@ section: components
|
|
|
1712
1712
|
<div class="pf-c-page__sidebar-body">
|
|
1713
1713
|
<nav
|
|
1714
1714
|
class="pf-c-nav"
|
|
1715
|
-
id="nav-
|
|
1715
|
+
id="nav-grouped-nav-example-grouped-nav"
|
|
1716
1716
|
aria-label="Global"
|
|
1717
1717
|
>
|
|
1718
|
-
<
|
|
1719
|
-
<
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
>
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
|
|
1759
|
-
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
1760
|
-
</li>
|
|
1761
|
-
</ul>
|
|
1762
|
-
</section>
|
|
1763
|
-
</li>
|
|
1764
|
-
<li class="pf-c-nav__item pf-m-expandable">
|
|
1765
|
-
<button
|
|
1766
|
-
class="pf-c-nav__link"
|
|
1767
|
-
id="nav-expandable-example-expandable-nav-link2"
|
|
1768
|
-
aria-expanded="false"
|
|
1769
|
-
>
|
|
1770
|
-
Policy
|
|
1771
|
-
<span class="pf-c-nav__toggle">
|
|
1772
|
-
<span class="pf-c-nav__toggle-icon">
|
|
1773
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1774
|
-
</span>
|
|
1775
|
-
</span>
|
|
1776
|
-
</button>
|
|
1777
|
-
<section
|
|
1778
|
-
class="pf-c-nav__subnav"
|
|
1779
|
-
aria-labelledby="nav-expandable-example-expandable-nav-link2"
|
|
1780
|
-
hidden
|
|
1781
|
-
>
|
|
1782
|
-
<ul class="pf-c-nav__list">
|
|
1783
|
-
<li class="pf-c-nav__item">
|
|
1784
|
-
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
1785
|
-
</li>
|
|
1786
|
-
<li class="pf-c-nav__item">
|
|
1787
|
-
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
1788
|
-
</li>
|
|
1789
|
-
</ul>
|
|
1790
|
-
</section>
|
|
1791
|
-
</li>
|
|
1792
|
-
<li class="pf-c-nav__item pf-m-expandable">
|
|
1793
|
-
<button
|
|
1794
|
-
class="pf-c-nav__link"
|
|
1795
|
-
id="nav-expandable-example-expandable-nav-link3"
|
|
1796
|
-
aria-expanded="false"
|
|
1797
|
-
>
|
|
1798
|
-
Authentication
|
|
1799
|
-
<span class="pf-c-nav__toggle">
|
|
1800
|
-
<span class="pf-c-nav__toggle-icon">
|
|
1801
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1802
|
-
</span>
|
|
1803
|
-
</span>
|
|
1804
|
-
</button>
|
|
1805
|
-
<section
|
|
1806
|
-
class="pf-c-nav__subnav"
|
|
1807
|
-
aria-labelledby="nav-expandable-example-expandable-nav-link3"
|
|
1808
|
-
hidden
|
|
1809
|
-
>
|
|
1810
|
-
<ul class="pf-c-nav__list">
|
|
1811
|
-
<li class="pf-c-nav__item">
|
|
1812
|
-
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
1813
|
-
</li>
|
|
1814
|
-
<li class="pf-c-nav__item">
|
|
1815
|
-
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
1816
|
-
</li>
|
|
1817
|
-
</ul>
|
|
1818
|
-
</section>
|
|
1819
|
-
</li>
|
|
1820
|
-
</ul>
|
|
1718
|
+
<section class="pf-c-nav__section" aria-labelledby="grouped-title1">
|
|
1719
|
+
<h2 class="pf-c-nav__section-title" id="grouped-title1">System panel</h2>
|
|
1720
|
+
<ul class="pf-c-nav__list">
|
|
1721
|
+
<li class="pf-c-nav__item">
|
|
1722
|
+
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
1723
|
+
</li>
|
|
1724
|
+
<li class="pf-c-nav__item">
|
|
1725
|
+
<a href="#" class="pf-c-nav__link">Resource usage</a>
|
|
1726
|
+
</li>
|
|
1727
|
+
<li class="pf-c-nav__item">
|
|
1728
|
+
<a
|
|
1729
|
+
href="#"
|
|
1730
|
+
class="pf-c-nav__link pf-m-current"
|
|
1731
|
+
aria-current="page"
|
|
1732
|
+
>Hypervisors</a>
|
|
1733
|
+
</li>
|
|
1734
|
+
<li class="pf-c-nav__item">
|
|
1735
|
+
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
1736
|
+
</li>
|
|
1737
|
+
<li class="pf-c-nav__item">
|
|
1738
|
+
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
1739
|
+
</li>
|
|
1740
|
+
<li class="pf-c-nav__item">
|
|
1741
|
+
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
1742
|
+
</li>
|
|
1743
|
+
</ul>
|
|
1744
|
+
</section>
|
|
1745
|
+
<section class="pf-c-nav__section" aria-labelledby="grouped-title2">
|
|
1746
|
+
<h2 class="pf-c-nav__section-title" id="grouped-title2">Policy</h2>
|
|
1747
|
+
<ul class="pf-c-nav__list">
|
|
1748
|
+
<li class="pf-c-nav__item">
|
|
1749
|
+
<a href="#" class="pf-c-nav__link">Hosts</a>
|
|
1750
|
+
</li>
|
|
1751
|
+
<li class="pf-c-nav__item">
|
|
1752
|
+
<a href="#" class="pf-c-nav__link">Virtual machines</a>
|
|
1753
|
+
</li>
|
|
1754
|
+
<li class="pf-c-nav__item">
|
|
1755
|
+
<a href="#" class="pf-c-nav__link">Storage</a>
|
|
1756
|
+
</li>
|
|
1757
|
+
</ul>
|
|
1758
|
+
</section>
|
|
1821
1759
|
</nav>
|
|
1822
1760
|
</div>
|
|
1823
1761
|
</div>
|
|
1824
1762
|
<main
|
|
1825
1763
|
class="pf-c-page__main"
|
|
1826
1764
|
tabindex="-1"
|
|
1827
|
-
id="main-content-nav-
|
|
1765
|
+
id="main-content-nav-grouped-nav-example"
|
|
1828
1766
|
>
|
|
1829
1767
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1830
1768
|
<div class="pf-c-page__main-body">
|
|
@@ -1911,17 +1849,26 @@ section: components
|
|
|
1911
1849
|
|
|
1912
1850
|
```
|
|
1913
1851
|
|
|
1914
|
-
###
|
|
1852
|
+
### Expandable nav
|
|
1915
1853
|
|
|
1916
1854
|
```html isFullscreen
|
|
1917
|
-
<div class="pf-c-page" id="nav-
|
|
1855
|
+
<div class="pf-c-page" id="nav-expandable-example">
|
|
1918
1856
|
<div class="pf-c-skip-to-content">
|
|
1919
1857
|
<a
|
|
1920
1858
|
class="pf-c-button pf-m-primary"
|
|
1921
|
-
href="#main-content-nav-
|
|
1859
|
+
href="#main-content-nav-expandable-example"
|
|
1922
1860
|
>Skip to content</a>
|
|
1923
1861
|
</div>
|
|
1924
|
-
<header class="pf-c-masthead" id="nav-
|
|
1862
|
+
<header class="pf-c-masthead" id="nav-expandable-example-masthead">
|
|
1863
|
+
<span class="pf-c-masthead__toggle">
|
|
1864
|
+
<button
|
|
1865
|
+
class="pf-c-button pf-m-plain"
|
|
1866
|
+
type="button"
|
|
1867
|
+
aria-label="Global navigation"
|
|
1868
|
+
>
|
|
1869
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1870
|
+
</button>
|
|
1871
|
+
</span>
|
|
1925
1872
|
<div class="pf-c-masthead__main">
|
|
1926
1873
|
<a class="pf-c-masthead__brand" href="#">
|
|
1927
1874
|
<picture
|
|
@@ -1943,55 +1890,10 @@ section: components
|
|
|
1943
1890
|
<div class="pf-c-masthead__content">
|
|
1944
1891
|
<div
|
|
1945
1892
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1946
|
-
id="nav-
|
|
1893
|
+
id="nav-expandable-example-masthead-toolbar"
|
|
1947
1894
|
>
|
|
1948
1895
|
<div class="pf-c-toolbar__content">
|
|
1949
1896
|
<div class="pf-c-toolbar__content-section">
|
|
1950
|
-
<div
|
|
1951
|
-
class="pf-c-toolbar__item pf-m-overflow-container"
|
|
1952
|
-
style="--pf-c-toolbar__item--MinWidth: 18ch;"
|
|
1953
|
-
>
|
|
1954
|
-
<nav
|
|
1955
|
-
class="pf-c-nav pf-m-horizontal pf-m-scrollable"
|
|
1956
|
-
id="-horizontal-nav"
|
|
1957
|
-
aria-label="Global"
|
|
1958
|
-
>
|
|
1959
|
-
<button
|
|
1960
|
-
class="pf-c-nav__scroll-button"
|
|
1961
|
-
disabled
|
|
1962
|
-
aria-label="Scroll left"
|
|
1963
|
-
>
|
|
1964
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
1965
|
-
</button>
|
|
1966
|
-
<ul class="pf-c-nav__list">
|
|
1967
|
-
<li class="pf-c-nav__item">
|
|
1968
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
|
|
1969
|
-
</li>
|
|
1970
|
-
<li class="pf-c-nav__item">
|
|
1971
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 2</a>
|
|
1972
|
-
</li>
|
|
1973
|
-
<li class="pf-c-nav__item">
|
|
1974
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 3</a>
|
|
1975
|
-
</li>
|
|
1976
|
-
<li class="pf-c-nav__item">
|
|
1977
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 4</a>
|
|
1978
|
-
</li>
|
|
1979
|
-
<li class="pf-c-nav__item">
|
|
1980
|
-
<a
|
|
1981
|
-
href="#"
|
|
1982
|
-
class="pf-c-nav__link pf-m-current"
|
|
1983
|
-
aria-current="page"
|
|
1984
|
-
>Horizontal nav item 5</a>
|
|
1985
|
-
</li>
|
|
1986
|
-
</ul>
|
|
1987
|
-
<button
|
|
1988
|
-
class="pf-c-nav__scroll-button"
|
|
1989
|
-
aria-label="Scroll right"
|
|
1990
|
-
>
|
|
1991
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1992
|
-
</button>
|
|
1993
|
-
</nav>
|
|
1994
|
-
</div>
|
|
1995
1897
|
<div
|
|
1996
1898
|
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
1997
1899
|
>
|
|
@@ -2002,12 +1904,12 @@ section: components
|
|
|
2002
1904
|
<nav
|
|
2003
1905
|
class="pf-c-app-launcher"
|
|
2004
1906
|
aria-label="Application launcher"
|
|
2005
|
-
id="nav-
|
|
1907
|
+
id="nav-expandable-example-masthead-application-launcher"
|
|
2006
1908
|
>
|
|
2007
1909
|
<button
|
|
2008
1910
|
class="pf-c-app-launcher__toggle"
|
|
2009
1911
|
type="button"
|
|
2010
|
-
id="nav-
|
|
1912
|
+
id="nav-expandable-example-masthead-application-launcher-button"
|
|
2011
1913
|
aria-expanded="false"
|
|
2012
1914
|
aria-label="Application launcher"
|
|
2013
1915
|
>
|
|
@@ -2147,7 +2049,7 @@ section: components
|
|
|
2147
2049
|
<div class="pf-c-dropdown">
|
|
2148
2050
|
<button
|
|
2149
2051
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2150
|
-
id="nav-
|
|
2052
|
+
id="nav-expandable-example-masthead-settings-button"
|
|
2151
2053
|
aria-expanded="false"
|
|
2152
2054
|
type="button"
|
|
2153
2055
|
aria-label="Settings"
|
|
@@ -2156,7 +2058,7 @@ section: components
|
|
|
2156
2058
|
</button>
|
|
2157
2059
|
<ul
|
|
2158
2060
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2159
|
-
aria-labelledby="nav-
|
|
2061
|
+
aria-labelledby="nav-expandable-example-masthead-settings-button"
|
|
2160
2062
|
hidden
|
|
2161
2063
|
>
|
|
2162
2064
|
<li>
|
|
@@ -2178,7 +2080,7 @@ section: components
|
|
|
2178
2080
|
<div class="pf-c-dropdown">
|
|
2179
2081
|
<button
|
|
2180
2082
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2181
|
-
id="nav-
|
|
2083
|
+
id="nav-expandable-example-masthead-help-button"
|
|
2182
2084
|
aria-expanded="false"
|
|
2183
2085
|
type="button"
|
|
2184
2086
|
aria-label="Help"
|
|
@@ -2187,7 +2089,7 @@ section: components
|
|
|
2187
2089
|
</button>
|
|
2188
2090
|
<ul
|
|
2189
2091
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2190
|
-
aria-labelledby="nav-
|
|
2092
|
+
aria-labelledby="nav-expandable-example-masthead-help-button"
|
|
2191
2093
|
hidden
|
|
2192
2094
|
>
|
|
2193
2095
|
<li>
|
|
@@ -2687,7 +2589,7 @@ section: components
|
|
|
2687
2589
|
>
|
|
2688
2590
|
<button
|
|
2689
2591
|
class="pf-c-dropdown__toggle"
|
|
2690
|
-
id="nav-
|
|
2592
|
+
id="nav-expandable-example-masthead-profile-button"
|
|
2691
2593
|
aria-expanded="false"
|
|
2692
2594
|
type="button"
|
|
2693
2595
|
>
|
|
@@ -2739,12 +2641,125 @@ section: components
|
|
|
2739
2641
|
</div>
|
|
2740
2642
|
</div>
|
|
2741
2643
|
</header>
|
|
2742
|
-
<
|
|
2743
|
-
class="pf-c-
|
|
2744
|
-
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2644
|
+
<div class="pf-c-page__sidebar">
|
|
2645
|
+
<div class="pf-c-page__sidebar-body">
|
|
2646
|
+
<nav
|
|
2647
|
+
class="pf-c-nav"
|
|
2648
|
+
id="nav-expandable-example-expandable-nav"
|
|
2649
|
+
aria-label="Global"
|
|
2650
|
+
>
|
|
2651
|
+
<ul class="pf-c-nav__list">
|
|
2652
|
+
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
|
|
2653
|
+
<button
|
|
2654
|
+
class="pf-c-nav__link"
|
|
2655
|
+
id="nav-expandable-example-expandable-nav-link1"
|
|
2656
|
+
aria-expanded="true"
|
|
2657
|
+
>
|
|
2658
|
+
System panel
|
|
2659
|
+
<span class="pf-c-nav__toggle">
|
|
2660
|
+
<span class="pf-c-nav__toggle-icon">
|
|
2661
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2662
|
+
</span>
|
|
2663
|
+
</span>
|
|
2664
|
+
</button>
|
|
2665
|
+
<section
|
|
2666
|
+
class="pf-c-nav__subnav"
|
|
2667
|
+
aria-labelledby="nav-expandable-example-expandable-nav-link1"
|
|
2668
|
+
>
|
|
2669
|
+
<ul class="pf-c-nav__list">
|
|
2670
|
+
<li class="pf-c-nav__item">
|
|
2671
|
+
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
2672
|
+
</li>
|
|
2673
|
+
<li class="pf-c-nav__item">
|
|
2674
|
+
<a
|
|
2675
|
+
href="#"
|
|
2676
|
+
class="pf-c-nav__link pf-m-current"
|
|
2677
|
+
aria-current="page"
|
|
2678
|
+
>Resource usage</a>
|
|
2679
|
+
</li>
|
|
2680
|
+
<li class="pf-c-nav__item">
|
|
2681
|
+
<a href="#" class="pf-c-nav__link">Hypervisors</a>
|
|
2682
|
+
</li>
|
|
2683
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2684
|
+
|
|
2685
|
+
<li class="pf-c-nav__item">
|
|
2686
|
+
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
2687
|
+
</li>
|
|
2688
|
+
<li class="pf-c-nav__item">
|
|
2689
|
+
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
2690
|
+
</li>
|
|
2691
|
+
<li class="pf-c-nav__item">
|
|
2692
|
+
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
2693
|
+
</li>
|
|
2694
|
+
</ul>
|
|
2695
|
+
</section>
|
|
2696
|
+
</li>
|
|
2697
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
2698
|
+
<button
|
|
2699
|
+
class="pf-c-nav__link"
|
|
2700
|
+
id="nav-expandable-example-expandable-nav-link2"
|
|
2701
|
+
aria-expanded="false"
|
|
2702
|
+
>
|
|
2703
|
+
Policy
|
|
2704
|
+
<span class="pf-c-nav__toggle">
|
|
2705
|
+
<span class="pf-c-nav__toggle-icon">
|
|
2706
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2707
|
+
</span>
|
|
2708
|
+
</span>
|
|
2709
|
+
</button>
|
|
2710
|
+
<section
|
|
2711
|
+
class="pf-c-nav__subnav"
|
|
2712
|
+
aria-labelledby="nav-expandable-example-expandable-nav-link2"
|
|
2713
|
+
hidden
|
|
2714
|
+
>
|
|
2715
|
+
<ul class="pf-c-nav__list">
|
|
2716
|
+
<li class="pf-c-nav__item">
|
|
2717
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
2718
|
+
</li>
|
|
2719
|
+
<li class="pf-c-nav__item">
|
|
2720
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
2721
|
+
</li>
|
|
2722
|
+
</ul>
|
|
2723
|
+
</section>
|
|
2724
|
+
</li>
|
|
2725
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
2726
|
+
<button
|
|
2727
|
+
class="pf-c-nav__link"
|
|
2728
|
+
id="nav-expandable-example-expandable-nav-link3"
|
|
2729
|
+
aria-expanded="false"
|
|
2730
|
+
>
|
|
2731
|
+
Authentication
|
|
2732
|
+
<span class="pf-c-nav__toggle">
|
|
2733
|
+
<span class="pf-c-nav__toggle-icon">
|
|
2734
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2735
|
+
</span>
|
|
2736
|
+
</span>
|
|
2737
|
+
</button>
|
|
2738
|
+
<section
|
|
2739
|
+
class="pf-c-nav__subnav"
|
|
2740
|
+
aria-labelledby="nav-expandable-example-expandable-nav-link3"
|
|
2741
|
+
hidden
|
|
2742
|
+
>
|
|
2743
|
+
<ul class="pf-c-nav__list">
|
|
2744
|
+
<li class="pf-c-nav__item">
|
|
2745
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
2746
|
+
</li>
|
|
2747
|
+
<li class="pf-c-nav__item">
|
|
2748
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
2749
|
+
</li>
|
|
2750
|
+
</ul>
|
|
2751
|
+
</section>
|
|
2752
|
+
</li>
|
|
2753
|
+
</ul>
|
|
2754
|
+
</nav>
|
|
2755
|
+
</div>
|
|
2756
|
+
</div>
|
|
2757
|
+
<main
|
|
2758
|
+
class="pf-c-page__main"
|
|
2759
|
+
tabindex="-1"
|
|
2760
|
+
id="main-content-nav-expandable-example"
|
|
2761
|
+
>
|
|
2762
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
2748
2763
|
<div class="pf-c-page__main-body">
|
|
2749
2764
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
2750
2765
|
<ol class="pf-c-breadcrumb__list">
|
|
@@ -2829,26 +2844,17 @@ section: components
|
|
|
2829
2844
|
|
|
2830
2845
|
```
|
|
2831
2846
|
|
|
2832
|
-
### Horizontal
|
|
2847
|
+
### Horizontal nav
|
|
2833
2848
|
|
|
2834
2849
|
```html isFullscreen
|
|
2835
|
-
<div class="pf-c-page" id="nav-horizontal-
|
|
2850
|
+
<div class="pf-c-page" id="nav-horizontal-example">
|
|
2836
2851
|
<div class="pf-c-skip-to-content">
|
|
2837
2852
|
<a
|
|
2838
2853
|
class="pf-c-button pf-m-primary"
|
|
2839
|
-
href="#main-content-nav-horizontal-
|
|
2854
|
+
href="#main-content-nav-horizontal-example"
|
|
2840
2855
|
>Skip to content</a>
|
|
2841
2856
|
</div>
|
|
2842
|
-
<header class="pf-c-masthead" id="nav-horizontal-
|
|
2843
|
-
<span class="pf-c-masthead__toggle">
|
|
2844
|
-
<button
|
|
2845
|
-
class="pf-c-button pf-m-plain"
|
|
2846
|
-
type="button"
|
|
2847
|
-
aria-label="Global navigation"
|
|
2848
|
-
>
|
|
2849
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2850
|
-
</button>
|
|
2851
|
-
</span>
|
|
2857
|
+
<header class="pf-c-masthead" id="nav-horizontal-example-masthead">
|
|
2852
2858
|
<div class="pf-c-masthead__main">
|
|
2853
2859
|
<a class="pf-c-masthead__brand" href="#">
|
|
2854
2860
|
<picture
|
|
@@ -2870,10 +2876,55 @@ section: components
|
|
|
2870
2876
|
<div class="pf-c-masthead__content">
|
|
2871
2877
|
<div
|
|
2872
2878
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
2873
|
-
id="nav-horizontal-
|
|
2879
|
+
id="nav-horizontal-example-masthead-toolbar"
|
|
2874
2880
|
>
|
|
2875
2881
|
<div class="pf-c-toolbar__content">
|
|
2876
2882
|
<div class="pf-c-toolbar__content-section">
|
|
2883
|
+
<div
|
|
2884
|
+
class="pf-c-toolbar__item pf-m-overflow-container"
|
|
2885
|
+
style="--pf-c-toolbar__item--MinWidth: 18ch;"
|
|
2886
|
+
>
|
|
2887
|
+
<nav
|
|
2888
|
+
class="pf-c-nav pf-m-horizontal pf-m-scrollable"
|
|
2889
|
+
id="-horizontal-nav"
|
|
2890
|
+
aria-label="Global"
|
|
2891
|
+
>
|
|
2892
|
+
<button
|
|
2893
|
+
class="pf-c-nav__scroll-button"
|
|
2894
|
+
disabled
|
|
2895
|
+
aria-label="Scroll left"
|
|
2896
|
+
>
|
|
2897
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
2898
|
+
</button>
|
|
2899
|
+
<ul class="pf-c-nav__list">
|
|
2900
|
+
<li class="pf-c-nav__item">
|
|
2901
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
|
|
2902
|
+
</li>
|
|
2903
|
+
<li class="pf-c-nav__item">
|
|
2904
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 2</a>
|
|
2905
|
+
</li>
|
|
2906
|
+
<li class="pf-c-nav__item">
|
|
2907
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 3</a>
|
|
2908
|
+
</li>
|
|
2909
|
+
<li class="pf-c-nav__item">
|
|
2910
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 4</a>
|
|
2911
|
+
</li>
|
|
2912
|
+
<li class="pf-c-nav__item">
|
|
2913
|
+
<a
|
|
2914
|
+
href="#"
|
|
2915
|
+
class="pf-c-nav__link pf-m-current"
|
|
2916
|
+
aria-current="page"
|
|
2917
|
+
>Horizontal nav item 5</a>
|
|
2918
|
+
</li>
|
|
2919
|
+
</ul>
|
|
2920
|
+
<button
|
|
2921
|
+
class="pf-c-nav__scroll-button"
|
|
2922
|
+
aria-label="Scroll right"
|
|
2923
|
+
>
|
|
2924
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2925
|
+
</button>
|
|
2926
|
+
</nav>
|
|
2927
|
+
</div>
|
|
2877
2928
|
<div
|
|
2878
2929
|
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
2879
2930
|
>
|
|
@@ -2884,12 +2935,12 @@ section: components
|
|
|
2884
2935
|
<nav
|
|
2885
2936
|
class="pf-c-app-launcher"
|
|
2886
2937
|
aria-label="Application launcher"
|
|
2887
|
-
id="nav-horizontal-
|
|
2938
|
+
id="nav-horizontal-example-masthead-application-launcher"
|
|
2888
2939
|
>
|
|
2889
2940
|
<button
|
|
2890
2941
|
class="pf-c-app-launcher__toggle"
|
|
2891
2942
|
type="button"
|
|
2892
|
-
id="nav-horizontal-
|
|
2943
|
+
id="nav-horizontal-example-masthead-application-launcher-button"
|
|
2893
2944
|
aria-expanded="false"
|
|
2894
2945
|
aria-label="Application launcher"
|
|
2895
2946
|
>
|
|
@@ -3029,7 +3080,7 @@ section: components
|
|
|
3029
3080
|
<div class="pf-c-dropdown">
|
|
3030
3081
|
<button
|
|
3031
3082
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
3032
|
-
id="nav-horizontal-
|
|
3083
|
+
id="nav-horizontal-example-masthead-settings-button"
|
|
3033
3084
|
aria-expanded="false"
|
|
3034
3085
|
type="button"
|
|
3035
3086
|
aria-label="Settings"
|
|
@@ -3038,7 +3089,7 @@ section: components
|
|
|
3038
3089
|
</button>
|
|
3039
3090
|
<ul
|
|
3040
3091
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
3041
|
-
aria-labelledby="nav-horizontal-
|
|
3092
|
+
aria-labelledby="nav-horizontal-example-masthead-settings-button"
|
|
3042
3093
|
hidden
|
|
3043
3094
|
>
|
|
3044
3095
|
<li>
|
|
@@ -3060,7 +3111,7 @@ section: components
|
|
|
3060
3111
|
<div class="pf-c-dropdown">
|
|
3061
3112
|
<button
|
|
3062
3113
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
3063
|
-
id="nav-horizontal-
|
|
3114
|
+
id="nav-horizontal-example-masthead-help-button"
|
|
3064
3115
|
aria-expanded="false"
|
|
3065
3116
|
type="button"
|
|
3066
3117
|
aria-label="Help"
|
|
@@ -3069,7 +3120,7 @@ section: components
|
|
|
3069
3120
|
</button>
|
|
3070
3121
|
<ul
|
|
3071
3122
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
3072
|
-
aria-labelledby="nav-horizontal-
|
|
3123
|
+
aria-labelledby="nav-horizontal-example-masthead-help-button"
|
|
3073
3124
|
hidden
|
|
3074
3125
|
>
|
|
3075
3126
|
<li>
|
|
@@ -3569,7 +3620,7 @@ section: components
|
|
|
3569
3620
|
>
|
|
3570
3621
|
<button
|
|
3571
3622
|
class="pf-c-dropdown__toggle"
|
|
3572
|
-
id="nav-horizontal-
|
|
3623
|
+
id="nav-horizontal-example-masthead-profile-button"
|
|
3573
3624
|
aria-expanded="false"
|
|
3574
3625
|
type="button"
|
|
3575
3626
|
>
|
|
@@ -3621,174 +3672,21 @@ section: components
|
|
|
3621
3672
|
</div>
|
|
3622
3673
|
</div>
|
|
3623
3674
|
</header>
|
|
3624
|
-
<
|
|
3625
|
-
|
|
3626
|
-
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
>
|
|
3631
|
-
<
|
|
3632
|
-
<
|
|
3633
|
-
<
|
|
3634
|
-
class="pf-c-
|
|
3635
|
-
|
|
3636
|
-
|
|
3637
|
-
|
|
3638
|
-
|
|
3639
|
-
<span class="pf-c-nav__toggle">
|
|
3640
|
-
<span class="pf-c-nav__toggle-icon">
|
|
3641
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3642
|
-
</span>
|
|
3643
|
-
</span>
|
|
3644
|
-
</button>
|
|
3645
|
-
<section
|
|
3646
|
-
class="pf-c-nav__subnav"
|
|
3647
|
-
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link1"
|
|
3648
|
-
>
|
|
3649
|
-
<ul class="pf-c-nav__list">
|
|
3650
|
-
<li class="pf-c-nav__item">
|
|
3651
|
-
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
3652
|
-
</li>
|
|
3653
|
-
<li class="pf-c-nav__item">
|
|
3654
|
-
<a
|
|
3655
|
-
href="#"
|
|
3656
|
-
class="pf-c-nav__link pf-m-current"
|
|
3657
|
-
aria-current="page"
|
|
3658
|
-
>Resource usage</a>
|
|
3659
|
-
</li>
|
|
3660
|
-
<li class="pf-c-nav__item">
|
|
3661
|
-
<a href="#" class="pf-c-nav__link">Hypervisors</a>
|
|
3662
|
-
</li>
|
|
3663
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
3664
|
-
|
|
3665
|
-
<li class="pf-c-nav__item">
|
|
3666
|
-
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
3667
|
-
</li>
|
|
3668
|
-
<li class="pf-c-nav__item">
|
|
3669
|
-
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
3670
|
-
</li>
|
|
3671
|
-
<li class="pf-c-nav__item">
|
|
3672
|
-
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
3673
|
-
</li>
|
|
3674
|
-
</ul>
|
|
3675
|
-
</section>
|
|
3676
|
-
</li>
|
|
3677
|
-
<li class="pf-c-nav__item pf-m-expandable">
|
|
3678
|
-
<button
|
|
3679
|
-
class="pf-c-nav__link"
|
|
3680
|
-
id="nav-horizontal-subnav-example-expandable-nav-link2"
|
|
3681
|
-
aria-expanded="false"
|
|
3682
|
-
>
|
|
3683
|
-
Policy
|
|
3684
|
-
<span class="pf-c-nav__toggle">
|
|
3685
|
-
<span class="pf-c-nav__toggle-icon">
|
|
3686
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3687
|
-
</span>
|
|
3688
|
-
</span>
|
|
3689
|
-
</button>
|
|
3690
|
-
<section
|
|
3691
|
-
class="pf-c-nav__subnav"
|
|
3692
|
-
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link2"
|
|
3693
|
-
hidden
|
|
3694
|
-
>
|
|
3695
|
-
<ul class="pf-c-nav__list">
|
|
3696
|
-
<li class="pf-c-nav__item">
|
|
3697
|
-
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
3698
|
-
</li>
|
|
3699
|
-
<li class="pf-c-nav__item">
|
|
3700
|
-
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
3701
|
-
</li>
|
|
3702
|
-
</ul>
|
|
3703
|
-
</section>
|
|
3704
|
-
</li>
|
|
3705
|
-
<li class="pf-c-nav__item pf-m-expandable">
|
|
3706
|
-
<button
|
|
3707
|
-
class="pf-c-nav__link"
|
|
3708
|
-
id="nav-horizontal-subnav-example-expandable-nav-link3"
|
|
3709
|
-
aria-expanded="false"
|
|
3710
|
-
>
|
|
3711
|
-
Authentication
|
|
3712
|
-
<span class="pf-c-nav__toggle">
|
|
3713
|
-
<span class="pf-c-nav__toggle-icon">
|
|
3714
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3715
|
-
</span>
|
|
3716
|
-
</span>
|
|
3717
|
-
</button>
|
|
3718
|
-
<section
|
|
3719
|
-
class="pf-c-nav__subnav"
|
|
3720
|
-
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link3"
|
|
3721
|
-
hidden
|
|
3722
|
-
>
|
|
3723
|
-
<ul class="pf-c-nav__list">
|
|
3724
|
-
<li class="pf-c-nav__item">
|
|
3725
|
-
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
3726
|
-
</li>
|
|
3727
|
-
<li class="pf-c-nav__item">
|
|
3728
|
-
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
3729
|
-
</li>
|
|
3730
|
-
</ul>
|
|
3731
|
-
</section>
|
|
3732
|
-
</li>
|
|
3733
|
-
</ul>
|
|
3734
|
-
</nav>
|
|
3735
|
-
</div>
|
|
3736
|
-
</div>
|
|
3737
|
-
<main
|
|
3738
|
-
class="pf-c-page__main"
|
|
3739
|
-
tabindex="-1"
|
|
3740
|
-
id="main-content-nav-horizontal-subnav-example"
|
|
3741
|
-
>
|
|
3742
|
-
<section class="pf-c-page__main-subnav pf-m-limit-width">
|
|
3743
|
-
<div class="pf-c-page__main-body">
|
|
3744
|
-
<nav
|
|
3745
|
-
class="pf-c-nav pf-m-horizontal-subnav pf-m-scrollable"
|
|
3746
|
-
aria-label="Local"
|
|
3747
|
-
>
|
|
3748
|
-
<button
|
|
3749
|
-
class="pf-c-nav__scroll-button"
|
|
3750
|
-
disabled
|
|
3751
|
-
aria-label="Scroll left"
|
|
3752
|
-
>
|
|
3753
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
3754
|
-
</button>
|
|
3755
|
-
<ul class="pf-c-nav__list">
|
|
3756
|
-
<li class="pf-c-nav__item">
|
|
3757
|
-
<a
|
|
3758
|
-
href="#"
|
|
3759
|
-
class="pf-c-nav__link pf-m-current"
|
|
3760
|
-
aria-current="page"
|
|
3761
|
-
>Horizontal subnav item 1</a>
|
|
3762
|
-
</li>
|
|
3763
|
-
<li class="pf-c-nav__item">
|
|
3764
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 2</a>
|
|
3765
|
-
</li>
|
|
3766
|
-
<li class="pf-c-nav__item">
|
|
3767
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 3</a>
|
|
3768
|
-
</li>
|
|
3769
|
-
<li class="pf-c-nav__item">
|
|
3770
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 4</a>
|
|
3771
|
-
</li>
|
|
3772
|
-
<li class="pf-c-nav__item">
|
|
3773
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 5</a>
|
|
3774
|
-
</li>
|
|
3775
|
-
</ul>
|
|
3776
|
-
<button class="pf-c-nav__scroll-button" aria-label="Scroll right">
|
|
3777
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3778
|
-
</button>
|
|
3779
|
-
</nav>
|
|
3780
|
-
</div>
|
|
3781
|
-
</section>
|
|
3782
|
-
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
3783
|
-
<div class="pf-c-page__main-body">
|
|
3784
|
-
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
3785
|
-
<ol class="pf-c-breadcrumb__list">
|
|
3786
|
-
<li class="pf-c-breadcrumb__item">
|
|
3787
|
-
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
3788
|
-
</li>
|
|
3789
|
-
<li class="pf-c-breadcrumb__item">
|
|
3790
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
3791
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3675
|
+
<main
|
|
3676
|
+
class="pf-c-page__main"
|
|
3677
|
+
tabindex="-1"
|
|
3678
|
+
id="main-content-nav-horizontal-example"
|
|
3679
|
+
>
|
|
3680
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
3681
|
+
<div class="pf-c-page__main-body">
|
|
3682
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
3683
|
+
<ol class="pf-c-breadcrumb__list">
|
|
3684
|
+
<li class="pf-c-breadcrumb__item">
|
|
3685
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
3686
|
+
</li>
|
|
3687
|
+
<li class="pf-c-breadcrumb__item">
|
|
3688
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
3689
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3792
3690
|
</span>
|
|
3793
3691
|
|
|
3794
3692
|
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
@@ -3823,7 +3721,7 @@ section: components
|
|
|
3823
3721
|
</div>
|
|
3824
3722
|
</div>
|
|
3825
3723
|
</section>
|
|
3826
|
-
<section class="pf-c-page__main-section pf-m-limit-width
|
|
3724
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
3827
3725
|
<div class="pf-c-page__main-body">
|
|
3828
3726
|
<div class="pf-l-gallery pf-m-gutter">
|
|
3829
3727
|
<div class="pf-c-card">
|
|
@@ -3859,32 +3757,22 @@ section: components
|
|
|
3859
3757
|
</div>
|
|
3860
3758
|
</div>
|
|
3861
3759
|
</section>
|
|
3862
|
-
<section
|
|
3863
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light"
|
|
3864
|
-
>
|
|
3865
|
-
<div class="pf-c-page__main-body">
|
|
3866
|
-
<p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
|
|
3867
|
-
</div>
|
|
3868
|
-
</section>
|
|
3869
3760
|
</main>
|
|
3870
3761
|
</div>
|
|
3871
3762
|
|
|
3872
3763
|
```
|
|
3873
3764
|
|
|
3874
|
-
### Horizontal
|
|
3765
|
+
### Horizontal subnav
|
|
3875
3766
|
|
|
3876
3767
|
```html isFullscreen
|
|
3877
|
-
<div class="pf-c-page" id="nav-horizontal-example">
|
|
3768
|
+
<div class="pf-c-page" id="nav-horizontal-subnav-example">
|
|
3878
3769
|
<div class="pf-c-skip-to-content">
|
|
3879
3770
|
<a
|
|
3880
3771
|
class="pf-c-button pf-m-primary"
|
|
3881
|
-
href="#main-content-nav-horizontal-example"
|
|
3772
|
+
href="#main-content-nav-horizontal-subnav-example"
|
|
3882
3773
|
>Skip to content</a>
|
|
3883
3774
|
</div>
|
|
3884
|
-
<header
|
|
3885
|
-
class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
|
|
3886
|
-
id="nav-horizontal-example-masthead"
|
|
3887
|
-
>
|
|
3775
|
+
<header class="pf-c-masthead" id="nav-horizontal-subnav-example-masthead">
|
|
3888
3776
|
<span class="pf-c-masthead__toggle">
|
|
3889
3777
|
<button
|
|
3890
3778
|
class="pf-c-button pf-m-plain"
|
|
@@ -3915,55 +3803,10 @@ section: components
|
|
|
3915
3803
|
<div class="pf-c-masthead__content">
|
|
3916
3804
|
<div
|
|
3917
3805
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
3918
|
-
id="nav-horizontal-example-masthead-toolbar"
|
|
3806
|
+
id="nav-horizontal-subnav-example-masthead-toolbar"
|
|
3919
3807
|
>
|
|
3920
3808
|
<div class="pf-c-toolbar__content">
|
|
3921
3809
|
<div class="pf-c-toolbar__content-section">
|
|
3922
|
-
<div
|
|
3923
|
-
class="pf-c-toolbar__item pf-m-overflow-container"
|
|
3924
|
-
style="--pf-c-toolbar__item--MinWidth: 18ch;"
|
|
3925
|
-
>
|
|
3926
|
-
<nav
|
|
3927
|
-
class="pf-c-nav pf-m-horizontal pf-m-scrollable"
|
|
3928
|
-
id="-horizontal-nav"
|
|
3929
|
-
aria-label="Global"
|
|
3930
|
-
>
|
|
3931
|
-
<button
|
|
3932
|
-
class="pf-c-nav__scroll-button"
|
|
3933
|
-
disabled
|
|
3934
|
-
aria-label="Scroll left"
|
|
3935
|
-
>
|
|
3936
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
3937
|
-
</button>
|
|
3938
|
-
<ul class="pf-c-nav__list">
|
|
3939
|
-
<li class="pf-c-nav__item">
|
|
3940
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
|
|
3941
|
-
</li>
|
|
3942
|
-
<li class="pf-c-nav__item">
|
|
3943
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 2</a>
|
|
3944
|
-
</li>
|
|
3945
|
-
<li class="pf-c-nav__item">
|
|
3946
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 3</a>
|
|
3947
|
-
</li>
|
|
3948
|
-
<li class="pf-c-nav__item">
|
|
3949
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 4</a>
|
|
3950
|
-
</li>
|
|
3951
|
-
<li class="pf-c-nav__item">
|
|
3952
|
-
<a
|
|
3953
|
-
href="#"
|
|
3954
|
-
class="pf-c-nav__link pf-m-current"
|
|
3955
|
-
aria-current="page"
|
|
3956
|
-
>Horizontal nav item 5</a>
|
|
3957
|
-
</li>
|
|
3958
|
-
</ul>
|
|
3959
|
-
<button
|
|
3960
|
-
class="pf-c-nav__scroll-button"
|
|
3961
|
-
aria-label="Scroll right"
|
|
3962
|
-
>
|
|
3963
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3964
|
-
</button>
|
|
3965
|
-
</nav>
|
|
3966
|
-
</div>
|
|
3967
3810
|
<div
|
|
3968
3811
|
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
3969
3812
|
>
|
|
@@ -3974,12 +3817,12 @@ section: components
|
|
|
3974
3817
|
<nav
|
|
3975
3818
|
class="pf-c-app-launcher"
|
|
3976
3819
|
aria-label="Application launcher"
|
|
3977
|
-
id="nav-horizontal-example-masthead-application-launcher"
|
|
3820
|
+
id="nav-horizontal-subnav-example-masthead-application-launcher"
|
|
3978
3821
|
>
|
|
3979
3822
|
<button
|
|
3980
3823
|
class="pf-c-app-launcher__toggle"
|
|
3981
3824
|
type="button"
|
|
3982
|
-
id="nav-horizontal-example-masthead-application-launcher-button"
|
|
3825
|
+
id="nav-horizontal-subnav-example-masthead-application-launcher-button"
|
|
3983
3826
|
aria-expanded="false"
|
|
3984
3827
|
aria-label="Application launcher"
|
|
3985
3828
|
>
|
|
@@ -4119,7 +3962,7 @@ section: components
|
|
|
4119
3962
|
<div class="pf-c-dropdown">
|
|
4120
3963
|
<button
|
|
4121
3964
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
4122
|
-
id="nav-horizontal-example-masthead-settings-button"
|
|
3965
|
+
id="nav-horizontal-subnav-example-masthead-settings-button"
|
|
4123
3966
|
aria-expanded="false"
|
|
4124
3967
|
type="button"
|
|
4125
3968
|
aria-label="Settings"
|
|
@@ -4128,7 +3971,7 @@ section: components
|
|
|
4128
3971
|
</button>
|
|
4129
3972
|
<ul
|
|
4130
3973
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
4131
|
-
aria-labelledby="nav-horizontal-example-masthead-settings-button"
|
|
3974
|
+
aria-labelledby="nav-horizontal-subnav-example-masthead-settings-button"
|
|
4132
3975
|
hidden
|
|
4133
3976
|
>
|
|
4134
3977
|
<li>
|
|
@@ -4150,7 +3993,7 @@ section: components
|
|
|
4150
3993
|
<div class="pf-c-dropdown">
|
|
4151
3994
|
<button
|
|
4152
3995
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
4153
|
-
id="nav-horizontal-example-masthead-help-button"
|
|
3996
|
+
id="nav-horizontal-subnav-example-masthead-help-button"
|
|
4154
3997
|
aria-expanded="false"
|
|
4155
3998
|
type="button"
|
|
4156
3999
|
aria-label="Help"
|
|
@@ -4159,7 +4002,7 @@ section: components
|
|
|
4159
4002
|
</button>
|
|
4160
4003
|
<ul
|
|
4161
4004
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
4162
|
-
aria-labelledby="nav-horizontal-example-masthead-help-button"
|
|
4005
|
+
aria-labelledby="nav-horizontal-subnav-example-masthead-help-button"
|
|
4163
4006
|
hidden
|
|
4164
4007
|
>
|
|
4165
4008
|
<li>
|
|
@@ -4659,7 +4502,7 @@ section: components
|
|
|
4659
4502
|
>
|
|
4660
4503
|
<button
|
|
4661
4504
|
class="pf-c-dropdown__toggle"
|
|
4662
|
-
id="nav-horizontal-example-masthead-profile-button"
|
|
4505
|
+
id="nav-horizontal-subnav-example-masthead-profile-button"
|
|
4663
4506
|
aria-expanded="false"
|
|
4664
4507
|
type="button"
|
|
4665
4508
|
>
|
|
@@ -4711,62 +4554,135 @@ section: components
|
|
|
4711
4554
|
</div>
|
|
4712
4555
|
</div>
|
|
4713
4556
|
</header>
|
|
4714
|
-
<
|
|
4715
|
-
class="pf-c-
|
|
4716
|
-
|
|
4717
|
-
|
|
4718
|
-
|
|
4719
|
-
|
|
4720
|
-
|
|
4721
|
-
<
|
|
4722
|
-
class="pf-c-
|
|
4723
|
-
|
|
4724
|
-
|
|
4725
|
-
|
|
4726
|
-
|
|
4727
|
-
|
|
4728
|
-
|
|
4729
|
-
|
|
4730
|
-
|
|
4731
|
-
|
|
4732
|
-
|
|
4733
|
-
|
|
4734
|
-
|
|
4735
|
-
|
|
4736
|
-
|
|
4737
|
-
|
|
4738
|
-
|
|
4739
|
-
|
|
4740
|
-
|
|
4741
|
-
|
|
4742
|
-
|
|
4743
|
-
|
|
4744
|
-
|
|
4745
|
-
|
|
4746
|
-
|
|
4747
|
-
|
|
4748
|
-
|
|
4749
|
-
|
|
4750
|
-
|
|
4751
|
-
|
|
4752
|
-
|
|
4753
|
-
|
|
4754
|
-
|
|
4755
|
-
|
|
4756
|
-
|
|
4757
|
-
|
|
4758
|
-
|
|
4759
|
-
|
|
4760
|
-
|
|
4761
|
-
|
|
4762
|
-
|
|
4763
|
-
|
|
4764
|
-
|
|
4765
|
-
</
|
|
4766
|
-
|
|
4767
|
-
|
|
4768
|
-
|
|
4769
|
-
|
|
4557
|
+
<div class="pf-c-page__sidebar">
|
|
4558
|
+
<div class="pf-c-page__sidebar-body">
|
|
4559
|
+
<nav
|
|
4560
|
+
class="pf-c-nav"
|
|
4561
|
+
id="nav-horizontal-subnav-example-expandable-nav"
|
|
4562
|
+
aria-label="Global"
|
|
4563
|
+
>
|
|
4564
|
+
<ul class="pf-c-nav__list">
|
|
4565
|
+
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
|
|
4566
|
+
<button
|
|
4567
|
+
class="pf-c-nav__link"
|
|
4568
|
+
id="nav-horizontal-subnav-example-expandable-nav-link1"
|
|
4569
|
+
aria-expanded="true"
|
|
4570
|
+
>
|
|
4571
|
+
System panel
|
|
4572
|
+
<span class="pf-c-nav__toggle">
|
|
4573
|
+
<span class="pf-c-nav__toggle-icon">
|
|
4574
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4575
|
+
</span>
|
|
4576
|
+
</span>
|
|
4577
|
+
</button>
|
|
4578
|
+
<section
|
|
4579
|
+
class="pf-c-nav__subnav"
|
|
4580
|
+
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link1"
|
|
4581
|
+
>
|
|
4582
|
+
<ul class="pf-c-nav__list">
|
|
4583
|
+
<li class="pf-c-nav__item">
|
|
4584
|
+
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
4585
|
+
</li>
|
|
4586
|
+
<li class="pf-c-nav__item">
|
|
4587
|
+
<a
|
|
4588
|
+
href="#"
|
|
4589
|
+
class="pf-c-nav__link pf-m-current"
|
|
4590
|
+
aria-current="page"
|
|
4591
|
+
>Resource usage</a>
|
|
4592
|
+
</li>
|
|
4593
|
+
<li class="pf-c-nav__item">
|
|
4594
|
+
<a href="#" class="pf-c-nav__link">Hypervisors</a>
|
|
4595
|
+
</li>
|
|
4596
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
4597
|
+
|
|
4598
|
+
<li class="pf-c-nav__item">
|
|
4599
|
+
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
4600
|
+
</li>
|
|
4601
|
+
<li class="pf-c-nav__item">
|
|
4602
|
+
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
4603
|
+
</li>
|
|
4604
|
+
<li class="pf-c-nav__item">
|
|
4605
|
+
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
4606
|
+
</li>
|
|
4607
|
+
</ul>
|
|
4608
|
+
</section>
|
|
4609
|
+
</li>
|
|
4610
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
4611
|
+
<button
|
|
4612
|
+
class="pf-c-nav__link"
|
|
4613
|
+
id="nav-horizontal-subnav-example-expandable-nav-link2"
|
|
4614
|
+
aria-expanded="false"
|
|
4615
|
+
>
|
|
4616
|
+
Policy
|
|
4617
|
+
<span class="pf-c-nav__toggle">
|
|
4618
|
+
<span class="pf-c-nav__toggle-icon">
|
|
4619
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4620
|
+
</span>
|
|
4621
|
+
</span>
|
|
4622
|
+
</button>
|
|
4623
|
+
<section
|
|
4624
|
+
class="pf-c-nav__subnav"
|
|
4625
|
+
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link2"
|
|
4626
|
+
hidden
|
|
4627
|
+
>
|
|
4628
|
+
<ul class="pf-c-nav__list">
|
|
4629
|
+
<li class="pf-c-nav__item">
|
|
4630
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
4631
|
+
</li>
|
|
4632
|
+
<li class="pf-c-nav__item">
|
|
4633
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
4634
|
+
</li>
|
|
4635
|
+
</ul>
|
|
4636
|
+
</section>
|
|
4637
|
+
</li>
|
|
4638
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
4639
|
+
<button
|
|
4640
|
+
class="pf-c-nav__link"
|
|
4641
|
+
id="nav-horizontal-subnav-example-expandable-nav-link3"
|
|
4642
|
+
aria-expanded="false"
|
|
4643
|
+
>
|
|
4644
|
+
Authentication
|
|
4645
|
+
<span class="pf-c-nav__toggle">
|
|
4646
|
+
<span class="pf-c-nav__toggle-icon">
|
|
4647
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4648
|
+
</span>
|
|
4649
|
+
</span>
|
|
4650
|
+
</button>
|
|
4651
|
+
<section
|
|
4652
|
+
class="pf-c-nav__subnav"
|
|
4653
|
+
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link3"
|
|
4654
|
+
hidden
|
|
4655
|
+
>
|
|
4656
|
+
<ul class="pf-c-nav__list">
|
|
4657
|
+
<li class="pf-c-nav__item">
|
|
4658
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
4659
|
+
</li>
|
|
4660
|
+
<li class="pf-c-nav__item">
|
|
4661
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
4662
|
+
</li>
|
|
4663
|
+
</ul>
|
|
4664
|
+
</section>
|
|
4665
|
+
</li>
|
|
4666
|
+
</ul>
|
|
4667
|
+
</nav>
|
|
4668
|
+
</div>
|
|
4669
|
+
</div>
|
|
4670
|
+
<main
|
|
4671
|
+
class="pf-c-page__main"
|
|
4672
|
+
tabindex="-1"
|
|
4673
|
+
id="main-content-nav-horizontal-subnav-example"
|
|
4674
|
+
>
|
|
4675
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
4676
|
+
<div class="pf-c-page__main-body">
|
|
4677
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
4678
|
+
<ol class="pf-c-breadcrumb__list">
|
|
4679
|
+
<li class="pf-c-breadcrumb__item">
|
|
4680
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
4681
|
+
</li>
|
|
4682
|
+
<li class="pf-c-breadcrumb__item">
|
|
4683
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
4684
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4685
|
+
</span>
|
|
4770
4686
|
|
|
4771
4687
|
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
4772
4688
|
</li>
|
|
@@ -4800,7 +4716,7 @@ section: components
|
|
|
4800
4716
|
</div>
|
|
4801
4717
|
</div>
|
|
4802
4718
|
</section>
|
|
4803
|
-
<section class="pf-c-page__main-section pf-m-limit-width
|
|
4719
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
4804
4720
|
<div class="pf-c-page__main-body">
|
|
4805
4721
|
<div class="pf-l-gallery pf-m-gutter">
|
|
4806
4722
|
<div class="pf-c-card">
|
|
@@ -4841,17 +4757,20 @@ section: components
|
|
|
4841
4757
|
|
|
4842
4758
|
```
|
|
4843
4759
|
|
|
4844
|
-
###
|
|
4760
|
+
### Horizontal nav with horizontal subnav
|
|
4845
4761
|
|
|
4846
4762
|
```html isFullscreen
|
|
4847
|
-
<div class="pf-c-page" id="nav-
|
|
4763
|
+
<div class="pf-c-page" id="nav-horizontal-example">
|
|
4848
4764
|
<div class="pf-c-skip-to-content">
|
|
4849
4765
|
<a
|
|
4850
4766
|
class="pf-c-button pf-m-primary"
|
|
4851
|
-
href="#main-content-nav-
|
|
4767
|
+
href="#main-content-nav-horizontal-example"
|
|
4852
4768
|
>Skip to content</a>
|
|
4853
4769
|
</div>
|
|
4854
|
-
<header
|
|
4770
|
+
<header
|
|
4771
|
+
class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
|
|
4772
|
+
id="nav-horizontal-example-masthead"
|
|
4773
|
+
>
|
|
4855
4774
|
<span class="pf-c-masthead__toggle">
|
|
4856
4775
|
<button
|
|
4857
4776
|
class="pf-c-button pf-m-plain"
|
|
@@ -4882,10 +4801,55 @@ section: components
|
|
|
4882
4801
|
<div class="pf-c-masthead__content">
|
|
4883
4802
|
<div
|
|
4884
4803
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
4885
|
-
id="nav-
|
|
4804
|
+
id="nav-horizontal-example-masthead-toolbar"
|
|
4886
4805
|
>
|
|
4887
4806
|
<div class="pf-c-toolbar__content">
|
|
4888
4807
|
<div class="pf-c-toolbar__content-section">
|
|
4808
|
+
<div
|
|
4809
|
+
class="pf-c-toolbar__item pf-m-overflow-container"
|
|
4810
|
+
style="--pf-c-toolbar__item--MinWidth: 18ch;"
|
|
4811
|
+
>
|
|
4812
|
+
<nav
|
|
4813
|
+
class="pf-c-nav pf-m-horizontal pf-m-scrollable"
|
|
4814
|
+
id="-horizontal-nav"
|
|
4815
|
+
aria-label="Global"
|
|
4816
|
+
>
|
|
4817
|
+
<button
|
|
4818
|
+
class="pf-c-nav__scroll-button"
|
|
4819
|
+
disabled
|
|
4820
|
+
aria-label="Scroll left"
|
|
4821
|
+
>
|
|
4822
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
4823
|
+
</button>
|
|
4824
|
+
<ul class="pf-c-nav__list">
|
|
4825
|
+
<li class="pf-c-nav__item">
|
|
4826
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
|
|
4827
|
+
</li>
|
|
4828
|
+
<li class="pf-c-nav__item">
|
|
4829
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 2</a>
|
|
4830
|
+
</li>
|
|
4831
|
+
<li class="pf-c-nav__item">
|
|
4832
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 3</a>
|
|
4833
|
+
</li>
|
|
4834
|
+
<li class="pf-c-nav__item">
|
|
4835
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 4</a>
|
|
4836
|
+
</li>
|
|
4837
|
+
<li class="pf-c-nav__item">
|
|
4838
|
+
<a
|
|
4839
|
+
href="#"
|
|
4840
|
+
class="pf-c-nav__link pf-m-current"
|
|
4841
|
+
aria-current="page"
|
|
4842
|
+
>Horizontal nav item 5</a>
|
|
4843
|
+
</li>
|
|
4844
|
+
</ul>
|
|
4845
|
+
<button
|
|
4846
|
+
class="pf-c-nav__scroll-button"
|
|
4847
|
+
aria-label="Scroll right"
|
|
4848
|
+
>
|
|
4849
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4850
|
+
</button>
|
|
4851
|
+
</nav>
|
|
4852
|
+
</div>
|
|
4889
4853
|
<div
|
|
4890
4854
|
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
4891
4855
|
>
|
|
@@ -4896,12 +4860,12 @@ section: components
|
|
|
4896
4860
|
<nav
|
|
4897
4861
|
class="pf-c-app-launcher"
|
|
4898
4862
|
aria-label="Application launcher"
|
|
4899
|
-
id="nav-
|
|
4863
|
+
id="nav-horizontal-example-masthead-application-launcher"
|
|
4900
4864
|
>
|
|
4901
4865
|
<button
|
|
4902
4866
|
class="pf-c-app-launcher__toggle"
|
|
4903
4867
|
type="button"
|
|
4904
|
-
id="nav-
|
|
4868
|
+
id="nav-horizontal-example-masthead-application-launcher-button"
|
|
4905
4869
|
aria-expanded="false"
|
|
4906
4870
|
aria-label="Application launcher"
|
|
4907
4871
|
>
|
|
@@ -5041,7 +5005,7 @@ section: components
|
|
|
5041
5005
|
<div class="pf-c-dropdown">
|
|
5042
5006
|
<button
|
|
5043
5007
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
5044
|
-
id="nav-
|
|
5008
|
+
id="nav-horizontal-example-masthead-settings-button"
|
|
5045
5009
|
aria-expanded="false"
|
|
5046
5010
|
type="button"
|
|
5047
5011
|
aria-label="Settings"
|
|
@@ -5050,7 +5014,7 @@ section: components
|
|
|
5050
5014
|
</button>
|
|
5051
5015
|
<ul
|
|
5052
5016
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
5053
|
-
aria-labelledby="nav-
|
|
5017
|
+
aria-labelledby="nav-horizontal-example-masthead-settings-button"
|
|
5054
5018
|
hidden
|
|
5055
5019
|
>
|
|
5056
5020
|
<li>
|
|
@@ -5072,7 +5036,7 @@ section: components
|
|
|
5072
5036
|
<div class="pf-c-dropdown">
|
|
5073
5037
|
<button
|
|
5074
5038
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
5075
|
-
id="nav-
|
|
5039
|
+
id="nav-horizontal-example-masthead-help-button"
|
|
5076
5040
|
aria-expanded="false"
|
|
5077
5041
|
type="button"
|
|
5078
5042
|
aria-label="Help"
|
|
@@ -5081,7 +5045,7 @@ section: components
|
|
|
5081
5045
|
</button>
|
|
5082
5046
|
<ul
|
|
5083
5047
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
5084
|
-
aria-labelledby="nav-
|
|
5048
|
+
aria-labelledby="nav-horizontal-example-masthead-help-button"
|
|
5085
5049
|
hidden
|
|
5086
5050
|
>
|
|
5087
5051
|
<li>
|
|
@@ -5581,180 +5545,67 @@ section: components
|
|
|
5581
5545
|
>
|
|
5582
5546
|
<button
|
|
5583
5547
|
class="pf-c-dropdown__toggle"
|
|
5584
|
-
id="nav-
|
|
5548
|
+
id="nav-horizontal-example-masthead-profile-button"
|
|
5585
5549
|
aria-expanded="false"
|
|
5586
5550
|
type="button"
|
|
5587
5551
|
>
|
|
5588
5552
|
<span class="pf-c-dropdown__toggle-image">
|
|
5589
5553
|
<img
|
|
5590
5554
|
class="pf-c-avatar"
|
|
5591
|
-
alt="Avatar image"
|
|
5592
|
-
src="/assets/images/img_avatar-light.svg"
|
|
5593
|
-
/>
|
|
5594
|
-
</span>
|
|
5595
|
-
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
5596
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
5597
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
5598
|
-
</span>
|
|
5599
|
-
</button>
|
|
5600
|
-
<div class="pf-c-dropdown__menu" hidden>
|
|
5601
|
-
<section class="pf-c-dropdown__group">
|
|
5602
|
-
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5603
|
-
<div class="pf-u-font-size-sm">Account number:</div>
|
|
5604
|
-
<div>123456789</div>
|
|
5605
|
-
</div>
|
|
5606
|
-
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5607
|
-
<div class="pf-u-font-size-sm">Username:</div>
|
|
5608
|
-
<div>mshaksho@redhat.com</div>
|
|
5609
|
-
</div>
|
|
5610
|
-
</section>
|
|
5611
|
-
<hr class="pf-c-divider" />
|
|
5612
|
-
<section class="pf-c-dropdown__group">
|
|
5613
|
-
<ul>
|
|
5614
|
-
<li>
|
|
5615
|
-
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
5616
|
-
</li>
|
|
5617
|
-
<li>
|
|
5618
|
-
<a
|
|
5619
|
-
class="pf-c-dropdown__menu-item"
|
|
5620
|
-
href="#"
|
|
5621
|
-
>User management</a>
|
|
5622
|
-
</li>
|
|
5623
|
-
<li>
|
|
5624
|
-
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
5625
|
-
</li>
|
|
5626
|
-
</ul>
|
|
5627
|
-
</section>
|
|
5628
|
-
</div>
|
|
5629
|
-
</div>
|
|
5630
|
-
</div>
|
|
5631
|
-
</div>
|
|
5632
|
-
</div>
|
|
5633
|
-
</div>
|
|
5634
|
-
</div>
|
|
5635
|
-
</header>
|
|
5636
|
-
<div class="pf-c-page__sidebar">
|
|
5637
|
-
<div class="pf-c-page__sidebar-body">
|
|
5638
|
-
<nav
|
|
5639
|
-
class="pf-c-nav"
|
|
5640
|
-
id="nav-legacy-teriary-example-expandable-nav"
|
|
5641
|
-
aria-label="Global"
|
|
5642
|
-
>
|
|
5643
|
-
<ul class="pf-c-nav__list">
|
|
5644
|
-
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
|
|
5645
|
-
<button
|
|
5646
|
-
class="pf-c-nav__link"
|
|
5647
|
-
id="nav-legacy-teriary-example-expandable-nav-link1"
|
|
5648
|
-
aria-expanded="true"
|
|
5649
|
-
>
|
|
5650
|
-
System panel
|
|
5651
|
-
<span class="pf-c-nav__toggle">
|
|
5652
|
-
<span class="pf-c-nav__toggle-icon">
|
|
5653
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5654
|
-
</span>
|
|
5655
|
-
</span>
|
|
5656
|
-
</button>
|
|
5657
|
-
<section
|
|
5658
|
-
class="pf-c-nav__subnav"
|
|
5659
|
-
aria-labelledby="nav-legacy-teriary-example-expandable-nav-link1"
|
|
5660
|
-
>
|
|
5661
|
-
<ul class="pf-c-nav__list">
|
|
5662
|
-
<li class="pf-c-nav__item">
|
|
5663
|
-
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
5664
|
-
</li>
|
|
5665
|
-
<li class="pf-c-nav__item">
|
|
5666
|
-
<a
|
|
5667
|
-
href="#"
|
|
5668
|
-
class="pf-c-nav__link pf-m-current"
|
|
5669
|
-
aria-current="page"
|
|
5670
|
-
>Resource usage</a>
|
|
5671
|
-
</li>
|
|
5672
|
-
<li class="pf-c-nav__item">
|
|
5673
|
-
<a href="#" class="pf-c-nav__link">Hypervisors</a>
|
|
5674
|
-
</li>
|
|
5675
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
5676
|
-
|
|
5677
|
-
<li class="pf-c-nav__item">
|
|
5678
|
-
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
5679
|
-
</li>
|
|
5680
|
-
<li class="pf-c-nav__item">
|
|
5681
|
-
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
5682
|
-
</li>
|
|
5683
|
-
<li class="pf-c-nav__item">
|
|
5684
|
-
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
5685
|
-
</li>
|
|
5686
|
-
</ul>
|
|
5687
|
-
</section>
|
|
5688
|
-
</li>
|
|
5689
|
-
<li class="pf-c-nav__item pf-m-expandable">
|
|
5690
|
-
<button
|
|
5691
|
-
class="pf-c-nav__link"
|
|
5692
|
-
id="nav-legacy-teriary-example-expandable-nav-link2"
|
|
5693
|
-
aria-expanded="false"
|
|
5694
|
-
>
|
|
5695
|
-
Policy
|
|
5696
|
-
<span class="pf-c-nav__toggle">
|
|
5697
|
-
<span class="pf-c-nav__toggle-icon">
|
|
5698
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5699
|
-
</span>
|
|
5700
|
-
</span>
|
|
5701
|
-
</button>
|
|
5702
|
-
<section
|
|
5703
|
-
class="pf-c-nav__subnav"
|
|
5704
|
-
aria-labelledby="nav-legacy-teriary-example-expandable-nav-link2"
|
|
5705
|
-
hidden
|
|
5706
|
-
>
|
|
5707
|
-
<ul class="pf-c-nav__list">
|
|
5708
|
-
<li class="pf-c-nav__item">
|
|
5709
|
-
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
5710
|
-
</li>
|
|
5711
|
-
<li class="pf-c-nav__item">
|
|
5712
|
-
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
5713
|
-
</li>
|
|
5714
|
-
</ul>
|
|
5715
|
-
</section>
|
|
5716
|
-
</li>
|
|
5717
|
-
<li class="pf-c-nav__item pf-m-expandable">
|
|
5718
|
-
<button
|
|
5719
|
-
class="pf-c-nav__link"
|
|
5720
|
-
id="nav-legacy-teriary-example-expandable-nav-link3"
|
|
5721
|
-
aria-expanded="false"
|
|
5722
|
-
>
|
|
5723
|
-
Authentication
|
|
5724
|
-
<span class="pf-c-nav__toggle">
|
|
5725
|
-
<span class="pf-c-nav__toggle-icon">
|
|
5726
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5727
|
-
</span>
|
|
5728
|
-
</span>
|
|
5729
|
-
</button>
|
|
5730
|
-
<section
|
|
5731
|
-
class="pf-c-nav__subnav"
|
|
5732
|
-
aria-labelledby="nav-legacy-teriary-example-expandable-nav-link3"
|
|
5733
|
-
hidden
|
|
5734
|
-
>
|
|
5735
|
-
<ul class="pf-c-nav__list">
|
|
5736
|
-
<li class="pf-c-nav__item">
|
|
5737
|
-
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
5738
|
-
</li>
|
|
5739
|
-
<li class="pf-c-nav__item">
|
|
5740
|
-
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
5741
|
-
</li>
|
|
5742
|
-
</ul>
|
|
5743
|
-
</section>
|
|
5744
|
-
</li>
|
|
5745
|
-
</ul>
|
|
5746
|
-
</nav>
|
|
5555
|
+
alt="Avatar image"
|
|
5556
|
+
src="/assets/images/img_avatar-light.svg"
|
|
5557
|
+
/>
|
|
5558
|
+
</span>
|
|
5559
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
5560
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
5561
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
5562
|
+
</span>
|
|
5563
|
+
</button>
|
|
5564
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
5565
|
+
<section class="pf-c-dropdown__group">
|
|
5566
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5567
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
5568
|
+
<div>123456789</div>
|
|
5569
|
+
</div>
|
|
5570
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5571
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
5572
|
+
<div>mshaksho@redhat.com</div>
|
|
5573
|
+
</div>
|
|
5574
|
+
</section>
|
|
5575
|
+
<hr class="pf-c-divider" />
|
|
5576
|
+
<section class="pf-c-dropdown__group">
|
|
5577
|
+
<ul>
|
|
5578
|
+
<li>
|
|
5579
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
5580
|
+
</li>
|
|
5581
|
+
<li>
|
|
5582
|
+
<a
|
|
5583
|
+
class="pf-c-dropdown__menu-item"
|
|
5584
|
+
href="#"
|
|
5585
|
+
>User management</a>
|
|
5586
|
+
</li>
|
|
5587
|
+
<li>
|
|
5588
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
5589
|
+
</li>
|
|
5590
|
+
</ul>
|
|
5591
|
+
</section>
|
|
5592
|
+
</div>
|
|
5593
|
+
</div>
|
|
5594
|
+
</div>
|
|
5595
|
+
</div>
|
|
5596
|
+
</div>
|
|
5597
|
+
</div>
|
|
5747
5598
|
</div>
|
|
5748
|
-
</
|
|
5599
|
+
</header>
|
|
5749
5600
|
<main
|
|
5750
5601
|
class="pf-c-page__main"
|
|
5751
5602
|
tabindex="-1"
|
|
5752
|
-
id="main-content-nav-
|
|
5603
|
+
id="main-content-nav-horizontal-example"
|
|
5753
5604
|
>
|
|
5754
|
-
<section class="pf-c-page__main-
|
|
5605
|
+
<section class="pf-c-page__main-subnav pf-m-limit-width">
|
|
5755
5606
|
<div class="pf-c-page__main-body">
|
|
5756
5607
|
<nav
|
|
5757
|
-
class="pf-c-nav pf-m-horizontal
|
|
5608
|
+
class="pf-c-nav pf-m-horizontal-subnav pf-m-scrollable"
|
|
5758
5609
|
aria-label="Local"
|
|
5759
5610
|
>
|
|
5760
5611
|
<button
|
|
@@ -5770,19 +5621,19 @@ section: components
|
|
|
5770
5621
|
href="#"
|
|
5771
5622
|
class="pf-c-nav__link pf-m-current"
|
|
5772
5623
|
aria-current="page"
|
|
5773
|
-
>
|
|
5624
|
+
>Horizontal subnav item 1</a>
|
|
5774
5625
|
</li>
|
|
5775
5626
|
<li class="pf-c-nav__item">
|
|
5776
|
-
<a href="#" class="pf-c-nav__link">
|
|
5627
|
+
<a href="#" class="pf-c-nav__link">Horizontal subnav item 2</a>
|
|
5777
5628
|
</li>
|
|
5778
5629
|
<li class="pf-c-nav__item">
|
|
5779
|
-
<a href="#" class="pf-c-nav__link">
|
|
5630
|
+
<a href="#" class="pf-c-nav__link">Horizontal subnav item 3</a>
|
|
5780
5631
|
</li>
|
|
5781
5632
|
<li class="pf-c-nav__item">
|
|
5782
|
-
<a href="#" class="pf-c-nav__link">
|
|
5633
|
+
<a href="#" class="pf-c-nav__link">Horizontal subnav item 4</a>
|
|
5783
5634
|
</li>
|
|
5784
5635
|
<li class="pf-c-nav__item">
|
|
5785
|
-
<a href="#" class="pf-c-nav__link">
|
|
5636
|
+
<a href="#" class="pf-c-nav__link">Horizontal subnav item 5</a>
|
|
5786
5637
|
</li>
|
|
5787
5638
|
</ul>
|
|
5788
5639
|
<button class="pf-c-nav__scroll-button" aria-label="Scroll right">
|
|
@@ -5835,7 +5686,7 @@ section: components
|
|
|
5835
5686
|
</div>
|
|
5836
5687
|
</div>
|
|
5837
5688
|
</section>
|
|
5838
|
-
<section class="pf-c-page__main-section pf-m-limit-width
|
|
5689
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
5839
5690
|
<div class="pf-c-page__main-body">
|
|
5840
5691
|
<div class="pf-l-gallery pf-m-gutter">
|
|
5841
5692
|
<div class="pf-c-card">
|
|
@@ -5876,17 +5727,17 @@ section: components
|
|
|
5876
5727
|
|
|
5877
5728
|
```
|
|
5878
5729
|
|
|
5879
|
-
###
|
|
5730
|
+
### Legacy tertiary nav
|
|
5880
5731
|
|
|
5881
5732
|
```html isFullscreen
|
|
5882
|
-
<div class="pf-c-page" id="nav-
|
|
5733
|
+
<div class="pf-c-page" id="nav-legacy-teriary-example">
|
|
5883
5734
|
<div class="pf-c-skip-to-content">
|
|
5884
5735
|
<a
|
|
5885
5736
|
class="pf-c-button pf-m-primary"
|
|
5886
|
-
href="#main-content-nav-
|
|
5737
|
+
href="#main-content-nav-legacy-teriary-example"
|
|
5887
5738
|
>Skip to content</a>
|
|
5888
5739
|
</div>
|
|
5889
|
-
<header class="pf-c-masthead" id="nav-
|
|
5740
|
+
<header class="pf-c-masthead" id="nav-legacy-teriary-example-masthead">
|
|
5890
5741
|
<span class="pf-c-masthead__toggle">
|
|
5891
5742
|
<button
|
|
5892
5743
|
class="pf-c-button pf-m-plain"
|
|
@@ -5917,7 +5768,7 @@ section: components
|
|
|
5917
5768
|
<div class="pf-c-masthead__content">
|
|
5918
5769
|
<div
|
|
5919
5770
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
5920
|
-
id="nav-
|
|
5771
|
+
id="nav-legacy-teriary-example-masthead-toolbar"
|
|
5921
5772
|
>
|
|
5922
5773
|
<div class="pf-c-toolbar__content">
|
|
5923
5774
|
<div class="pf-c-toolbar__content-section">
|
|
@@ -5931,12 +5782,12 @@ section: components
|
|
|
5931
5782
|
<nav
|
|
5932
5783
|
class="pf-c-app-launcher"
|
|
5933
5784
|
aria-label="Application launcher"
|
|
5934
|
-
id="nav-
|
|
5785
|
+
id="nav-legacy-teriary-example-masthead-application-launcher"
|
|
5935
5786
|
>
|
|
5936
5787
|
<button
|
|
5937
5788
|
class="pf-c-app-launcher__toggle"
|
|
5938
5789
|
type="button"
|
|
5939
|
-
id="nav-
|
|
5790
|
+
id="nav-legacy-teriary-example-masthead-application-launcher-button"
|
|
5940
5791
|
aria-expanded="false"
|
|
5941
5792
|
aria-label="Application launcher"
|
|
5942
5793
|
>
|
|
@@ -6076,7 +5927,7 @@ section: components
|
|
|
6076
5927
|
<div class="pf-c-dropdown">
|
|
6077
5928
|
<button
|
|
6078
5929
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
6079
|
-
id="nav-
|
|
5930
|
+
id="nav-legacy-teriary-example-masthead-settings-button"
|
|
6080
5931
|
aria-expanded="false"
|
|
6081
5932
|
type="button"
|
|
6082
5933
|
aria-label="Settings"
|
|
@@ -6085,7 +5936,7 @@ section: components
|
|
|
6085
5936
|
</button>
|
|
6086
5937
|
<ul
|
|
6087
5938
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
6088
|
-
aria-labelledby="nav-
|
|
5939
|
+
aria-labelledby="nav-legacy-teriary-example-masthead-settings-button"
|
|
6089
5940
|
hidden
|
|
6090
5941
|
>
|
|
6091
5942
|
<li>
|
|
@@ -6107,7 +5958,7 @@ section: components
|
|
|
6107
5958
|
<div class="pf-c-dropdown">
|
|
6108
5959
|
<button
|
|
6109
5960
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
6110
|
-
id="nav-
|
|
5961
|
+
id="nav-legacy-teriary-example-masthead-help-button"
|
|
6111
5962
|
aria-expanded="false"
|
|
6112
5963
|
type="button"
|
|
6113
5964
|
aria-label="Help"
|
|
@@ -6116,7 +5967,7 @@ section: components
|
|
|
6116
5967
|
</button>
|
|
6117
5968
|
<ul
|
|
6118
5969
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
6119
|
-
aria-labelledby="nav-
|
|
5970
|
+
aria-labelledby="nav-legacy-teriary-example-masthead-help-button"
|
|
6120
5971
|
hidden
|
|
6121
5972
|
>
|
|
6122
5973
|
<li>
|
|
@@ -6616,7 +6467,7 @@ section: components
|
|
|
6616
6467
|
>
|
|
6617
6468
|
<button
|
|
6618
6469
|
class="pf-c-dropdown__toggle"
|
|
6619
|
-
id="nav-
|
|
6470
|
+
id="nav-legacy-teriary-example-masthead-profile-button"
|
|
6620
6471
|
aria-expanded="false"
|
|
6621
6472
|
type="button"
|
|
6622
6473
|
>
|
|
@@ -6672,58 +6523,160 @@ section: components
|
|
|
6672
6523
|
<div class="pf-c-page__sidebar-body">
|
|
6673
6524
|
<nav
|
|
6674
6525
|
class="pf-c-nav"
|
|
6675
|
-
id="nav-
|
|
6526
|
+
id="nav-legacy-teriary-example-expandable-nav"
|
|
6676
6527
|
aria-label="Global"
|
|
6677
6528
|
>
|
|
6678
|
-
<
|
|
6679
|
-
<
|
|
6529
|
+
<ul class="pf-c-nav__list">
|
|
6530
|
+
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
|
|
6531
|
+
<button
|
|
6532
|
+
class="pf-c-nav__link"
|
|
6533
|
+
id="nav-legacy-teriary-example-expandable-nav-link1"
|
|
6534
|
+
aria-expanded="true"
|
|
6535
|
+
>
|
|
6536
|
+
System panel
|
|
6537
|
+
<span class="pf-c-nav__toggle">
|
|
6538
|
+
<span class="pf-c-nav__toggle-icon">
|
|
6539
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
6540
|
+
</span>
|
|
6541
|
+
</span>
|
|
6542
|
+
</button>
|
|
6543
|
+
<section
|
|
6544
|
+
class="pf-c-nav__subnav"
|
|
6545
|
+
aria-labelledby="nav-legacy-teriary-example-expandable-nav-link1"
|
|
6546
|
+
>
|
|
6547
|
+
<ul class="pf-c-nav__list">
|
|
6548
|
+
<li class="pf-c-nav__item">
|
|
6549
|
+
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
6550
|
+
</li>
|
|
6551
|
+
<li class="pf-c-nav__item">
|
|
6552
|
+
<a
|
|
6553
|
+
href="#"
|
|
6554
|
+
class="pf-c-nav__link pf-m-current"
|
|
6555
|
+
aria-current="page"
|
|
6556
|
+
>Resource usage</a>
|
|
6557
|
+
</li>
|
|
6558
|
+
<li class="pf-c-nav__item">
|
|
6559
|
+
<a href="#" class="pf-c-nav__link">Hypervisors</a>
|
|
6560
|
+
</li>
|
|
6561
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
6562
|
+
|
|
6563
|
+
<li class="pf-c-nav__item">
|
|
6564
|
+
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
6565
|
+
</li>
|
|
6566
|
+
<li class="pf-c-nav__item">
|
|
6567
|
+
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
6568
|
+
</li>
|
|
6569
|
+
<li class="pf-c-nav__item">
|
|
6570
|
+
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
6571
|
+
</li>
|
|
6572
|
+
</ul>
|
|
6573
|
+
</section>
|
|
6574
|
+
</li>
|
|
6575
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
6576
|
+
<button
|
|
6577
|
+
class="pf-c-nav__link"
|
|
6578
|
+
id="nav-legacy-teriary-example-expandable-nav-link2"
|
|
6579
|
+
aria-expanded="false"
|
|
6580
|
+
>
|
|
6581
|
+
Policy
|
|
6582
|
+
<span class="pf-c-nav__toggle">
|
|
6583
|
+
<span class="pf-c-nav__toggle-icon">
|
|
6584
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
6585
|
+
</span>
|
|
6586
|
+
</span>
|
|
6587
|
+
</button>
|
|
6588
|
+
<section
|
|
6589
|
+
class="pf-c-nav__subnav"
|
|
6590
|
+
aria-labelledby="nav-legacy-teriary-example-expandable-nav-link2"
|
|
6591
|
+
hidden
|
|
6592
|
+
>
|
|
6593
|
+
<ul class="pf-c-nav__list">
|
|
6594
|
+
<li class="pf-c-nav__item">
|
|
6595
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
6596
|
+
</li>
|
|
6597
|
+
<li class="pf-c-nav__item">
|
|
6598
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
6599
|
+
</li>
|
|
6600
|
+
</ul>
|
|
6601
|
+
</section>
|
|
6602
|
+
</li>
|
|
6603
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
6604
|
+
<button
|
|
6605
|
+
class="pf-c-nav__link"
|
|
6606
|
+
id="nav-legacy-teriary-example-expandable-nav-link3"
|
|
6607
|
+
aria-expanded="false"
|
|
6608
|
+
>
|
|
6609
|
+
Authentication
|
|
6610
|
+
<span class="pf-c-nav__toggle">
|
|
6611
|
+
<span class="pf-c-nav__toggle-icon">
|
|
6612
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
6613
|
+
</span>
|
|
6614
|
+
</span>
|
|
6615
|
+
</button>
|
|
6616
|
+
<section
|
|
6617
|
+
class="pf-c-nav__subnav"
|
|
6618
|
+
aria-labelledby="nav-legacy-teriary-example-expandable-nav-link3"
|
|
6619
|
+
hidden
|
|
6620
|
+
>
|
|
6621
|
+
<ul class="pf-c-nav__list">
|
|
6622
|
+
<li class="pf-c-nav__item">
|
|
6623
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
6624
|
+
</li>
|
|
6625
|
+
<li class="pf-c-nav__item">
|
|
6626
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
6627
|
+
</li>
|
|
6628
|
+
</ul>
|
|
6629
|
+
</section>
|
|
6630
|
+
</li>
|
|
6631
|
+
</ul>
|
|
6632
|
+
</nav>
|
|
6633
|
+
</div>
|
|
6634
|
+
</div>
|
|
6635
|
+
<main
|
|
6636
|
+
class="pf-c-page__main"
|
|
6637
|
+
tabindex="-1"
|
|
6638
|
+
id="main-content-nav-legacy-teriary-example"
|
|
6639
|
+
>
|
|
6640
|
+
<section class="pf-c-page__main-nav pf-m-limit-width">
|
|
6641
|
+
<div class="pf-c-page__main-body">
|
|
6642
|
+
<nav
|
|
6643
|
+
class="pf-c-nav pf-m-horizontal pf-m-tertiary pf-m-scrollable"
|
|
6644
|
+
aria-label="Local"
|
|
6645
|
+
>
|
|
6646
|
+
<button
|
|
6647
|
+
class="pf-c-nav__scroll-button"
|
|
6648
|
+
disabled
|
|
6649
|
+
aria-label="Scroll left"
|
|
6650
|
+
>
|
|
6651
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
6652
|
+
</button>
|
|
6680
6653
|
<ul class="pf-c-nav__list">
|
|
6681
|
-
<li class="pf-c-nav__item">
|
|
6682
|
-
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
6683
|
-
</li>
|
|
6684
|
-
<li class="pf-c-nav__item">
|
|
6685
|
-
<a href="#" class="pf-c-nav__link">Resource usage</a>
|
|
6686
|
-
</li>
|
|
6687
6654
|
<li class="pf-c-nav__item">
|
|
6688
6655
|
<a
|
|
6689
6656
|
href="#"
|
|
6690
6657
|
class="pf-c-nav__link pf-m-current"
|
|
6691
6658
|
aria-current="page"
|
|
6692
|
-
>
|
|
6693
|
-
</li>
|
|
6694
|
-
<li class="pf-c-nav__item">
|
|
6695
|
-
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
6696
|
-
</li>
|
|
6697
|
-
<li class="pf-c-nav__item">
|
|
6698
|
-
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
6659
|
+
>Tertiary nav item 1</a>
|
|
6699
6660
|
</li>
|
|
6700
6661
|
<li class="pf-c-nav__item">
|
|
6701
|
-
<a href="#" class="pf-c-nav__link">
|
|
6662
|
+
<a href="#" class="pf-c-nav__link">Tertiary nav item 2</a>
|
|
6702
6663
|
</li>
|
|
6703
|
-
</ul>
|
|
6704
|
-
</section>
|
|
6705
|
-
<section class="pf-c-nav__section" aria-labelledby="grouped-title2">
|
|
6706
|
-
<h2 class="pf-c-nav__section-title" id="grouped-title2">Policy</h2>
|
|
6707
|
-
<ul class="pf-c-nav__list">
|
|
6708
6664
|
<li class="pf-c-nav__item">
|
|
6709
|
-
<a href="#" class="pf-c-nav__link">
|
|
6665
|
+
<a href="#" class="pf-c-nav__link">Tertiary nav item 3</a>
|
|
6710
6666
|
</li>
|
|
6711
6667
|
<li class="pf-c-nav__item">
|
|
6712
|
-
<a href="#" class="pf-c-nav__link">
|
|
6668
|
+
<a href="#" class="pf-c-nav__link">Tertiary nav item 4</a>
|
|
6713
6669
|
</li>
|
|
6714
6670
|
<li class="pf-c-nav__item">
|
|
6715
|
-
<a href="#" class="pf-c-nav__link">
|
|
6671
|
+
<a href="#" class="pf-c-nav__link">Tertiary nav item 5</a>
|
|
6716
6672
|
</li>
|
|
6717
6673
|
</ul>
|
|
6718
|
-
|
|
6719
|
-
|
|
6720
|
-
|
|
6721
|
-
|
|
6722
|
-
|
|
6723
|
-
|
|
6724
|
-
tabindex="-1"
|
|
6725
|
-
id="main-content-nav-grouped-nav-example"
|
|
6726
|
-
>
|
|
6674
|
+
<button class="pf-c-nav__scroll-button" aria-label="Scroll right">
|
|
6675
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
6676
|
+
</button>
|
|
6677
|
+
</nav>
|
|
6678
|
+
</div>
|
|
6679
|
+
</section>
|
|
6727
6680
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
6728
6681
|
<div class="pf-c-page__main-body">
|
|
6729
6682
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|