@patternfly/patternfly 4.221.3 → 4.222.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Dropdown/dropdown.css +15 -0
- package/components/Dropdown/dropdown.scss +20 -0
- package/docs/components/Dropdown/examples/Dropdown.md +216 -0
- 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 +5 -5
- package/docs/demos/Wizard/examples/Wizard.md +0 -4
- package/package.json +5 -5
- package/patternfly-no-reset.css +15 -0
- package/patternfly.css +15 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -914,15 +914,15 @@ section: components
|
|
|
914
914
|
|
|
915
915
|
```
|
|
916
916
|
|
|
917
|
-
###
|
|
917
|
+
### Grouped nav
|
|
918
918
|
|
|
919
919
|
```html isFullscreen
|
|
920
|
-
<div class="pf-c-page" id="nav-
|
|
920
|
+
<div class="pf-c-page" id="nav-grouped-nav-example">
|
|
921
921
|
<a
|
|
922
922
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
923
|
-
href="#main-content-nav-
|
|
923
|
+
href="#main-content-nav-grouped-nav-example"
|
|
924
924
|
>Skip to content</a>
|
|
925
|
-
<header class="pf-c-masthead" id="nav-
|
|
925
|
+
<header class="pf-c-masthead" id="nav-grouped-nav-example-masthead">
|
|
926
926
|
<span class="pf-c-masthead__toggle">
|
|
927
927
|
<button
|
|
928
928
|
class="pf-c-button pf-m-plain"
|
|
@@ -953,7 +953,7 @@ section: components
|
|
|
953
953
|
<div class="pf-c-masthead__content">
|
|
954
954
|
<div
|
|
955
955
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
956
|
-
id="nav-
|
|
956
|
+
id="nav-grouped-nav-example-masthead-toolbar"
|
|
957
957
|
>
|
|
958
958
|
<div class="pf-c-toolbar__content">
|
|
959
959
|
<div class="pf-c-toolbar__content-section">
|
|
@@ -967,12 +967,12 @@ section: components
|
|
|
967
967
|
<nav
|
|
968
968
|
class="pf-c-app-launcher"
|
|
969
969
|
aria-label="Application launcher"
|
|
970
|
-
id="nav-
|
|
970
|
+
id="nav-grouped-nav-example-masthead-application-launcher"
|
|
971
971
|
>
|
|
972
972
|
<button
|
|
973
973
|
class="pf-c-app-launcher__toggle"
|
|
974
974
|
type="button"
|
|
975
|
-
id="nav-
|
|
975
|
+
id="nav-grouped-nav-example-masthead-application-launcher-button"
|
|
976
976
|
aria-expanded="false"
|
|
977
977
|
aria-label="Application launcher"
|
|
978
978
|
>
|
|
@@ -1112,7 +1112,7 @@ section: components
|
|
|
1112
1112
|
<div class="pf-c-dropdown">
|
|
1113
1113
|
<button
|
|
1114
1114
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1115
|
-
id="nav-
|
|
1115
|
+
id="nav-grouped-nav-example-masthead-settings-button"
|
|
1116
1116
|
aria-expanded="false"
|
|
1117
1117
|
type="button"
|
|
1118
1118
|
aria-label="Settings"
|
|
@@ -1121,7 +1121,7 @@ section: components
|
|
|
1121
1121
|
</button>
|
|
1122
1122
|
<ul
|
|
1123
1123
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1124
|
-
aria-labelledby="nav-
|
|
1124
|
+
aria-labelledby="nav-grouped-nav-example-masthead-settings-button"
|
|
1125
1125
|
hidden
|
|
1126
1126
|
>
|
|
1127
1127
|
<li>
|
|
@@ -1143,7 +1143,7 @@ section: components
|
|
|
1143
1143
|
<div class="pf-c-dropdown">
|
|
1144
1144
|
<button
|
|
1145
1145
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1146
|
-
id="nav-
|
|
1146
|
+
id="nav-grouped-nav-example-masthead-help-button"
|
|
1147
1147
|
aria-expanded="false"
|
|
1148
1148
|
type="button"
|
|
1149
1149
|
aria-label="Help"
|
|
@@ -1152,7 +1152,7 @@ section: components
|
|
|
1152
1152
|
</button>
|
|
1153
1153
|
<ul
|
|
1154
1154
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1155
|
-
aria-labelledby="nav-
|
|
1155
|
+
aria-labelledby="nav-grouped-nav-example-masthead-help-button"
|
|
1156
1156
|
hidden
|
|
1157
1157
|
>
|
|
1158
1158
|
<li>
|
|
@@ -1652,7 +1652,7 @@ section: components
|
|
|
1652
1652
|
>
|
|
1653
1653
|
<button
|
|
1654
1654
|
class="pf-c-dropdown__toggle"
|
|
1655
|
-
id="nav-
|
|
1655
|
+
id="nav-grouped-nav-example-masthead-profile-button"
|
|
1656
1656
|
aria-expanded="false"
|
|
1657
1657
|
type="button"
|
|
1658
1658
|
>
|
|
@@ -1708,119 +1708,57 @@ section: components
|
|
|
1708
1708
|
<div class="pf-c-page__sidebar-body">
|
|
1709
1709
|
<nav
|
|
1710
1710
|
class="pf-c-nav"
|
|
1711
|
-
id="nav-
|
|
1711
|
+
id="nav-grouped-nav-example-grouped-nav"
|
|
1712
1712
|
aria-label="Global"
|
|
1713
1713
|
>
|
|
1714
|
-
<
|
|
1715
|
-
<
|
|
1716
|
-
|
|
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
|
-
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
1756
|
-
</li>
|
|
1757
|
-
</ul>
|
|
1758
|
-
</section>
|
|
1759
|
-
</li>
|
|
1760
|
-
<li class="pf-c-nav__item pf-m-expandable">
|
|
1761
|
-
<button
|
|
1762
|
-
class="pf-c-nav__link"
|
|
1763
|
-
id="nav-expandable-example-expandable-nav-link2"
|
|
1764
|
-
aria-expanded="false"
|
|
1765
|
-
>
|
|
1766
|
-
Policy
|
|
1767
|
-
<span class="pf-c-nav__toggle">
|
|
1768
|
-
<span class="pf-c-nav__toggle-icon">
|
|
1769
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1770
|
-
</span>
|
|
1771
|
-
</span>
|
|
1772
|
-
</button>
|
|
1773
|
-
<section
|
|
1774
|
-
class="pf-c-nav__subnav"
|
|
1775
|
-
aria-labelledby="nav-expandable-example-expandable-nav-link2"
|
|
1776
|
-
hidden
|
|
1777
|
-
>
|
|
1778
|
-
<ul class="pf-c-nav__list">
|
|
1779
|
-
<li class="pf-c-nav__item">
|
|
1780
|
-
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
1781
|
-
</li>
|
|
1782
|
-
<li class="pf-c-nav__item">
|
|
1783
|
-
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
1784
|
-
</li>
|
|
1785
|
-
</ul>
|
|
1786
|
-
</section>
|
|
1787
|
-
</li>
|
|
1788
|
-
<li class="pf-c-nav__item pf-m-expandable">
|
|
1789
|
-
<button
|
|
1790
|
-
class="pf-c-nav__link"
|
|
1791
|
-
id="nav-expandable-example-expandable-nav-link3"
|
|
1792
|
-
aria-expanded="false"
|
|
1793
|
-
>
|
|
1794
|
-
Authentication
|
|
1795
|
-
<span class="pf-c-nav__toggle">
|
|
1796
|
-
<span class="pf-c-nav__toggle-icon">
|
|
1797
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1798
|
-
</span>
|
|
1799
|
-
</span>
|
|
1800
|
-
</button>
|
|
1801
|
-
<section
|
|
1802
|
-
class="pf-c-nav__subnav"
|
|
1803
|
-
aria-labelledby="nav-expandable-example-expandable-nav-link3"
|
|
1804
|
-
hidden
|
|
1805
|
-
>
|
|
1806
|
-
<ul class="pf-c-nav__list">
|
|
1807
|
-
<li class="pf-c-nav__item">
|
|
1808
|
-
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
1809
|
-
</li>
|
|
1810
|
-
<li class="pf-c-nav__item">
|
|
1811
|
-
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
1812
|
-
</li>
|
|
1813
|
-
</ul>
|
|
1814
|
-
</section>
|
|
1815
|
-
</li>
|
|
1816
|
-
</ul>
|
|
1714
|
+
<section class="pf-c-nav__section" aria-labelledby="grouped-title1">
|
|
1715
|
+
<h2 class="pf-c-nav__section-title" id="grouped-title1">System panel</h2>
|
|
1716
|
+
<ul class="pf-c-nav__list">
|
|
1717
|
+
<li class="pf-c-nav__item">
|
|
1718
|
+
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
1719
|
+
</li>
|
|
1720
|
+
<li class="pf-c-nav__item">
|
|
1721
|
+
<a href="#" class="pf-c-nav__link">Resource usage</a>
|
|
1722
|
+
</li>
|
|
1723
|
+
<li class="pf-c-nav__item">
|
|
1724
|
+
<a
|
|
1725
|
+
href="#"
|
|
1726
|
+
class="pf-c-nav__link pf-m-current"
|
|
1727
|
+
aria-current="page"
|
|
1728
|
+
>Hypervisors</a>
|
|
1729
|
+
</li>
|
|
1730
|
+
<li class="pf-c-nav__item">
|
|
1731
|
+
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
1732
|
+
</li>
|
|
1733
|
+
<li class="pf-c-nav__item">
|
|
1734
|
+
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
1735
|
+
</li>
|
|
1736
|
+
<li class="pf-c-nav__item">
|
|
1737
|
+
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
1738
|
+
</li>
|
|
1739
|
+
</ul>
|
|
1740
|
+
</section>
|
|
1741
|
+
<section class="pf-c-nav__section" aria-labelledby="grouped-title2">
|
|
1742
|
+
<h2 class="pf-c-nav__section-title" id="grouped-title2">Policy</h2>
|
|
1743
|
+
<ul class="pf-c-nav__list">
|
|
1744
|
+
<li class="pf-c-nav__item">
|
|
1745
|
+
<a href="#" class="pf-c-nav__link">Hosts</a>
|
|
1746
|
+
</li>
|
|
1747
|
+
<li class="pf-c-nav__item">
|
|
1748
|
+
<a href="#" class="pf-c-nav__link">Virtual machines</a>
|
|
1749
|
+
</li>
|
|
1750
|
+
<li class="pf-c-nav__item">
|
|
1751
|
+
<a href="#" class="pf-c-nav__link">Storage</a>
|
|
1752
|
+
</li>
|
|
1753
|
+
</ul>
|
|
1754
|
+
</section>
|
|
1817
1755
|
</nav>
|
|
1818
1756
|
</div>
|
|
1819
1757
|
</div>
|
|
1820
1758
|
<main
|
|
1821
1759
|
class="pf-c-page__main"
|
|
1822
1760
|
tabindex="-1"
|
|
1823
|
-
id="main-content-nav-
|
|
1761
|
+
id="main-content-nav-grouped-nav-example"
|
|
1824
1762
|
>
|
|
1825
1763
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1826
1764
|
<div class="pf-c-page__main-body">
|
|
@@ -1907,15 +1845,24 @@ section: components
|
|
|
1907
1845
|
|
|
1908
1846
|
```
|
|
1909
1847
|
|
|
1910
|
-
###
|
|
1848
|
+
### Expandable nav
|
|
1911
1849
|
|
|
1912
1850
|
```html isFullscreen
|
|
1913
|
-
<div class="pf-c-page" id="nav-
|
|
1851
|
+
<div class="pf-c-page" id="nav-expandable-example">
|
|
1914
1852
|
<a
|
|
1915
1853
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
1916
|
-
href="#main-content-nav-
|
|
1854
|
+
href="#main-content-nav-expandable-example"
|
|
1917
1855
|
>Skip to content</a>
|
|
1918
|
-
<header class="pf-c-masthead" id="nav-
|
|
1856
|
+
<header class="pf-c-masthead" id="nav-expandable-example-masthead">
|
|
1857
|
+
<span class="pf-c-masthead__toggle">
|
|
1858
|
+
<button
|
|
1859
|
+
class="pf-c-button pf-m-plain"
|
|
1860
|
+
type="button"
|
|
1861
|
+
aria-label="Global navigation"
|
|
1862
|
+
>
|
|
1863
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1864
|
+
</button>
|
|
1865
|
+
</span>
|
|
1919
1866
|
<div class="pf-c-masthead__main">
|
|
1920
1867
|
<a class="pf-c-masthead__brand" href="#">
|
|
1921
1868
|
<picture
|
|
@@ -1937,55 +1884,10 @@ section: components
|
|
|
1937
1884
|
<div class="pf-c-masthead__content">
|
|
1938
1885
|
<div
|
|
1939
1886
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1940
|
-
id="nav-
|
|
1887
|
+
id="nav-expandable-example-masthead-toolbar"
|
|
1941
1888
|
>
|
|
1942
1889
|
<div class="pf-c-toolbar__content">
|
|
1943
1890
|
<div class="pf-c-toolbar__content-section">
|
|
1944
|
-
<div
|
|
1945
|
-
class="pf-c-toolbar__item pf-m-overflow-container"
|
|
1946
|
-
style="--pf-c-toolbar__item--MinWidth: 18ch;"
|
|
1947
|
-
>
|
|
1948
|
-
<nav
|
|
1949
|
-
class="pf-c-nav pf-m-horizontal pf-m-scrollable"
|
|
1950
|
-
id="-horizontal-nav"
|
|
1951
|
-
aria-label="Global"
|
|
1952
|
-
>
|
|
1953
|
-
<button
|
|
1954
|
-
class="pf-c-nav__scroll-button"
|
|
1955
|
-
disabled
|
|
1956
|
-
aria-label="Scroll left"
|
|
1957
|
-
>
|
|
1958
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
1959
|
-
</button>
|
|
1960
|
-
<ul class="pf-c-nav__list">
|
|
1961
|
-
<li class="pf-c-nav__item">
|
|
1962
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
|
|
1963
|
-
</li>
|
|
1964
|
-
<li class="pf-c-nav__item">
|
|
1965
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 2</a>
|
|
1966
|
-
</li>
|
|
1967
|
-
<li class="pf-c-nav__item">
|
|
1968
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 3</a>
|
|
1969
|
-
</li>
|
|
1970
|
-
<li class="pf-c-nav__item">
|
|
1971
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 4</a>
|
|
1972
|
-
</li>
|
|
1973
|
-
<li class="pf-c-nav__item">
|
|
1974
|
-
<a
|
|
1975
|
-
href="#"
|
|
1976
|
-
class="pf-c-nav__link pf-m-current"
|
|
1977
|
-
aria-current="page"
|
|
1978
|
-
>Horizontal nav item 5</a>
|
|
1979
|
-
</li>
|
|
1980
|
-
</ul>
|
|
1981
|
-
<button
|
|
1982
|
-
class="pf-c-nav__scroll-button"
|
|
1983
|
-
aria-label="Scroll right"
|
|
1984
|
-
>
|
|
1985
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1986
|
-
</button>
|
|
1987
|
-
</nav>
|
|
1988
|
-
</div>
|
|
1989
1891
|
<div
|
|
1990
1892
|
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
1991
1893
|
>
|
|
@@ -1996,12 +1898,12 @@ section: components
|
|
|
1996
1898
|
<nav
|
|
1997
1899
|
class="pf-c-app-launcher"
|
|
1998
1900
|
aria-label="Application launcher"
|
|
1999
|
-
id="nav-
|
|
1901
|
+
id="nav-expandable-example-masthead-application-launcher"
|
|
2000
1902
|
>
|
|
2001
1903
|
<button
|
|
2002
1904
|
class="pf-c-app-launcher__toggle"
|
|
2003
1905
|
type="button"
|
|
2004
|
-
id="nav-
|
|
1906
|
+
id="nav-expandable-example-masthead-application-launcher-button"
|
|
2005
1907
|
aria-expanded="false"
|
|
2006
1908
|
aria-label="Application launcher"
|
|
2007
1909
|
>
|
|
@@ -2141,7 +2043,7 @@ section: components
|
|
|
2141
2043
|
<div class="pf-c-dropdown">
|
|
2142
2044
|
<button
|
|
2143
2045
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2144
|
-
id="nav-
|
|
2046
|
+
id="nav-expandable-example-masthead-settings-button"
|
|
2145
2047
|
aria-expanded="false"
|
|
2146
2048
|
type="button"
|
|
2147
2049
|
aria-label="Settings"
|
|
@@ -2150,7 +2052,7 @@ section: components
|
|
|
2150
2052
|
</button>
|
|
2151
2053
|
<ul
|
|
2152
2054
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2153
|
-
aria-labelledby="nav-
|
|
2055
|
+
aria-labelledby="nav-expandable-example-masthead-settings-button"
|
|
2154
2056
|
hidden
|
|
2155
2057
|
>
|
|
2156
2058
|
<li>
|
|
@@ -2172,7 +2074,7 @@ section: components
|
|
|
2172
2074
|
<div class="pf-c-dropdown">
|
|
2173
2075
|
<button
|
|
2174
2076
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2175
|
-
id="nav-
|
|
2077
|
+
id="nav-expandable-example-masthead-help-button"
|
|
2176
2078
|
aria-expanded="false"
|
|
2177
2079
|
type="button"
|
|
2178
2080
|
aria-label="Help"
|
|
@@ -2181,7 +2083,7 @@ section: components
|
|
|
2181
2083
|
</button>
|
|
2182
2084
|
<ul
|
|
2183
2085
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2184
|
-
aria-labelledby="nav-
|
|
2086
|
+
aria-labelledby="nav-expandable-example-masthead-help-button"
|
|
2185
2087
|
hidden
|
|
2186
2088
|
>
|
|
2187
2089
|
<li>
|
|
@@ -2681,7 +2583,7 @@ section: components
|
|
|
2681
2583
|
>
|
|
2682
2584
|
<button
|
|
2683
2585
|
class="pf-c-dropdown__toggle"
|
|
2684
|
-
id="nav-
|
|
2586
|
+
id="nav-expandable-example-masthead-profile-button"
|
|
2685
2587
|
aria-expanded="false"
|
|
2686
2588
|
type="button"
|
|
2687
2589
|
>
|
|
@@ -2733,12 +2635,125 @@ section: components
|
|
|
2733
2635
|
</div>
|
|
2734
2636
|
</div>
|
|
2735
2637
|
</header>
|
|
2736
|
-
<
|
|
2737
|
-
class="pf-c-
|
|
2738
|
-
|
|
2739
|
-
|
|
2740
|
-
|
|
2741
|
-
|
|
2638
|
+
<div class="pf-c-page__sidebar">
|
|
2639
|
+
<div class="pf-c-page__sidebar-body">
|
|
2640
|
+
<nav
|
|
2641
|
+
class="pf-c-nav"
|
|
2642
|
+
id="nav-expandable-example-expandable-nav"
|
|
2643
|
+
aria-label="Global"
|
|
2644
|
+
>
|
|
2645
|
+
<ul class="pf-c-nav__list">
|
|
2646
|
+
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
|
|
2647
|
+
<button
|
|
2648
|
+
class="pf-c-nav__link"
|
|
2649
|
+
id="nav-expandable-example-expandable-nav-link1"
|
|
2650
|
+
aria-expanded="true"
|
|
2651
|
+
>
|
|
2652
|
+
System panel
|
|
2653
|
+
<span class="pf-c-nav__toggle">
|
|
2654
|
+
<span class="pf-c-nav__toggle-icon">
|
|
2655
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2656
|
+
</span>
|
|
2657
|
+
</span>
|
|
2658
|
+
</button>
|
|
2659
|
+
<section
|
|
2660
|
+
class="pf-c-nav__subnav"
|
|
2661
|
+
aria-labelledby="nav-expandable-example-expandable-nav-link1"
|
|
2662
|
+
>
|
|
2663
|
+
<ul class="pf-c-nav__list">
|
|
2664
|
+
<li class="pf-c-nav__item">
|
|
2665
|
+
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
2666
|
+
</li>
|
|
2667
|
+
<li class="pf-c-nav__item">
|
|
2668
|
+
<a
|
|
2669
|
+
href="#"
|
|
2670
|
+
class="pf-c-nav__link pf-m-current"
|
|
2671
|
+
aria-current="page"
|
|
2672
|
+
>Resource usage</a>
|
|
2673
|
+
</li>
|
|
2674
|
+
<li class="pf-c-nav__item">
|
|
2675
|
+
<a href="#" class="pf-c-nav__link">Hypervisors</a>
|
|
2676
|
+
</li>
|
|
2677
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2678
|
+
|
|
2679
|
+
<li class="pf-c-nav__item">
|
|
2680
|
+
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
2681
|
+
</li>
|
|
2682
|
+
<li class="pf-c-nav__item">
|
|
2683
|
+
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
2684
|
+
</li>
|
|
2685
|
+
<li class="pf-c-nav__item">
|
|
2686
|
+
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
2687
|
+
</li>
|
|
2688
|
+
</ul>
|
|
2689
|
+
</section>
|
|
2690
|
+
</li>
|
|
2691
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
2692
|
+
<button
|
|
2693
|
+
class="pf-c-nav__link"
|
|
2694
|
+
id="nav-expandable-example-expandable-nav-link2"
|
|
2695
|
+
aria-expanded="false"
|
|
2696
|
+
>
|
|
2697
|
+
Policy
|
|
2698
|
+
<span class="pf-c-nav__toggle">
|
|
2699
|
+
<span class="pf-c-nav__toggle-icon">
|
|
2700
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2701
|
+
</span>
|
|
2702
|
+
</span>
|
|
2703
|
+
</button>
|
|
2704
|
+
<section
|
|
2705
|
+
class="pf-c-nav__subnav"
|
|
2706
|
+
aria-labelledby="nav-expandable-example-expandable-nav-link2"
|
|
2707
|
+
hidden
|
|
2708
|
+
>
|
|
2709
|
+
<ul class="pf-c-nav__list">
|
|
2710
|
+
<li class="pf-c-nav__item">
|
|
2711
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
2712
|
+
</li>
|
|
2713
|
+
<li class="pf-c-nav__item">
|
|
2714
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
2715
|
+
</li>
|
|
2716
|
+
</ul>
|
|
2717
|
+
</section>
|
|
2718
|
+
</li>
|
|
2719
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
2720
|
+
<button
|
|
2721
|
+
class="pf-c-nav__link"
|
|
2722
|
+
id="nav-expandable-example-expandable-nav-link3"
|
|
2723
|
+
aria-expanded="false"
|
|
2724
|
+
>
|
|
2725
|
+
Authentication
|
|
2726
|
+
<span class="pf-c-nav__toggle">
|
|
2727
|
+
<span class="pf-c-nav__toggle-icon">
|
|
2728
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2729
|
+
</span>
|
|
2730
|
+
</span>
|
|
2731
|
+
</button>
|
|
2732
|
+
<section
|
|
2733
|
+
class="pf-c-nav__subnav"
|
|
2734
|
+
aria-labelledby="nav-expandable-example-expandable-nav-link3"
|
|
2735
|
+
hidden
|
|
2736
|
+
>
|
|
2737
|
+
<ul class="pf-c-nav__list">
|
|
2738
|
+
<li class="pf-c-nav__item">
|
|
2739
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
2740
|
+
</li>
|
|
2741
|
+
<li class="pf-c-nav__item">
|
|
2742
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
2743
|
+
</li>
|
|
2744
|
+
</ul>
|
|
2745
|
+
</section>
|
|
2746
|
+
</li>
|
|
2747
|
+
</ul>
|
|
2748
|
+
</nav>
|
|
2749
|
+
</div>
|
|
2750
|
+
</div>
|
|
2751
|
+
<main
|
|
2752
|
+
class="pf-c-page__main"
|
|
2753
|
+
tabindex="-1"
|
|
2754
|
+
id="main-content-nav-expandable-example"
|
|
2755
|
+
>
|
|
2756
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
2742
2757
|
<div class="pf-c-page__main-body">
|
|
2743
2758
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
2744
2759
|
<ol class="pf-c-breadcrumb__list">
|
|
@@ -2823,24 +2838,15 @@ section: components
|
|
|
2823
2838
|
|
|
2824
2839
|
```
|
|
2825
2840
|
|
|
2826
|
-
### Horizontal
|
|
2841
|
+
### Horizontal nav
|
|
2827
2842
|
|
|
2828
2843
|
```html isFullscreen
|
|
2829
|
-
<div class="pf-c-page" id="nav-horizontal-
|
|
2844
|
+
<div class="pf-c-page" id="nav-horizontal-example">
|
|
2830
2845
|
<a
|
|
2831
2846
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
2832
|
-
href="#main-content-nav-horizontal-
|
|
2847
|
+
href="#main-content-nav-horizontal-example"
|
|
2833
2848
|
>Skip to content</a>
|
|
2834
|
-
<header class="pf-c-masthead" id="nav-horizontal-
|
|
2835
|
-
<span class="pf-c-masthead__toggle">
|
|
2836
|
-
<button
|
|
2837
|
-
class="pf-c-button pf-m-plain"
|
|
2838
|
-
type="button"
|
|
2839
|
-
aria-label="Global navigation"
|
|
2840
|
-
>
|
|
2841
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2842
|
-
</button>
|
|
2843
|
-
</span>
|
|
2849
|
+
<header class="pf-c-masthead" id="nav-horizontal-example-masthead">
|
|
2844
2850
|
<div class="pf-c-masthead__main">
|
|
2845
2851
|
<a class="pf-c-masthead__brand" href="#">
|
|
2846
2852
|
<picture
|
|
@@ -2862,10 +2868,55 @@ section: components
|
|
|
2862
2868
|
<div class="pf-c-masthead__content">
|
|
2863
2869
|
<div
|
|
2864
2870
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
2865
|
-
id="nav-horizontal-
|
|
2871
|
+
id="nav-horizontal-example-masthead-toolbar"
|
|
2866
2872
|
>
|
|
2867
2873
|
<div class="pf-c-toolbar__content">
|
|
2868
2874
|
<div class="pf-c-toolbar__content-section">
|
|
2875
|
+
<div
|
|
2876
|
+
class="pf-c-toolbar__item pf-m-overflow-container"
|
|
2877
|
+
style="--pf-c-toolbar__item--MinWidth: 18ch;"
|
|
2878
|
+
>
|
|
2879
|
+
<nav
|
|
2880
|
+
class="pf-c-nav pf-m-horizontal pf-m-scrollable"
|
|
2881
|
+
id="-horizontal-nav"
|
|
2882
|
+
aria-label="Global"
|
|
2883
|
+
>
|
|
2884
|
+
<button
|
|
2885
|
+
class="pf-c-nav__scroll-button"
|
|
2886
|
+
disabled
|
|
2887
|
+
aria-label="Scroll left"
|
|
2888
|
+
>
|
|
2889
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
2890
|
+
</button>
|
|
2891
|
+
<ul class="pf-c-nav__list">
|
|
2892
|
+
<li class="pf-c-nav__item">
|
|
2893
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
|
|
2894
|
+
</li>
|
|
2895
|
+
<li class="pf-c-nav__item">
|
|
2896
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 2</a>
|
|
2897
|
+
</li>
|
|
2898
|
+
<li class="pf-c-nav__item">
|
|
2899
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 3</a>
|
|
2900
|
+
</li>
|
|
2901
|
+
<li class="pf-c-nav__item">
|
|
2902
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 4</a>
|
|
2903
|
+
</li>
|
|
2904
|
+
<li class="pf-c-nav__item">
|
|
2905
|
+
<a
|
|
2906
|
+
href="#"
|
|
2907
|
+
class="pf-c-nav__link pf-m-current"
|
|
2908
|
+
aria-current="page"
|
|
2909
|
+
>Horizontal nav item 5</a>
|
|
2910
|
+
</li>
|
|
2911
|
+
</ul>
|
|
2912
|
+
<button
|
|
2913
|
+
class="pf-c-nav__scroll-button"
|
|
2914
|
+
aria-label="Scroll right"
|
|
2915
|
+
>
|
|
2916
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2917
|
+
</button>
|
|
2918
|
+
</nav>
|
|
2919
|
+
</div>
|
|
2869
2920
|
<div
|
|
2870
2921
|
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
2871
2922
|
>
|
|
@@ -2876,12 +2927,12 @@ section: components
|
|
|
2876
2927
|
<nav
|
|
2877
2928
|
class="pf-c-app-launcher"
|
|
2878
2929
|
aria-label="Application launcher"
|
|
2879
|
-
id="nav-horizontal-
|
|
2930
|
+
id="nav-horizontal-example-masthead-application-launcher"
|
|
2880
2931
|
>
|
|
2881
2932
|
<button
|
|
2882
2933
|
class="pf-c-app-launcher__toggle"
|
|
2883
2934
|
type="button"
|
|
2884
|
-
id="nav-horizontal-
|
|
2935
|
+
id="nav-horizontal-example-masthead-application-launcher-button"
|
|
2885
2936
|
aria-expanded="false"
|
|
2886
2937
|
aria-label="Application launcher"
|
|
2887
2938
|
>
|
|
@@ -3021,7 +3072,7 @@ section: components
|
|
|
3021
3072
|
<div class="pf-c-dropdown">
|
|
3022
3073
|
<button
|
|
3023
3074
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
3024
|
-
id="nav-horizontal-
|
|
3075
|
+
id="nav-horizontal-example-masthead-settings-button"
|
|
3025
3076
|
aria-expanded="false"
|
|
3026
3077
|
type="button"
|
|
3027
3078
|
aria-label="Settings"
|
|
@@ -3030,7 +3081,7 @@ section: components
|
|
|
3030
3081
|
</button>
|
|
3031
3082
|
<ul
|
|
3032
3083
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
3033
|
-
aria-labelledby="nav-horizontal-
|
|
3084
|
+
aria-labelledby="nav-horizontal-example-masthead-settings-button"
|
|
3034
3085
|
hidden
|
|
3035
3086
|
>
|
|
3036
3087
|
<li>
|
|
@@ -3052,7 +3103,7 @@ section: components
|
|
|
3052
3103
|
<div class="pf-c-dropdown">
|
|
3053
3104
|
<button
|
|
3054
3105
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
3055
|
-
id="nav-horizontal-
|
|
3106
|
+
id="nav-horizontal-example-masthead-help-button"
|
|
3056
3107
|
aria-expanded="false"
|
|
3057
3108
|
type="button"
|
|
3058
3109
|
aria-label="Help"
|
|
@@ -3061,7 +3112,7 @@ section: components
|
|
|
3061
3112
|
</button>
|
|
3062
3113
|
<ul
|
|
3063
3114
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
3064
|
-
aria-labelledby="nav-horizontal-
|
|
3115
|
+
aria-labelledby="nav-horizontal-example-masthead-help-button"
|
|
3065
3116
|
hidden
|
|
3066
3117
|
>
|
|
3067
3118
|
<li>
|
|
@@ -3561,7 +3612,7 @@ section: components
|
|
|
3561
3612
|
>
|
|
3562
3613
|
<button
|
|
3563
3614
|
class="pf-c-dropdown__toggle"
|
|
3564
|
-
id="nav-horizontal-
|
|
3615
|
+
id="nav-horizontal-example-masthead-profile-button"
|
|
3565
3616
|
aria-expanded="false"
|
|
3566
3617
|
type="button"
|
|
3567
3618
|
>
|
|
@@ -3613,174 +3664,21 @@ section: components
|
|
|
3613
3664
|
</div>
|
|
3614
3665
|
</div>
|
|
3615
3666
|
</header>
|
|
3616
|
-
<
|
|
3617
|
-
|
|
3618
|
-
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
>
|
|
3623
|
-
<
|
|
3624
|
-
<
|
|
3625
|
-
<
|
|
3626
|
-
class="pf-c-
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
|
|
3631
|
-
<span class="pf-c-nav__toggle">
|
|
3632
|
-
<span class="pf-c-nav__toggle-icon">
|
|
3633
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3634
|
-
</span>
|
|
3635
|
-
</span>
|
|
3636
|
-
</button>
|
|
3637
|
-
<section
|
|
3638
|
-
class="pf-c-nav__subnav"
|
|
3639
|
-
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link1"
|
|
3640
|
-
>
|
|
3641
|
-
<ul class="pf-c-nav__list">
|
|
3642
|
-
<li class="pf-c-nav__item">
|
|
3643
|
-
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
3644
|
-
</li>
|
|
3645
|
-
<li class="pf-c-nav__item">
|
|
3646
|
-
<a
|
|
3647
|
-
href="#"
|
|
3648
|
-
class="pf-c-nav__link pf-m-current"
|
|
3649
|
-
aria-current="page"
|
|
3650
|
-
>Resource usage</a>
|
|
3651
|
-
</li>
|
|
3652
|
-
<li class="pf-c-nav__item">
|
|
3653
|
-
<a href="#" class="pf-c-nav__link">Hypervisors</a>
|
|
3654
|
-
</li>
|
|
3655
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
3656
|
-
|
|
3657
|
-
<li class="pf-c-nav__item">
|
|
3658
|
-
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
3659
|
-
</li>
|
|
3660
|
-
<li class="pf-c-nav__item">
|
|
3661
|
-
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
3662
|
-
</li>
|
|
3663
|
-
<li class="pf-c-nav__item">
|
|
3664
|
-
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
3665
|
-
</li>
|
|
3666
|
-
</ul>
|
|
3667
|
-
</section>
|
|
3668
|
-
</li>
|
|
3669
|
-
<li class="pf-c-nav__item pf-m-expandable">
|
|
3670
|
-
<button
|
|
3671
|
-
class="pf-c-nav__link"
|
|
3672
|
-
id="nav-horizontal-subnav-example-expandable-nav-link2"
|
|
3673
|
-
aria-expanded="false"
|
|
3674
|
-
>
|
|
3675
|
-
Policy
|
|
3676
|
-
<span class="pf-c-nav__toggle">
|
|
3677
|
-
<span class="pf-c-nav__toggle-icon">
|
|
3678
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3679
|
-
</span>
|
|
3680
|
-
</span>
|
|
3681
|
-
</button>
|
|
3682
|
-
<section
|
|
3683
|
-
class="pf-c-nav__subnav"
|
|
3684
|
-
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link2"
|
|
3685
|
-
hidden
|
|
3686
|
-
>
|
|
3687
|
-
<ul class="pf-c-nav__list">
|
|
3688
|
-
<li class="pf-c-nav__item">
|
|
3689
|
-
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
3690
|
-
</li>
|
|
3691
|
-
<li class="pf-c-nav__item">
|
|
3692
|
-
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
3693
|
-
</li>
|
|
3694
|
-
</ul>
|
|
3695
|
-
</section>
|
|
3696
|
-
</li>
|
|
3697
|
-
<li class="pf-c-nav__item pf-m-expandable">
|
|
3698
|
-
<button
|
|
3699
|
-
class="pf-c-nav__link"
|
|
3700
|
-
id="nav-horizontal-subnav-example-expandable-nav-link3"
|
|
3701
|
-
aria-expanded="false"
|
|
3702
|
-
>
|
|
3703
|
-
Authentication
|
|
3704
|
-
<span class="pf-c-nav__toggle">
|
|
3705
|
-
<span class="pf-c-nav__toggle-icon">
|
|
3706
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3707
|
-
</span>
|
|
3708
|
-
</span>
|
|
3709
|
-
</button>
|
|
3710
|
-
<section
|
|
3711
|
-
class="pf-c-nav__subnav"
|
|
3712
|
-
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link3"
|
|
3713
|
-
hidden
|
|
3714
|
-
>
|
|
3715
|
-
<ul class="pf-c-nav__list">
|
|
3716
|
-
<li class="pf-c-nav__item">
|
|
3717
|
-
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
3718
|
-
</li>
|
|
3719
|
-
<li class="pf-c-nav__item">
|
|
3720
|
-
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
3721
|
-
</li>
|
|
3722
|
-
</ul>
|
|
3723
|
-
</section>
|
|
3724
|
-
</li>
|
|
3725
|
-
</ul>
|
|
3726
|
-
</nav>
|
|
3727
|
-
</div>
|
|
3728
|
-
</div>
|
|
3729
|
-
<main
|
|
3730
|
-
class="pf-c-page__main"
|
|
3731
|
-
tabindex="-1"
|
|
3732
|
-
id="main-content-nav-horizontal-subnav-example"
|
|
3733
|
-
>
|
|
3734
|
-
<section class="pf-c-page__main-subnav pf-m-limit-width">
|
|
3735
|
-
<div class="pf-c-page__main-body">
|
|
3736
|
-
<nav
|
|
3737
|
-
class="pf-c-nav pf-m-horizontal-subnav pf-m-scrollable"
|
|
3738
|
-
aria-label="Local"
|
|
3739
|
-
>
|
|
3740
|
-
<button
|
|
3741
|
-
class="pf-c-nav__scroll-button"
|
|
3742
|
-
disabled
|
|
3743
|
-
aria-label="Scroll left"
|
|
3744
|
-
>
|
|
3745
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
3746
|
-
</button>
|
|
3747
|
-
<ul class="pf-c-nav__list">
|
|
3748
|
-
<li class="pf-c-nav__item">
|
|
3749
|
-
<a
|
|
3750
|
-
href="#"
|
|
3751
|
-
class="pf-c-nav__link pf-m-current"
|
|
3752
|
-
aria-current="page"
|
|
3753
|
-
>Horizontal subnav item 1</a>
|
|
3754
|
-
</li>
|
|
3755
|
-
<li class="pf-c-nav__item">
|
|
3756
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 2</a>
|
|
3757
|
-
</li>
|
|
3758
|
-
<li class="pf-c-nav__item">
|
|
3759
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 3</a>
|
|
3760
|
-
</li>
|
|
3761
|
-
<li class="pf-c-nav__item">
|
|
3762
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 4</a>
|
|
3763
|
-
</li>
|
|
3764
|
-
<li class="pf-c-nav__item">
|
|
3765
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 5</a>
|
|
3766
|
-
</li>
|
|
3767
|
-
</ul>
|
|
3768
|
-
<button class="pf-c-nav__scroll-button" aria-label="Scroll right">
|
|
3769
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3770
|
-
</button>
|
|
3771
|
-
</nav>
|
|
3772
|
-
</div>
|
|
3773
|
-
</section>
|
|
3774
|
-
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
3775
|
-
<div class="pf-c-page__main-body">
|
|
3776
|
-
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
3777
|
-
<ol class="pf-c-breadcrumb__list">
|
|
3778
|
-
<li class="pf-c-breadcrumb__item">
|
|
3779
|
-
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
3780
|
-
</li>
|
|
3781
|
-
<li class="pf-c-breadcrumb__item">
|
|
3782
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
3783
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3667
|
+
<main
|
|
3668
|
+
class="pf-c-page__main"
|
|
3669
|
+
tabindex="-1"
|
|
3670
|
+
id="main-content-nav-horizontal-example"
|
|
3671
|
+
>
|
|
3672
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
3673
|
+
<div class="pf-c-page__main-body">
|
|
3674
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
3675
|
+
<ol class="pf-c-breadcrumb__list">
|
|
3676
|
+
<li class="pf-c-breadcrumb__item">
|
|
3677
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
3678
|
+
</li>
|
|
3679
|
+
<li class="pf-c-breadcrumb__item">
|
|
3680
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
3681
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3784
3682
|
</span>
|
|
3785
3683
|
|
|
3786
3684
|
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
@@ -3815,7 +3713,7 @@ section: components
|
|
|
3815
3713
|
</div>
|
|
3816
3714
|
</div>
|
|
3817
3715
|
</section>
|
|
3818
|
-
<section class="pf-c-page__main-section pf-m-limit-width
|
|
3716
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
3819
3717
|
<div class="pf-c-page__main-body">
|
|
3820
3718
|
<div class="pf-l-gallery pf-m-gutter">
|
|
3821
3719
|
<div class="pf-c-card">
|
|
@@ -3851,30 +3749,20 @@ section: components
|
|
|
3851
3749
|
</div>
|
|
3852
3750
|
</div>
|
|
3853
3751
|
</section>
|
|
3854
|
-
<section
|
|
3855
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light"
|
|
3856
|
-
>
|
|
3857
|
-
<div class="pf-c-page__main-body">
|
|
3858
|
-
<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>
|
|
3859
|
-
</div>
|
|
3860
|
-
</section>
|
|
3861
3752
|
</main>
|
|
3862
3753
|
</div>
|
|
3863
3754
|
|
|
3864
3755
|
```
|
|
3865
3756
|
|
|
3866
|
-
### Horizontal
|
|
3757
|
+
### Horizontal subnav
|
|
3867
3758
|
|
|
3868
3759
|
```html isFullscreen
|
|
3869
|
-
<div class="pf-c-page" id="nav-horizontal-example">
|
|
3760
|
+
<div class="pf-c-page" id="nav-horizontal-subnav-example">
|
|
3870
3761
|
<a
|
|
3871
3762
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
3872
|
-
href="#main-content-nav-horizontal-example"
|
|
3763
|
+
href="#main-content-nav-horizontal-subnav-example"
|
|
3873
3764
|
>Skip to content</a>
|
|
3874
|
-
<header
|
|
3875
|
-
class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
|
|
3876
|
-
id="nav-horizontal-example-masthead"
|
|
3877
|
-
>
|
|
3765
|
+
<header class="pf-c-masthead" id="nav-horizontal-subnav-example-masthead">
|
|
3878
3766
|
<span class="pf-c-masthead__toggle">
|
|
3879
3767
|
<button
|
|
3880
3768
|
class="pf-c-button pf-m-plain"
|
|
@@ -3905,55 +3793,10 @@ section: components
|
|
|
3905
3793
|
<div class="pf-c-masthead__content">
|
|
3906
3794
|
<div
|
|
3907
3795
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
3908
|
-
id="nav-horizontal-example-masthead-toolbar"
|
|
3796
|
+
id="nav-horizontal-subnav-example-masthead-toolbar"
|
|
3909
3797
|
>
|
|
3910
3798
|
<div class="pf-c-toolbar__content">
|
|
3911
3799
|
<div class="pf-c-toolbar__content-section">
|
|
3912
|
-
<div
|
|
3913
|
-
class="pf-c-toolbar__item pf-m-overflow-container"
|
|
3914
|
-
style="--pf-c-toolbar__item--MinWidth: 18ch;"
|
|
3915
|
-
>
|
|
3916
|
-
<nav
|
|
3917
|
-
class="pf-c-nav pf-m-horizontal pf-m-scrollable"
|
|
3918
|
-
id="-horizontal-nav"
|
|
3919
|
-
aria-label="Global"
|
|
3920
|
-
>
|
|
3921
|
-
<button
|
|
3922
|
-
class="pf-c-nav__scroll-button"
|
|
3923
|
-
disabled
|
|
3924
|
-
aria-label="Scroll left"
|
|
3925
|
-
>
|
|
3926
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
3927
|
-
</button>
|
|
3928
|
-
<ul class="pf-c-nav__list">
|
|
3929
|
-
<li class="pf-c-nav__item">
|
|
3930
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
|
|
3931
|
-
</li>
|
|
3932
|
-
<li class="pf-c-nav__item">
|
|
3933
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 2</a>
|
|
3934
|
-
</li>
|
|
3935
|
-
<li class="pf-c-nav__item">
|
|
3936
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 3</a>
|
|
3937
|
-
</li>
|
|
3938
|
-
<li class="pf-c-nav__item">
|
|
3939
|
-
<a href="#" class="pf-c-nav__link">Horizontal nav item 4</a>
|
|
3940
|
-
</li>
|
|
3941
|
-
<li class="pf-c-nav__item">
|
|
3942
|
-
<a
|
|
3943
|
-
href="#"
|
|
3944
|
-
class="pf-c-nav__link pf-m-current"
|
|
3945
|
-
aria-current="page"
|
|
3946
|
-
>Horizontal nav item 5</a>
|
|
3947
|
-
</li>
|
|
3948
|
-
</ul>
|
|
3949
|
-
<button
|
|
3950
|
-
class="pf-c-nav__scroll-button"
|
|
3951
|
-
aria-label="Scroll right"
|
|
3952
|
-
>
|
|
3953
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3954
|
-
</button>
|
|
3955
|
-
</nav>
|
|
3956
|
-
</div>
|
|
3957
3800
|
<div
|
|
3958
3801
|
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
3959
3802
|
>
|
|
@@ -3964,12 +3807,12 @@ section: components
|
|
|
3964
3807
|
<nav
|
|
3965
3808
|
class="pf-c-app-launcher"
|
|
3966
3809
|
aria-label="Application launcher"
|
|
3967
|
-
id="nav-horizontal-example-masthead-application-launcher"
|
|
3810
|
+
id="nav-horizontal-subnav-example-masthead-application-launcher"
|
|
3968
3811
|
>
|
|
3969
3812
|
<button
|
|
3970
3813
|
class="pf-c-app-launcher__toggle"
|
|
3971
3814
|
type="button"
|
|
3972
|
-
id="nav-horizontal-example-masthead-application-launcher-button"
|
|
3815
|
+
id="nav-horizontal-subnav-example-masthead-application-launcher-button"
|
|
3973
3816
|
aria-expanded="false"
|
|
3974
3817
|
aria-label="Application launcher"
|
|
3975
3818
|
>
|
|
@@ -4109,7 +3952,7 @@ section: components
|
|
|
4109
3952
|
<div class="pf-c-dropdown">
|
|
4110
3953
|
<button
|
|
4111
3954
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
4112
|
-
id="nav-horizontal-example-masthead-settings-button"
|
|
3955
|
+
id="nav-horizontal-subnav-example-masthead-settings-button"
|
|
4113
3956
|
aria-expanded="false"
|
|
4114
3957
|
type="button"
|
|
4115
3958
|
aria-label="Settings"
|
|
@@ -4118,7 +3961,7 @@ section: components
|
|
|
4118
3961
|
</button>
|
|
4119
3962
|
<ul
|
|
4120
3963
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
4121
|
-
aria-labelledby="nav-horizontal-example-masthead-settings-button"
|
|
3964
|
+
aria-labelledby="nav-horizontal-subnav-example-masthead-settings-button"
|
|
4122
3965
|
hidden
|
|
4123
3966
|
>
|
|
4124
3967
|
<li>
|
|
@@ -4140,7 +3983,7 @@ section: components
|
|
|
4140
3983
|
<div class="pf-c-dropdown">
|
|
4141
3984
|
<button
|
|
4142
3985
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
4143
|
-
id="nav-horizontal-example-masthead-help-button"
|
|
3986
|
+
id="nav-horizontal-subnav-example-masthead-help-button"
|
|
4144
3987
|
aria-expanded="false"
|
|
4145
3988
|
type="button"
|
|
4146
3989
|
aria-label="Help"
|
|
@@ -4149,7 +3992,7 @@ section: components
|
|
|
4149
3992
|
</button>
|
|
4150
3993
|
<ul
|
|
4151
3994
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
4152
|
-
aria-labelledby="nav-horizontal-example-masthead-help-button"
|
|
3995
|
+
aria-labelledby="nav-horizontal-subnav-example-masthead-help-button"
|
|
4153
3996
|
hidden
|
|
4154
3997
|
>
|
|
4155
3998
|
<li>
|
|
@@ -4649,7 +4492,7 @@ section: components
|
|
|
4649
4492
|
>
|
|
4650
4493
|
<button
|
|
4651
4494
|
class="pf-c-dropdown__toggle"
|
|
4652
|
-
id="nav-horizontal-example-masthead-profile-button"
|
|
4495
|
+
id="nav-horizontal-subnav-example-masthead-profile-button"
|
|
4653
4496
|
aria-expanded="false"
|
|
4654
4497
|
type="button"
|
|
4655
4498
|
>
|
|
@@ -4701,62 +4544,135 @@ section: components
|
|
|
4701
4544
|
</div>
|
|
4702
4545
|
</div>
|
|
4703
4546
|
</header>
|
|
4704
|
-
<
|
|
4705
|
-
class="pf-c-
|
|
4706
|
-
|
|
4707
|
-
|
|
4708
|
-
|
|
4709
|
-
|
|
4710
|
-
|
|
4711
|
-
<
|
|
4712
|
-
class="pf-c-
|
|
4713
|
-
|
|
4714
|
-
|
|
4715
|
-
|
|
4716
|
-
|
|
4717
|
-
|
|
4718
|
-
|
|
4719
|
-
|
|
4720
|
-
|
|
4721
|
-
|
|
4722
|
-
|
|
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
|
-
|
|
4547
|
+
<div class="pf-c-page__sidebar">
|
|
4548
|
+
<div class="pf-c-page__sidebar-body">
|
|
4549
|
+
<nav
|
|
4550
|
+
class="pf-c-nav"
|
|
4551
|
+
id="nav-horizontal-subnav-example-expandable-nav"
|
|
4552
|
+
aria-label="Global"
|
|
4553
|
+
>
|
|
4554
|
+
<ul class="pf-c-nav__list">
|
|
4555
|
+
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
|
|
4556
|
+
<button
|
|
4557
|
+
class="pf-c-nav__link"
|
|
4558
|
+
id="nav-horizontal-subnav-example-expandable-nav-link1"
|
|
4559
|
+
aria-expanded="true"
|
|
4560
|
+
>
|
|
4561
|
+
System panel
|
|
4562
|
+
<span class="pf-c-nav__toggle">
|
|
4563
|
+
<span class="pf-c-nav__toggle-icon">
|
|
4564
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4565
|
+
</span>
|
|
4566
|
+
</span>
|
|
4567
|
+
</button>
|
|
4568
|
+
<section
|
|
4569
|
+
class="pf-c-nav__subnav"
|
|
4570
|
+
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link1"
|
|
4571
|
+
>
|
|
4572
|
+
<ul class="pf-c-nav__list">
|
|
4573
|
+
<li class="pf-c-nav__item">
|
|
4574
|
+
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
4575
|
+
</li>
|
|
4576
|
+
<li class="pf-c-nav__item">
|
|
4577
|
+
<a
|
|
4578
|
+
href="#"
|
|
4579
|
+
class="pf-c-nav__link pf-m-current"
|
|
4580
|
+
aria-current="page"
|
|
4581
|
+
>Resource usage</a>
|
|
4582
|
+
</li>
|
|
4583
|
+
<li class="pf-c-nav__item">
|
|
4584
|
+
<a href="#" class="pf-c-nav__link">Hypervisors</a>
|
|
4585
|
+
</li>
|
|
4586
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
4587
|
+
|
|
4588
|
+
<li class="pf-c-nav__item">
|
|
4589
|
+
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
4590
|
+
</li>
|
|
4591
|
+
<li class="pf-c-nav__item">
|
|
4592
|
+
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
4593
|
+
</li>
|
|
4594
|
+
<li class="pf-c-nav__item">
|
|
4595
|
+
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
4596
|
+
</li>
|
|
4597
|
+
</ul>
|
|
4598
|
+
</section>
|
|
4599
|
+
</li>
|
|
4600
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
4601
|
+
<button
|
|
4602
|
+
class="pf-c-nav__link"
|
|
4603
|
+
id="nav-horizontal-subnav-example-expandable-nav-link2"
|
|
4604
|
+
aria-expanded="false"
|
|
4605
|
+
>
|
|
4606
|
+
Policy
|
|
4607
|
+
<span class="pf-c-nav__toggle">
|
|
4608
|
+
<span class="pf-c-nav__toggle-icon">
|
|
4609
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4610
|
+
</span>
|
|
4611
|
+
</span>
|
|
4612
|
+
</button>
|
|
4613
|
+
<section
|
|
4614
|
+
class="pf-c-nav__subnav"
|
|
4615
|
+
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link2"
|
|
4616
|
+
hidden
|
|
4617
|
+
>
|
|
4618
|
+
<ul class="pf-c-nav__list">
|
|
4619
|
+
<li class="pf-c-nav__item">
|
|
4620
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
4621
|
+
</li>
|
|
4622
|
+
<li class="pf-c-nav__item">
|
|
4623
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
4624
|
+
</li>
|
|
4625
|
+
</ul>
|
|
4626
|
+
</section>
|
|
4627
|
+
</li>
|
|
4628
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
4629
|
+
<button
|
|
4630
|
+
class="pf-c-nav__link"
|
|
4631
|
+
id="nav-horizontal-subnav-example-expandable-nav-link3"
|
|
4632
|
+
aria-expanded="false"
|
|
4633
|
+
>
|
|
4634
|
+
Authentication
|
|
4635
|
+
<span class="pf-c-nav__toggle">
|
|
4636
|
+
<span class="pf-c-nav__toggle-icon">
|
|
4637
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4638
|
+
</span>
|
|
4639
|
+
</span>
|
|
4640
|
+
</button>
|
|
4641
|
+
<section
|
|
4642
|
+
class="pf-c-nav__subnav"
|
|
4643
|
+
aria-labelledby="nav-horizontal-subnav-example-expandable-nav-link3"
|
|
4644
|
+
hidden
|
|
4645
|
+
>
|
|
4646
|
+
<ul class="pf-c-nav__list">
|
|
4647
|
+
<li class="pf-c-nav__item">
|
|
4648
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
4649
|
+
</li>
|
|
4650
|
+
<li class="pf-c-nav__item">
|
|
4651
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
4652
|
+
</li>
|
|
4653
|
+
</ul>
|
|
4654
|
+
</section>
|
|
4655
|
+
</li>
|
|
4656
|
+
</ul>
|
|
4657
|
+
</nav>
|
|
4658
|
+
</div>
|
|
4659
|
+
</div>
|
|
4660
|
+
<main
|
|
4661
|
+
class="pf-c-page__main"
|
|
4662
|
+
tabindex="-1"
|
|
4663
|
+
id="main-content-nav-horizontal-subnav-example"
|
|
4664
|
+
>
|
|
4665
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
4666
|
+
<div class="pf-c-page__main-body">
|
|
4667
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
4668
|
+
<ol class="pf-c-breadcrumb__list">
|
|
4669
|
+
<li class="pf-c-breadcrumb__item">
|
|
4670
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
4671
|
+
</li>
|
|
4672
|
+
<li class="pf-c-breadcrumb__item">
|
|
4673
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
4674
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4675
|
+
</span>
|
|
4760
4676
|
|
|
4761
4677
|
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
4762
4678
|
</li>
|
|
@@ -4790,7 +4706,7 @@ section: components
|
|
|
4790
4706
|
</div>
|
|
4791
4707
|
</div>
|
|
4792
4708
|
</section>
|
|
4793
|
-
<section class="pf-c-page__main-section pf-m-limit-width
|
|
4709
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
4794
4710
|
<div class="pf-c-page__main-body">
|
|
4795
4711
|
<div class="pf-l-gallery pf-m-gutter">
|
|
4796
4712
|
<div class="pf-c-card">
|
|
@@ -4831,15 +4747,18 @@ section: components
|
|
|
4831
4747
|
|
|
4832
4748
|
```
|
|
4833
4749
|
|
|
4834
|
-
###
|
|
4750
|
+
### Horizontal nav with horizontal subnav
|
|
4835
4751
|
|
|
4836
4752
|
```html isFullscreen
|
|
4837
|
-
<div class="pf-c-page" id="nav-
|
|
4753
|
+
<div class="pf-c-page" id="nav-horizontal-example">
|
|
4838
4754
|
<a
|
|
4839
4755
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
4840
|
-
href="#main-content-nav-
|
|
4756
|
+
href="#main-content-nav-horizontal-example"
|
|
4841
4757
|
>Skip to content</a>
|
|
4842
|
-
<header
|
|
4758
|
+
<header
|
|
4759
|
+
class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
|
|
4760
|
+
id="nav-horizontal-example-masthead"
|
|
4761
|
+
>
|
|
4843
4762
|
<span class="pf-c-masthead__toggle">
|
|
4844
4763
|
<button
|
|
4845
4764
|
class="pf-c-button pf-m-plain"
|
|
@@ -4870,10 +4789,55 @@ section: components
|
|
|
4870
4789
|
<div class="pf-c-masthead__content">
|
|
4871
4790
|
<div
|
|
4872
4791
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
4873
|
-
id="nav-
|
|
4792
|
+
id="nav-horizontal-example-masthead-toolbar"
|
|
4874
4793
|
>
|
|
4875
4794
|
<div class="pf-c-toolbar__content">
|
|
4876
4795
|
<div class="pf-c-toolbar__content-section">
|
|
4796
|
+
<div
|
|
4797
|
+
class="pf-c-toolbar__item pf-m-overflow-container"
|
|
4798
|
+
style="--pf-c-toolbar__item--MinWidth: 18ch;"
|
|
4799
|
+
>
|
|
4800
|
+
<nav
|
|
4801
|
+
class="pf-c-nav pf-m-horizontal pf-m-scrollable"
|
|
4802
|
+
id="-horizontal-nav"
|
|
4803
|
+
aria-label="Global"
|
|
4804
|
+
>
|
|
4805
|
+
<button
|
|
4806
|
+
class="pf-c-nav__scroll-button"
|
|
4807
|
+
disabled
|
|
4808
|
+
aria-label="Scroll left"
|
|
4809
|
+
>
|
|
4810
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
4811
|
+
</button>
|
|
4812
|
+
<ul class="pf-c-nav__list">
|
|
4813
|
+
<li class="pf-c-nav__item">
|
|
4814
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 1</a>
|
|
4815
|
+
</li>
|
|
4816
|
+
<li class="pf-c-nav__item">
|
|
4817
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 2</a>
|
|
4818
|
+
</li>
|
|
4819
|
+
<li class="pf-c-nav__item">
|
|
4820
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 3</a>
|
|
4821
|
+
</li>
|
|
4822
|
+
<li class="pf-c-nav__item">
|
|
4823
|
+
<a href="#" class="pf-c-nav__link">Horizontal nav item 4</a>
|
|
4824
|
+
</li>
|
|
4825
|
+
<li class="pf-c-nav__item">
|
|
4826
|
+
<a
|
|
4827
|
+
href="#"
|
|
4828
|
+
class="pf-c-nav__link pf-m-current"
|
|
4829
|
+
aria-current="page"
|
|
4830
|
+
>Horizontal nav item 5</a>
|
|
4831
|
+
</li>
|
|
4832
|
+
</ul>
|
|
4833
|
+
<button
|
|
4834
|
+
class="pf-c-nav__scroll-button"
|
|
4835
|
+
aria-label="Scroll right"
|
|
4836
|
+
>
|
|
4837
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4838
|
+
</button>
|
|
4839
|
+
</nav>
|
|
4840
|
+
</div>
|
|
4877
4841
|
<div
|
|
4878
4842
|
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
4879
4843
|
>
|
|
@@ -4884,12 +4848,12 @@ section: components
|
|
|
4884
4848
|
<nav
|
|
4885
4849
|
class="pf-c-app-launcher"
|
|
4886
4850
|
aria-label="Application launcher"
|
|
4887
|
-
id="nav-
|
|
4851
|
+
id="nav-horizontal-example-masthead-application-launcher"
|
|
4888
4852
|
>
|
|
4889
4853
|
<button
|
|
4890
4854
|
class="pf-c-app-launcher__toggle"
|
|
4891
4855
|
type="button"
|
|
4892
|
-
id="nav-
|
|
4856
|
+
id="nav-horizontal-example-masthead-application-launcher-button"
|
|
4893
4857
|
aria-expanded="false"
|
|
4894
4858
|
aria-label="Application launcher"
|
|
4895
4859
|
>
|
|
@@ -5029,7 +4993,7 @@ section: components
|
|
|
5029
4993
|
<div class="pf-c-dropdown">
|
|
5030
4994
|
<button
|
|
5031
4995
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
5032
|
-
id="nav-
|
|
4996
|
+
id="nav-horizontal-example-masthead-settings-button"
|
|
5033
4997
|
aria-expanded="false"
|
|
5034
4998
|
type="button"
|
|
5035
4999
|
aria-label="Settings"
|
|
@@ -5038,7 +5002,7 @@ section: components
|
|
|
5038
5002
|
</button>
|
|
5039
5003
|
<ul
|
|
5040
5004
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
5041
|
-
aria-labelledby="nav-
|
|
5005
|
+
aria-labelledby="nav-horizontal-example-masthead-settings-button"
|
|
5042
5006
|
hidden
|
|
5043
5007
|
>
|
|
5044
5008
|
<li>
|
|
@@ -5060,7 +5024,7 @@ section: components
|
|
|
5060
5024
|
<div class="pf-c-dropdown">
|
|
5061
5025
|
<button
|
|
5062
5026
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
5063
|
-
id="nav-
|
|
5027
|
+
id="nav-horizontal-example-masthead-help-button"
|
|
5064
5028
|
aria-expanded="false"
|
|
5065
5029
|
type="button"
|
|
5066
5030
|
aria-label="Help"
|
|
@@ -5069,7 +5033,7 @@ section: components
|
|
|
5069
5033
|
</button>
|
|
5070
5034
|
<ul
|
|
5071
5035
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
5072
|
-
aria-labelledby="nav-
|
|
5036
|
+
aria-labelledby="nav-horizontal-example-masthead-help-button"
|
|
5073
5037
|
hidden
|
|
5074
5038
|
>
|
|
5075
5039
|
<li>
|
|
@@ -5569,180 +5533,67 @@ section: components
|
|
|
5569
5533
|
>
|
|
5570
5534
|
<button
|
|
5571
5535
|
class="pf-c-dropdown__toggle"
|
|
5572
|
-
id="nav-
|
|
5536
|
+
id="nav-horizontal-example-masthead-profile-button"
|
|
5573
5537
|
aria-expanded="false"
|
|
5574
5538
|
type="button"
|
|
5575
5539
|
>
|
|
5576
5540
|
<span class="pf-c-dropdown__toggle-image">
|
|
5577
5541
|
<img
|
|
5578
5542
|
class="pf-c-avatar"
|
|
5579
|
-
alt="Avatar image"
|
|
5580
|
-
src="/assets/images/img_avatar-light.svg"
|
|
5581
|
-
/>
|
|
5582
|
-
</span>
|
|
5583
|
-
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
5584
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
5585
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
5586
|
-
</span>
|
|
5587
|
-
</button>
|
|
5588
|
-
<div class="pf-c-dropdown__menu" hidden>
|
|
5589
|
-
<section class="pf-c-dropdown__group">
|
|
5590
|
-
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5591
|
-
<div class="pf-u-font-size-sm">Account number:</div>
|
|
5592
|
-
<div>123456789</div>
|
|
5593
|
-
</div>
|
|
5594
|
-
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5595
|
-
<div class="pf-u-font-size-sm">Username:</div>
|
|
5596
|
-
<div>mshaksho@redhat.com</div>
|
|
5597
|
-
</div>
|
|
5598
|
-
</section>
|
|
5599
|
-
<hr class="pf-c-divider" />
|
|
5600
|
-
<section class="pf-c-dropdown__group">
|
|
5601
|
-
<ul>
|
|
5602
|
-
<li>
|
|
5603
|
-
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
5604
|
-
</li>
|
|
5605
|
-
<li>
|
|
5606
|
-
<a
|
|
5607
|
-
class="pf-c-dropdown__menu-item"
|
|
5608
|
-
href="#"
|
|
5609
|
-
>User management</a>
|
|
5610
|
-
</li>
|
|
5611
|
-
<li>
|
|
5612
|
-
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
5613
|
-
</li>
|
|
5614
|
-
</ul>
|
|
5615
|
-
</section>
|
|
5616
|
-
</div>
|
|
5617
|
-
</div>
|
|
5618
|
-
</div>
|
|
5619
|
-
</div>
|
|
5620
|
-
</div>
|
|
5621
|
-
</div>
|
|
5622
|
-
</div>
|
|
5623
|
-
</header>
|
|
5624
|
-
<div class="pf-c-page__sidebar">
|
|
5625
|
-
<div class="pf-c-page__sidebar-body">
|
|
5626
|
-
<nav
|
|
5627
|
-
class="pf-c-nav"
|
|
5628
|
-
id="nav-legacy-teriary-example-expandable-nav"
|
|
5629
|
-
aria-label="Global"
|
|
5630
|
-
>
|
|
5631
|
-
<ul class="pf-c-nav__list">
|
|
5632
|
-
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
|
|
5633
|
-
<button
|
|
5634
|
-
class="pf-c-nav__link"
|
|
5635
|
-
id="nav-legacy-teriary-example-expandable-nav-link1"
|
|
5636
|
-
aria-expanded="true"
|
|
5637
|
-
>
|
|
5638
|
-
System panel
|
|
5639
|
-
<span class="pf-c-nav__toggle">
|
|
5640
|
-
<span class="pf-c-nav__toggle-icon">
|
|
5641
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5642
|
-
</span>
|
|
5643
|
-
</span>
|
|
5644
|
-
</button>
|
|
5645
|
-
<section
|
|
5646
|
-
class="pf-c-nav__subnav"
|
|
5647
|
-
aria-labelledby="nav-legacy-teriary-example-expandable-nav-link1"
|
|
5648
|
-
>
|
|
5649
|
-
<ul class="pf-c-nav__list">
|
|
5650
|
-
<li class="pf-c-nav__item">
|
|
5651
|
-
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
5652
|
-
</li>
|
|
5653
|
-
<li class="pf-c-nav__item">
|
|
5654
|
-
<a
|
|
5655
|
-
href="#"
|
|
5656
|
-
class="pf-c-nav__link pf-m-current"
|
|
5657
|
-
aria-current="page"
|
|
5658
|
-
>Resource usage</a>
|
|
5659
|
-
</li>
|
|
5660
|
-
<li class="pf-c-nav__item">
|
|
5661
|
-
<a href="#" class="pf-c-nav__link">Hypervisors</a>
|
|
5662
|
-
</li>
|
|
5663
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
5664
|
-
|
|
5665
|
-
<li class="pf-c-nav__item">
|
|
5666
|
-
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
5667
|
-
</li>
|
|
5668
|
-
<li class="pf-c-nav__item">
|
|
5669
|
-
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
5670
|
-
</li>
|
|
5671
|
-
<li class="pf-c-nav__item">
|
|
5672
|
-
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
5673
|
-
</li>
|
|
5674
|
-
</ul>
|
|
5675
|
-
</section>
|
|
5676
|
-
</li>
|
|
5677
|
-
<li class="pf-c-nav__item pf-m-expandable">
|
|
5678
|
-
<button
|
|
5679
|
-
class="pf-c-nav__link"
|
|
5680
|
-
id="nav-legacy-teriary-example-expandable-nav-link2"
|
|
5681
|
-
aria-expanded="false"
|
|
5682
|
-
>
|
|
5683
|
-
Policy
|
|
5684
|
-
<span class="pf-c-nav__toggle">
|
|
5685
|
-
<span class="pf-c-nav__toggle-icon">
|
|
5686
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5687
|
-
</span>
|
|
5688
|
-
</span>
|
|
5689
|
-
</button>
|
|
5690
|
-
<section
|
|
5691
|
-
class="pf-c-nav__subnav"
|
|
5692
|
-
aria-labelledby="nav-legacy-teriary-example-expandable-nav-link2"
|
|
5693
|
-
hidden
|
|
5694
|
-
>
|
|
5695
|
-
<ul class="pf-c-nav__list">
|
|
5696
|
-
<li class="pf-c-nav__item">
|
|
5697
|
-
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
5698
|
-
</li>
|
|
5699
|
-
<li class="pf-c-nav__item">
|
|
5700
|
-
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
5701
|
-
</li>
|
|
5702
|
-
</ul>
|
|
5703
|
-
</section>
|
|
5704
|
-
</li>
|
|
5705
|
-
<li class="pf-c-nav__item pf-m-expandable">
|
|
5706
|
-
<button
|
|
5707
|
-
class="pf-c-nav__link"
|
|
5708
|
-
id="nav-legacy-teriary-example-expandable-nav-link3"
|
|
5709
|
-
aria-expanded="false"
|
|
5710
|
-
>
|
|
5711
|
-
Authentication
|
|
5712
|
-
<span class="pf-c-nav__toggle">
|
|
5713
|
-
<span class="pf-c-nav__toggle-icon">
|
|
5714
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5715
|
-
</span>
|
|
5716
|
-
</span>
|
|
5717
|
-
</button>
|
|
5718
|
-
<section
|
|
5719
|
-
class="pf-c-nav__subnav"
|
|
5720
|
-
aria-labelledby="nav-legacy-teriary-example-expandable-nav-link3"
|
|
5721
|
-
hidden
|
|
5722
|
-
>
|
|
5723
|
-
<ul class="pf-c-nav__list">
|
|
5724
|
-
<li class="pf-c-nav__item">
|
|
5725
|
-
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
5726
|
-
</li>
|
|
5727
|
-
<li class="pf-c-nav__item">
|
|
5728
|
-
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
5729
|
-
</li>
|
|
5730
|
-
</ul>
|
|
5731
|
-
</section>
|
|
5732
|
-
</li>
|
|
5733
|
-
</ul>
|
|
5734
|
-
</nav>
|
|
5543
|
+
alt="Avatar image"
|
|
5544
|
+
src="/assets/images/img_avatar-light.svg"
|
|
5545
|
+
/>
|
|
5546
|
+
</span>
|
|
5547
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
5548
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
5549
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
5550
|
+
</span>
|
|
5551
|
+
</button>
|
|
5552
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
5553
|
+
<section class="pf-c-dropdown__group">
|
|
5554
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5555
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
5556
|
+
<div>123456789</div>
|
|
5557
|
+
</div>
|
|
5558
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5559
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
5560
|
+
<div>mshaksho@redhat.com</div>
|
|
5561
|
+
</div>
|
|
5562
|
+
</section>
|
|
5563
|
+
<hr class="pf-c-divider" />
|
|
5564
|
+
<section class="pf-c-dropdown__group">
|
|
5565
|
+
<ul>
|
|
5566
|
+
<li>
|
|
5567
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
5568
|
+
</li>
|
|
5569
|
+
<li>
|
|
5570
|
+
<a
|
|
5571
|
+
class="pf-c-dropdown__menu-item"
|
|
5572
|
+
href="#"
|
|
5573
|
+
>User management</a>
|
|
5574
|
+
</li>
|
|
5575
|
+
<li>
|
|
5576
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
5577
|
+
</li>
|
|
5578
|
+
</ul>
|
|
5579
|
+
</section>
|
|
5580
|
+
</div>
|
|
5581
|
+
</div>
|
|
5582
|
+
</div>
|
|
5583
|
+
</div>
|
|
5584
|
+
</div>
|
|
5585
|
+
</div>
|
|
5735
5586
|
</div>
|
|
5736
|
-
</
|
|
5587
|
+
</header>
|
|
5737
5588
|
<main
|
|
5738
5589
|
class="pf-c-page__main"
|
|
5739
5590
|
tabindex="-1"
|
|
5740
|
-
id="main-content-nav-
|
|
5591
|
+
id="main-content-nav-horizontal-example"
|
|
5741
5592
|
>
|
|
5742
|
-
<section class="pf-c-page__main-
|
|
5593
|
+
<section class="pf-c-page__main-subnav pf-m-limit-width">
|
|
5743
5594
|
<div class="pf-c-page__main-body">
|
|
5744
5595
|
<nav
|
|
5745
|
-
class="pf-c-nav pf-m-horizontal
|
|
5596
|
+
class="pf-c-nav pf-m-horizontal-subnav pf-m-scrollable"
|
|
5746
5597
|
aria-label="Local"
|
|
5747
5598
|
>
|
|
5748
5599
|
<button
|
|
@@ -5758,19 +5609,19 @@ section: components
|
|
|
5758
5609
|
href="#"
|
|
5759
5610
|
class="pf-c-nav__link pf-m-current"
|
|
5760
5611
|
aria-current="page"
|
|
5761
|
-
>
|
|
5612
|
+
>Horizontal subnav item 1</a>
|
|
5762
5613
|
</li>
|
|
5763
5614
|
<li class="pf-c-nav__item">
|
|
5764
|
-
<a href="#" class="pf-c-nav__link">
|
|
5615
|
+
<a href="#" class="pf-c-nav__link">Horizontal subnav item 2</a>
|
|
5765
5616
|
</li>
|
|
5766
5617
|
<li class="pf-c-nav__item">
|
|
5767
|
-
<a href="#" class="pf-c-nav__link">
|
|
5618
|
+
<a href="#" class="pf-c-nav__link">Horizontal subnav item 3</a>
|
|
5768
5619
|
</li>
|
|
5769
5620
|
<li class="pf-c-nav__item">
|
|
5770
|
-
<a href="#" class="pf-c-nav__link">
|
|
5621
|
+
<a href="#" class="pf-c-nav__link">Horizontal subnav item 4</a>
|
|
5771
5622
|
</li>
|
|
5772
5623
|
<li class="pf-c-nav__item">
|
|
5773
|
-
<a href="#" class="pf-c-nav__link">
|
|
5624
|
+
<a href="#" class="pf-c-nav__link">Horizontal subnav item 5</a>
|
|
5774
5625
|
</li>
|
|
5775
5626
|
</ul>
|
|
5776
5627
|
<button class="pf-c-nav__scroll-button" aria-label="Scroll right">
|
|
@@ -5823,7 +5674,7 @@ section: components
|
|
|
5823
5674
|
</div>
|
|
5824
5675
|
</div>
|
|
5825
5676
|
</section>
|
|
5826
|
-
<section class="pf-c-page__main-section pf-m-limit-width
|
|
5677
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
5827
5678
|
<div class="pf-c-page__main-body">
|
|
5828
5679
|
<div class="pf-l-gallery pf-m-gutter">
|
|
5829
5680
|
<div class="pf-c-card">
|
|
@@ -5864,15 +5715,15 @@ section: components
|
|
|
5864
5715
|
|
|
5865
5716
|
```
|
|
5866
5717
|
|
|
5867
|
-
###
|
|
5718
|
+
### Legacy tertiary nav
|
|
5868
5719
|
|
|
5869
5720
|
```html isFullscreen
|
|
5870
|
-
<div class="pf-c-page" id="nav-
|
|
5721
|
+
<div class="pf-c-page" id="nav-legacy-teriary-example">
|
|
5871
5722
|
<a
|
|
5872
5723
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
5873
|
-
href="#main-content-nav-
|
|
5724
|
+
href="#main-content-nav-legacy-teriary-example"
|
|
5874
5725
|
>Skip to content</a>
|
|
5875
|
-
<header class="pf-c-masthead" id="nav-
|
|
5726
|
+
<header class="pf-c-masthead" id="nav-legacy-teriary-example-masthead">
|
|
5876
5727
|
<span class="pf-c-masthead__toggle">
|
|
5877
5728
|
<button
|
|
5878
5729
|
class="pf-c-button pf-m-plain"
|
|
@@ -5903,7 +5754,7 @@ section: components
|
|
|
5903
5754
|
<div class="pf-c-masthead__content">
|
|
5904
5755
|
<div
|
|
5905
5756
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
5906
|
-
id="nav-
|
|
5757
|
+
id="nav-legacy-teriary-example-masthead-toolbar"
|
|
5907
5758
|
>
|
|
5908
5759
|
<div class="pf-c-toolbar__content">
|
|
5909
5760
|
<div class="pf-c-toolbar__content-section">
|
|
@@ -5917,12 +5768,12 @@ section: components
|
|
|
5917
5768
|
<nav
|
|
5918
5769
|
class="pf-c-app-launcher"
|
|
5919
5770
|
aria-label="Application launcher"
|
|
5920
|
-
id="nav-
|
|
5771
|
+
id="nav-legacy-teriary-example-masthead-application-launcher"
|
|
5921
5772
|
>
|
|
5922
5773
|
<button
|
|
5923
5774
|
class="pf-c-app-launcher__toggle"
|
|
5924
5775
|
type="button"
|
|
5925
|
-
id="nav-
|
|
5776
|
+
id="nav-legacy-teriary-example-masthead-application-launcher-button"
|
|
5926
5777
|
aria-expanded="false"
|
|
5927
5778
|
aria-label="Application launcher"
|
|
5928
5779
|
>
|
|
@@ -6062,7 +5913,7 @@ section: components
|
|
|
6062
5913
|
<div class="pf-c-dropdown">
|
|
6063
5914
|
<button
|
|
6064
5915
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
6065
|
-
id="nav-
|
|
5916
|
+
id="nav-legacy-teriary-example-masthead-settings-button"
|
|
6066
5917
|
aria-expanded="false"
|
|
6067
5918
|
type="button"
|
|
6068
5919
|
aria-label="Settings"
|
|
@@ -6071,7 +5922,7 @@ section: components
|
|
|
6071
5922
|
</button>
|
|
6072
5923
|
<ul
|
|
6073
5924
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
6074
|
-
aria-labelledby="nav-
|
|
5925
|
+
aria-labelledby="nav-legacy-teriary-example-masthead-settings-button"
|
|
6075
5926
|
hidden
|
|
6076
5927
|
>
|
|
6077
5928
|
<li>
|
|
@@ -6093,7 +5944,7 @@ section: components
|
|
|
6093
5944
|
<div class="pf-c-dropdown">
|
|
6094
5945
|
<button
|
|
6095
5946
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
6096
|
-
id="nav-
|
|
5947
|
+
id="nav-legacy-teriary-example-masthead-help-button"
|
|
6097
5948
|
aria-expanded="false"
|
|
6098
5949
|
type="button"
|
|
6099
5950
|
aria-label="Help"
|
|
@@ -6102,7 +5953,7 @@ section: components
|
|
|
6102
5953
|
</button>
|
|
6103
5954
|
<ul
|
|
6104
5955
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
6105
|
-
aria-labelledby="nav-
|
|
5956
|
+
aria-labelledby="nav-legacy-teriary-example-masthead-help-button"
|
|
6106
5957
|
hidden
|
|
6107
5958
|
>
|
|
6108
5959
|
<li>
|
|
@@ -6602,7 +6453,7 @@ section: components
|
|
|
6602
6453
|
>
|
|
6603
6454
|
<button
|
|
6604
6455
|
class="pf-c-dropdown__toggle"
|
|
6605
|
-
id="nav-
|
|
6456
|
+
id="nav-legacy-teriary-example-masthead-profile-button"
|
|
6606
6457
|
aria-expanded="false"
|
|
6607
6458
|
type="button"
|
|
6608
6459
|
>
|
|
@@ -6658,58 +6509,160 @@ section: components
|
|
|
6658
6509
|
<div class="pf-c-page__sidebar-body">
|
|
6659
6510
|
<nav
|
|
6660
6511
|
class="pf-c-nav"
|
|
6661
|
-
id="nav-
|
|
6512
|
+
id="nav-legacy-teriary-example-expandable-nav"
|
|
6662
6513
|
aria-label="Global"
|
|
6663
6514
|
>
|
|
6664
|
-
<
|
|
6665
|
-
<
|
|
6515
|
+
<ul class="pf-c-nav__list">
|
|
6516
|
+
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
|
|
6517
|
+
<button
|
|
6518
|
+
class="pf-c-nav__link"
|
|
6519
|
+
id="nav-legacy-teriary-example-expandable-nav-link1"
|
|
6520
|
+
aria-expanded="true"
|
|
6521
|
+
>
|
|
6522
|
+
System panel
|
|
6523
|
+
<span class="pf-c-nav__toggle">
|
|
6524
|
+
<span class="pf-c-nav__toggle-icon">
|
|
6525
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
6526
|
+
</span>
|
|
6527
|
+
</span>
|
|
6528
|
+
</button>
|
|
6529
|
+
<section
|
|
6530
|
+
class="pf-c-nav__subnav"
|
|
6531
|
+
aria-labelledby="nav-legacy-teriary-example-expandable-nav-link1"
|
|
6532
|
+
>
|
|
6533
|
+
<ul class="pf-c-nav__list">
|
|
6534
|
+
<li class="pf-c-nav__item">
|
|
6535
|
+
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
6536
|
+
</li>
|
|
6537
|
+
<li class="pf-c-nav__item">
|
|
6538
|
+
<a
|
|
6539
|
+
href="#"
|
|
6540
|
+
class="pf-c-nav__link pf-m-current"
|
|
6541
|
+
aria-current="page"
|
|
6542
|
+
>Resource usage</a>
|
|
6543
|
+
</li>
|
|
6544
|
+
<li class="pf-c-nav__item">
|
|
6545
|
+
<a href="#" class="pf-c-nav__link">Hypervisors</a>
|
|
6546
|
+
</li>
|
|
6547
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
6548
|
+
|
|
6549
|
+
<li class="pf-c-nav__item">
|
|
6550
|
+
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
6551
|
+
</li>
|
|
6552
|
+
<li class="pf-c-nav__item">
|
|
6553
|
+
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
6554
|
+
</li>
|
|
6555
|
+
<li class="pf-c-nav__item">
|
|
6556
|
+
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
6557
|
+
</li>
|
|
6558
|
+
</ul>
|
|
6559
|
+
</section>
|
|
6560
|
+
</li>
|
|
6561
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
6562
|
+
<button
|
|
6563
|
+
class="pf-c-nav__link"
|
|
6564
|
+
id="nav-legacy-teriary-example-expandable-nav-link2"
|
|
6565
|
+
aria-expanded="false"
|
|
6566
|
+
>
|
|
6567
|
+
Policy
|
|
6568
|
+
<span class="pf-c-nav__toggle">
|
|
6569
|
+
<span class="pf-c-nav__toggle-icon">
|
|
6570
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
6571
|
+
</span>
|
|
6572
|
+
</span>
|
|
6573
|
+
</button>
|
|
6574
|
+
<section
|
|
6575
|
+
class="pf-c-nav__subnav"
|
|
6576
|
+
aria-labelledby="nav-legacy-teriary-example-expandable-nav-link2"
|
|
6577
|
+
hidden
|
|
6578
|
+
>
|
|
6579
|
+
<ul class="pf-c-nav__list">
|
|
6580
|
+
<li class="pf-c-nav__item">
|
|
6581
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
6582
|
+
</li>
|
|
6583
|
+
<li class="pf-c-nav__item">
|
|
6584
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
6585
|
+
</li>
|
|
6586
|
+
</ul>
|
|
6587
|
+
</section>
|
|
6588
|
+
</li>
|
|
6589
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
6590
|
+
<button
|
|
6591
|
+
class="pf-c-nav__link"
|
|
6592
|
+
id="nav-legacy-teriary-example-expandable-nav-link3"
|
|
6593
|
+
aria-expanded="false"
|
|
6594
|
+
>
|
|
6595
|
+
Authentication
|
|
6596
|
+
<span class="pf-c-nav__toggle">
|
|
6597
|
+
<span class="pf-c-nav__toggle-icon">
|
|
6598
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
6599
|
+
</span>
|
|
6600
|
+
</span>
|
|
6601
|
+
</button>
|
|
6602
|
+
<section
|
|
6603
|
+
class="pf-c-nav__subnav"
|
|
6604
|
+
aria-labelledby="nav-legacy-teriary-example-expandable-nav-link3"
|
|
6605
|
+
hidden
|
|
6606
|
+
>
|
|
6607
|
+
<ul class="pf-c-nav__list">
|
|
6608
|
+
<li class="pf-c-nav__item">
|
|
6609
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
6610
|
+
</li>
|
|
6611
|
+
<li class="pf-c-nav__item">
|
|
6612
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
6613
|
+
</li>
|
|
6614
|
+
</ul>
|
|
6615
|
+
</section>
|
|
6616
|
+
</li>
|
|
6617
|
+
</ul>
|
|
6618
|
+
</nav>
|
|
6619
|
+
</div>
|
|
6620
|
+
</div>
|
|
6621
|
+
<main
|
|
6622
|
+
class="pf-c-page__main"
|
|
6623
|
+
tabindex="-1"
|
|
6624
|
+
id="main-content-nav-legacy-teriary-example"
|
|
6625
|
+
>
|
|
6626
|
+
<section class="pf-c-page__main-nav pf-m-limit-width">
|
|
6627
|
+
<div class="pf-c-page__main-body">
|
|
6628
|
+
<nav
|
|
6629
|
+
class="pf-c-nav pf-m-horizontal pf-m-tertiary pf-m-scrollable"
|
|
6630
|
+
aria-label="Local"
|
|
6631
|
+
>
|
|
6632
|
+
<button
|
|
6633
|
+
class="pf-c-nav__scroll-button"
|
|
6634
|
+
disabled
|
|
6635
|
+
aria-label="Scroll left"
|
|
6636
|
+
>
|
|
6637
|
+
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
6638
|
+
</button>
|
|
6666
6639
|
<ul class="pf-c-nav__list">
|
|
6667
|
-
<li class="pf-c-nav__item">
|
|
6668
|
-
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
6669
|
-
</li>
|
|
6670
|
-
<li class="pf-c-nav__item">
|
|
6671
|
-
<a href="#" class="pf-c-nav__link">Resource usage</a>
|
|
6672
|
-
</li>
|
|
6673
6640
|
<li class="pf-c-nav__item">
|
|
6674
6641
|
<a
|
|
6675
6642
|
href="#"
|
|
6676
6643
|
class="pf-c-nav__link pf-m-current"
|
|
6677
6644
|
aria-current="page"
|
|
6678
|
-
>
|
|
6679
|
-
</li>
|
|
6680
|
-
<li class="pf-c-nav__item">
|
|
6681
|
-
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
6682
|
-
</li>
|
|
6683
|
-
<li class="pf-c-nav__item">
|
|
6684
|
-
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
6645
|
+
>Tertiary nav item 1</a>
|
|
6685
6646
|
</li>
|
|
6686
6647
|
<li class="pf-c-nav__item">
|
|
6687
|
-
<a href="#" class="pf-c-nav__link">
|
|
6648
|
+
<a href="#" class="pf-c-nav__link">Tertiary nav item 2</a>
|
|
6688
6649
|
</li>
|
|
6689
|
-
</ul>
|
|
6690
|
-
</section>
|
|
6691
|
-
<section class="pf-c-nav__section" aria-labelledby="grouped-title2">
|
|
6692
|
-
<h2 class="pf-c-nav__section-title" id="grouped-title2">Policy</h2>
|
|
6693
|
-
<ul class="pf-c-nav__list">
|
|
6694
6650
|
<li class="pf-c-nav__item">
|
|
6695
|
-
<a href="#" class="pf-c-nav__link">
|
|
6651
|
+
<a href="#" class="pf-c-nav__link">Tertiary nav item 3</a>
|
|
6696
6652
|
</li>
|
|
6697
6653
|
<li class="pf-c-nav__item">
|
|
6698
|
-
<a href="#" class="pf-c-nav__link">
|
|
6654
|
+
<a href="#" class="pf-c-nav__link">Tertiary nav item 4</a>
|
|
6699
6655
|
</li>
|
|
6700
6656
|
<li class="pf-c-nav__item">
|
|
6701
|
-
<a href="#" class="pf-c-nav__link">
|
|
6657
|
+
<a href="#" class="pf-c-nav__link">Tertiary nav item 5</a>
|
|
6702
6658
|
</li>
|
|
6703
6659
|
</ul>
|
|
6704
|
-
|
|
6705
|
-
|
|
6706
|
-
|
|
6707
|
-
|
|
6708
|
-
|
|
6709
|
-
|
|
6710
|
-
tabindex="-1"
|
|
6711
|
-
id="main-content-nav-grouped-nav-example"
|
|
6712
|
-
>
|
|
6660
|
+
<button class="pf-c-nav__scroll-button" aria-label="Scroll right">
|
|
6661
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
6662
|
+
</button>
|
|
6663
|
+
</nav>
|
|
6664
|
+
</div>
|
|
6665
|
+
</section>
|
|
6713
6666
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
6714
6667
|
<div class="pf-c-page__main-body">
|
|
6715
6668
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|