@patternfly/patternfly-doc-core 1.15.4 → 1.15.5
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/.astro/content-modules.mjs +124 -124
- package/README.mdx +1 -0
- package/cli/cli.ts +54 -35
- package/{src → dist}/apiIndex.json +94 -94
- package/dist/cli/cli.js +48 -30
- package/dist/docs/_worker.js/chunks/fetch_CoXtH9RF.mjs +12 -0
- package/dist/docs/_worker.js/chunks/getConfig_DO3RhTb7.mjs +18 -0
- package/dist/docs/_worker.js/index.js +11 -9
- package/dist/docs/_worker.js/manifest_DIDAejNV.mjs +100 -0
- package/dist/docs/_worker.js/pages/api/_version_/_section_/_page_.astro.mjs +18 -10
- package/dist/docs/_worker.js/pages/api/_version_/_section_.astro.mjs +17 -8
- package/dist/docs/_worker.js/pages/api/_version_.astro.mjs +15 -8
- package/dist/docs/_worker.js/pages/api/openapi.json.astro.mjs +14 -3
- package/dist/docs/_worker.js/pages/api/versions.astro.mjs +11 -4
- package/dist/docs/_worker.js/pages/apiindex.json.astro.mjs +1 -0
- package/dist/docs/_worker.js/pages/props.astro.mjs +1 -16
- package/dist/docs/apiIndex.json +561 -0
- package/dist/docs/components/about-modal/html/index.html +8 -8
- package/dist/docs/components/about-modal/html-demos/index.html +4 -4
- package/dist/docs/components/about-modal/index.html +5 -5
- package/dist/docs/components/accordion/html/index.html +22 -22
- package/dist/docs/components/accordion/index.html +7 -7
- package/dist/docs/components/action-list/html/index.html +11 -11
- package/dist/docs/components/action-list/index.html +9 -9
- package/dist/docs/components/alert/html/index.html +31 -31
- package/dist/docs/components/alert/html-demos/index.html +10 -10
- package/dist/docs/components/alert/index.html +83 -83
- package/dist/docs/components/alert/react/index.html +83 -83
- package/dist/docs/components/avatar/html/index.html +16 -16
- package/dist/docs/components/avatar/index.html +8 -8
- package/dist/docs/components/avatar/react/index.html +5 -5
- package/dist/docs/components/back-to-top/html/index.html +9 -9
- package/dist/docs/components/back-to-top/html-demos/index.html +4 -4
- package/dist/docs/components/back-to-top/index.html +8 -8
- package/dist/docs/components/back-to-top/react/index.html +8 -8
- package/dist/docs/components/backdrop/html/index.html +11 -11
- package/dist/docs/components/backdrop/index.html +6 -6
- package/dist/docs/components/backdrop/react/index.html +6 -6
- package/dist/docs/components/background-image/html/index.html +11 -11
- package/dist/docs/components/background-image/index.html +6 -6
- package/dist/docs/components/background-image/react/index.html +6 -6
- package/dist/docs/components/badge/html/index.html +12 -12
- package/dist/docs/components/badge/index.html +8 -8
- package/dist/docs/components/badge/react/index.html +8 -8
- package/dist/docs/components/banner/html/index.html +12 -12
- package/dist/docs/components/banner/html-demos/index.html +9 -9
- package/dist/docs/components/banner/index.html +11 -11
- package/dist/docs/components/banner/react/index.html +11 -11
- package/dist/docs/components/brand/html/index.html +10 -10
- package/dist/docs/components/brand/index.html +6 -6
- package/dist/docs/components/breadcrumb/html/index.html +15 -15
- package/dist/docs/components/breadcrumb/index.html +6 -6
- package/dist/docs/components/breadcrumb/react/index.html +9 -9
- package/dist/docs/components/button/html/index.html +26 -26
- package/dist/docs/components/button/html-demos/index.html +5 -5
- package/dist/docs/components/button/index.html +34 -34
- package/dist/docs/components/button/react/index.html +37 -37
- package/dist/docs/components/calendar-month/html/index.html +9 -9
- package/dist/docs/components/calendar-month/index.html +6 -6
- package/dist/docs/components/calendar-month/react/index.html +9 -9
- package/dist/docs/components/card/html/index.html +37 -37
- package/dist/docs/components/card/html-demos/index.html +25 -25
- package/dist/docs/components/card/index.html +52 -52
- package/dist/docs/components/card/react/index.html +55 -55
- package/dist/docs/components/checkbox/html/index.html +21 -21
- package/dist/docs/components/checkbox/index.html +16 -16
- package/dist/docs/components/checkbox/react/index.html +13 -13
- package/dist/docs/components/chip/index.html +11 -11
- package/dist/docs/components/chip/react-deprecated/index.html +11 -11
- package/dist/docs/components/clipboard-copy/html/index.html +12 -12
- package/dist/docs/components/clipboard-copy/index.html +15 -15
- package/dist/docs/components/clipboard-copy/react/index.html +15 -15
- package/dist/docs/components/code-block/html/index.html +10 -10
- package/dist/docs/components/code-block/index.html +9 -9
- package/dist/docs/components/code-block/react/index.html +6 -6
- package/dist/docs/components/code-editor/html/index.html +16 -16
- package/dist/docs/components/code-editor/index.html +16 -16
- package/dist/docs/components/content/html/index.html +21 -21
- package/dist/docs/components/content/index.html +19 -19
- package/dist/docs/components/data-list/html/index.html +38 -38
- package/dist/docs/components/data-list/html-demos/index.html +12 -12
- package/dist/docs/components/data-list/index.html +21 -21
- package/dist/docs/components/date-picker/html/index.html +11 -11
- package/dist/docs/components/date-picker/index.html +14 -14
- package/dist/docs/components/date-picker/react/index.html +17 -17
- package/dist/docs/components/description-list/html/index.html +41 -41
- package/dist/docs/components/description-list/html-demos/index.html +8 -8
- package/dist/docs/components/description-list/index.html +36 -36
- package/dist/docs/components/description-list/react/index.html +39 -39
- package/dist/docs/components/divider/html/index.html +18 -18
- package/dist/docs/components/divider/index.html +11 -11
- package/dist/docs/components/drag-and-drop/html/index.html +11 -11
- package/dist/docs/components/drag-and-drop/index.html +9 -9
- package/dist/docs/components/drag-and-drop/react-deprecated/index.html +9 -9
- package/dist/docs/components/drawer/html/index.html +27 -27
- package/dist/docs/components/drawer/html-demos/index.html +16 -16
- package/dist/docs/components/drawer/index.html +25 -25
- package/dist/docs/components/dual-list-selector/html/index.html +13 -13
- package/dist/docs/components/dual-list-selector/index.html +17 -17
- package/dist/docs/components/empty-state/html/index.html +14 -14
- package/dist/docs/components/empty-state/index.html +13 -13
- package/dist/docs/components/empty-state/react/index.html +13 -13
- package/dist/docs/components/expandable-section/html/index.html +17 -17
- package/dist/docs/components/expandable-section/index.html +18 -18
- package/dist/docs/components/expandable-section/react/index.html +15 -15
- package/dist/docs/components/form/html/index.html +19 -19
- package/dist/docs/components/form/html-demos/index.html +6 -6
- package/dist/docs/components/form/index.html +19 -19
- package/dist/docs/components/form/react/index.html +19 -19
- package/dist/docs/components/form-control/html/index.html +12 -12
- package/dist/docs/components/form-control/index.html +12 -12
- package/dist/docs/components/form-select/index.html +9 -9
- package/dist/docs/components/form-select/react/index.html +9 -9
- package/dist/docs/components/helper-text/html/index.html +11 -11
- package/dist/docs/components/helper-text/html-demos/index.html +7 -7
- package/dist/docs/components/helper-text/index.html +9 -9
- package/dist/docs/components/hint/html/index.html +7 -7
- package/dist/docs/components/hint/index.html +8 -8
- package/dist/docs/components/hint/react/index.html +11 -11
- package/dist/docs/components/icon/html/index.html +16 -16
- package/dist/docs/components/icon/index.html +17 -17
- package/dist/docs/components/icon/react/index.html +20 -20
- package/dist/docs/components/inline-edit/html/index.html +29 -29
- package/dist/docs/components/inline-edit/index.html +29 -29
- package/dist/docs/components/input-group/html/index.html +12 -12
- package/dist/docs/components/input-group/index.html +12 -12
- package/dist/docs/components/input-group/react/index.html +12 -12
- package/dist/docs/components/jump-links/html/index.html +17 -17
- package/dist/docs/components/jump-links/html-demos/index.html +13 -13
- package/dist/docs/components/jump-links/index.html +9 -9
- package/dist/docs/components/jump-links/react/index.html +12 -12
- package/dist/docs/components/label/html/index.html +44 -44
- package/dist/docs/components/label/index.html +28 -28
- package/dist/docs/components/list/html/index.html +13 -13
- package/dist/docs/components/list/index.html +9 -9
- package/dist/docs/components/login-page/html/index.html +17 -17
- package/dist/docs/components/login-page/index.html +13 -13
- package/dist/docs/components/masthead/html/index.html +13 -13
- package/dist/docs/components/masthead/html-demos/index.html +20 -20
- package/dist/docs/components/masthead/index.html +18 -18
- package/dist/docs/components/menu/html/index.html +46 -46
- package/dist/docs/components/menu/index.html +68 -68
- package/dist/docs/components/menu/react/index.html +68 -68
- package/dist/docs/components/menu-toggle/html/index.html +35 -35
- package/dist/docs/components/menu-toggle/index.html +66 -66
- package/dist/docs/components/menu-toggle/react/index.html +66 -66
- package/dist/docs/components/modal/html/index.html +45 -45
- package/dist/docs/components/modal/html-demos/index.html +16 -16
- package/dist/docs/components/modal/index.html +41 -41
- package/dist/docs/components/multiple-file-upload/html/index.html +11 -11
- package/dist/docs/components/multiple-file-upload/index.html +26 -26
- package/dist/docs/components/navigation/html/index.html +26 -26
- package/dist/docs/components/navigation/html-demos/index.html +16 -16
- package/dist/docs/components/navigation/index.html +18 -18
- package/dist/docs/components/navigation/react/index.html +21 -21
- package/dist/docs/components/notification-badge/index.html +16 -16
- package/dist/docs/components/notification-badge/react/index.html +16 -16
- package/dist/docs/components/notification-drawer/html/index.html +9 -9
- package/dist/docs/components/notification-drawer/html-demos/index.html +13 -13
- package/dist/docs/components/notification-drawer/index.html +8 -8
- package/dist/docs/components/notification-drawer/react/index.html +8 -8
- package/dist/docs/components/number-input/html/index.html +12 -12
- package/dist/docs/components/number-input/index.html +11 -11
- package/dist/docs/components/number-input/react/index.html +14 -14
- package/dist/docs/components/overflow-menu/html/index.html +18 -18
- package/dist/docs/components/overflow-menu/index.html +9 -9
- package/dist/docs/components/overflow-menu/react/index.html +12 -12
- package/dist/docs/components/page/html/index.html +18 -18
- package/dist/docs/components/page/html-demos/index.html +32 -32
- package/dist/docs/components/page/index.html +50 -50
- package/dist/docs/components/page/react/index.html +50 -50
- package/dist/docs/components/pagination/html/index.html +20 -20
- package/dist/docs/components/pagination/index.html +17 -17
- package/dist/docs/components/pagination/react/index.html +14 -14
- package/dist/docs/components/panel/html/index.html +14 -14
- package/dist/docs/components/panel/html-demos/index.html +5 -5
- package/dist/docs/components/panel/index.html +22 -22
- package/dist/docs/components/password-generator/html-demos/index.html +4 -4
- package/dist/docs/components/password-generator/index.html +4 -4
- package/dist/docs/components/password-strength/html-demos/index.html +7 -7
- package/dist/docs/components/password-strength/index.html +7 -7
- package/dist/docs/components/popover/html/index.html +44 -44
- package/dist/docs/components/popover/index.html +20 -20
- package/dist/docs/components/popover/react/index.html +23 -23
- package/dist/docs/components/progress/html/index.html +31 -31
- package/dist/docs/components/progress/index.html +23 -23
- package/dist/docs/components/progress/react/index.html +23 -23
- package/dist/docs/components/progress-stepper/html/index.html +27 -27
- package/dist/docs/components/progress-stepper/index.html +16 -16
- package/dist/docs/components/progress-stepper/react/index.html +16 -16
- package/dist/docs/components/radio/html/index.html +20 -20
- package/dist/docs/components/radio/index.html +15 -15
- package/dist/docs/components/radio/react/index.html +15 -15
- package/dist/docs/components/sidebar/html/index.html +21 -21
- package/dist/docs/components/sidebar/index.html +17 -17
- package/dist/docs/components/simple-file-upload/html/index.html +15 -15
- package/dist/docs/components/simple-file-upload/index.html +32 -32
- package/dist/docs/components/simple-file-upload/react/index.html +32 -32
- package/dist/docs/components/simple-list/html/index.html +11 -11
- package/dist/docs/components/simple-list/index.html +9 -9
- package/dist/docs/components/simple-list/react/index.html +6 -6
- package/dist/docs/components/skeleton/html/index.html +13 -13
- package/dist/docs/components/skeleton/html-demos/index.html +3 -3
- package/dist/docs/components/skeleton/index.html +10 -10
- package/dist/docs/components/skeleton/react/index.html +10 -10
- package/dist/docs/components/skip-to-content/html/index.html +13 -13
- package/dist/docs/components/skip-to-content/index.html +6 -6
- package/dist/docs/components/skip-to-content/react/index.html +6 -6
- package/dist/docs/components/slider/html/index.html +14 -14
- package/dist/docs/components/slider/index.html +22 -22
- package/dist/docs/components/slider/react/index.html +22 -22
- package/dist/docs/components/spinner/html/index.html +16 -16
- package/dist/docs/components/spinner/index.html +9 -9
- package/dist/docs/components/spinner/react/index.html +6 -6
- package/dist/docs/components/switch/html/index.html +17 -17
- package/dist/docs/components/switch/index.html +12 -12
- package/dist/docs/components/switch/react/index.html +12 -12
- package/dist/docs/components/table/html/index.html +129 -129
- package/dist/docs/components/table/html-demos/index.html +33 -33
- package/dist/docs/components/table/index.html +129 -129
- package/dist/docs/components/tabs/html/index.html +67 -67
- package/dist/docs/components/tabs/html-demos/index.html +13 -13
- package/dist/docs/components/tabs/index.html +77 -77
- package/dist/docs/components/tabs/react/index.html +77 -77
- package/dist/docs/components/text-input/index.html +13 -13
- package/dist/docs/components/text-input/react/index.html +13 -13
- package/dist/docs/components/text-input-group/html/index.html +27 -27
- package/dist/docs/components/text-input-group/index.html +16 -16
- package/dist/docs/components/tile/html-deprecated/index.html +11 -11
- package/dist/docs/components/tile/index.html +23 -23
- package/dist/docs/components/tile/react-deprecated/index.html +26 -26
- package/dist/docs/components/time-picker/index.html +13 -13
- package/dist/docs/components/time-picker/react/index.html +13 -13
- package/dist/docs/components/timestamp/html/index.html +8 -8
- package/dist/docs/components/timestamp/index.html +21 -21
- package/dist/docs/components/timestamp/react/index.html +21 -21
- package/dist/docs/components/title/html/index.html +10 -10
- package/dist/docs/components/title/index.html +4 -4
- package/dist/docs/components/toggle-group/html/index.html +9 -9
- package/dist/docs/components/toggle-group/index.html +18 -18
- package/dist/docs/components/toolbar/html/index.html +55 -55
- package/dist/docs/components/toolbar/html-demos/index.html +12 -12
- package/dist/docs/components/toolbar/index.html +42 -42
- package/dist/docs/components/tooltip/html/index.html +17 -17
- package/dist/docs/components/tooltip/index.html +12 -12
- package/dist/docs/components/tree-view/html/index.html +21 -21
- package/dist/docs/components/tree-view/index.html +23 -23
- package/dist/docs/components/truncate/html/index.html +13 -13
- package/dist/docs/components/truncate/index.html +13 -13
- package/dist/docs/components/wizard/html/index.html +29 -29
- package/dist/docs/components/wizard/html-demos/index.html +22 -22
- package/dist/docs/components/wizard/index.html +32 -32
- package/dist/docs/components/wizard/react-deprecated/index.html +22 -22
- package/dist/docs/layouts/bullseye/html/index.html +11 -11
- package/dist/docs/layouts/bullseye/index.html +11 -11
- package/dist/docs/layouts/flex/html/index.html +87 -87
- package/dist/docs/layouts/flex/index.html +87 -87
- package/dist/docs/layouts/gallery/html/index.html +17 -17
- package/dist/docs/layouts/gallery/index.html +17 -17
- package/dist/docs/layouts/grid/html/index.html +22 -22
- package/dist/docs/layouts/grid/index.html +22 -22
- package/dist/docs/layouts/level/html/index.html +10 -10
- package/dist/docs/layouts/level/index.html +10 -10
- package/dist/docs/layouts/split/html/index.html +13 -13
- package/dist/docs/layouts/split/index.html +13 -13
- package/dist/docs/layouts/stack/html/index.html +12 -12
- package/dist/docs/layouts/stack/index.html +12 -12
- package/dist/docs/patterns/card-view/html-demos/index.html +4 -4
- package/dist/docs/patterns/card-view/index.html +4 -4
- package/dist/docs/patterns/dashboard/html-demos/index.html +4 -4
- package/dist/docs/patterns/dashboard/index.html +4 -4
- package/dist/docs/patterns/primary-detail/html-demos/index.html +17 -17
- package/dist/docs/patterns/primary-detail/index.html +17 -17
- package/dist/docs/utility-classes/accessibility/html/index.html +11 -11
- package/dist/docs/utility-classes/accessibility/index.html +11 -11
- package/dist/docs/utility-classes/alignment/html/index.html +7 -7
- package/dist/docs/utility-classes/alignment/index.html +7 -7
- package/dist/docs/utility-classes/background-color/html/index.html +9 -9
- package/dist/docs/utility-classes/background-color/index.html +9 -9
- package/dist/docs/utility-classes/box-shadow/html/index.html +12 -12
- package/dist/docs/utility-classes/box-shadow/index.html +12 -12
- package/dist/docs/utility-classes/display/html/index.html +18 -18
- package/dist/docs/utility-classes/display/index.html +18 -18
- package/dist/docs/utility-classes/flex/html/index.html +17 -17
- package/dist/docs/utility-classes/flex/index.html +17 -17
- package/dist/docs/utility-classes/float/html/index.html +7 -7
- package/dist/docs/utility-classes/float/index.html +7 -7
- package/dist/docs/utility-classes/sizing/html/index.html +28 -28
- package/dist/docs/utility-classes/sizing/index.html +28 -28
- package/dist/docs/utility-classes/spacing/html/index.html +12 -12
- package/dist/docs/utility-classes/spacing/index.html +12 -12
- package/dist/docs/utility-classes/text/html/index.html +18 -18
- package/dist/docs/utility-classes/text/index.html +18 -18
- package/jest.config.ts +1 -1
- package/package.json +5 -4
- package/src/pages/api/[version]/[section]/[page]/[tab].ts +11 -3
- package/src/pages/api/[version]/[section]/[page].ts +19 -11
- package/src/pages/api/[version]/[section].ts +18 -9
- package/src/pages/api/[version].ts +16 -9
- package/src/pages/api/openapi.json.ts +14 -3
- package/src/pages/api/versions.ts +11 -5
- package/src/pages/apiIndex.json.ts +27 -0
- package/src/utils/apiIndex/fetch.ts +20 -0
- package/src/utils/apiIndex/generate.ts +9 -5
- package/src/utils/apiIndex/get.ts +3 -1
- package/src/utils/getOutputDir.ts +19 -0
- package/src/utils/packageUtils.ts +5 -3
- package/tsconfig.json +9 -4
- package/dist/docs/_worker.js/chunks/apiIndex_rjiPwa_V.mjs +0 -9
- package/dist/docs/_worker.js/manifest_BOIk4wkr.mjs +0 -100
- /package/dist/docs/_worker.js/chunks/{_astro_data-layer-content_BIIrAXF8.mjs → _astro_data-layer-content_DGZXfKa-.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{content-modules_BnWiSXLh.mjs → content-modules_Db1avyLw.mjs} +0 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.15.9"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.QW52Ox2j.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
|
|
2
|
-
<link rel="stylesheet" href="/_astro/
|
|
3
|
-
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
|
|
2
|
+
<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css">
|
|
4
3
|
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
5
|
-
<link rel="stylesheet" href="/_astro/
|
|
4
|
+
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
|
|
5
|
+
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
6
6
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
7
7
|
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
|
|
8
8
|
animation-duration: 180ms;
|
|
@@ -42,122 +42,122 @@
|
|
|
42
42
|
animation-fill-mode: both;
|
|
43
43
|
animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
44
44
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
45
|
-
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="hNsIK" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-517"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="Z2a8dAG" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-173"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-518"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-519"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-173"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/menu/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/menu/html"> HTML </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2943" data-pf-content="true" class="pf-v6-c-content--p">import ’./Menu.css’</p>
|
|
46
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
47
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
45
|
+
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="Z2vVYMH" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-466"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="1IFHtV" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-156"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-467"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-468"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-156"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/menu/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/menu/html"> HTML </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2621" data-pf-content="true" class="pf-v6-c-content--p">import ’./Menu.css’</p>
|
|
46
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2622" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
47
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2623" data-pf-content="true" class="pf-v6-c-content--h3">Basic</h3>
|
|
48
48
|
|
|
49
49
|
<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="Z12T7EO" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Action</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Link</span>\n </span>\n </a>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n disabled\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Disabled action</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"none\">\n <a\n class=\"pf-v6-c-menu__item\"\n href=\"#\"\n aria-disabled=\"true\"\n tabindex=\"-1\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Disabled link</span>\n </span>\n </a>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-aria-disabled\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n aria-disabled=\"true\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Aria-disabled action</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-aria-disabled\" role=\"none\">\n <a\n class=\"pf-v6-c-menu__item\"\n href=\"#\"\n aria-disabled=\"true\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Aria-disabled link</span>\n </span>\n </a>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
50
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
50
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2624" data-pf-content="true" class="pf-v6-c-content--h3">Danger menu item</h3>
|
|
51
51
|
|
|
52
52
|
<astro-island uid="Z8Ualw" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Action 1</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Action 2</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item pf-m-danger\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-screen-reader\">Danger Item:</span>\n\n <span class=\"pf-v6-c-menu__item-text\">Delete</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
53
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
53
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2625" data-pf-content="true" class="pf-v6-c-content--h3">With icons</h3>
|
|
54
54
|
|
|
55
55
|
<astro-island uid="12OzeA" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-icon\">\n <i class=\"fas fa-fw fa-code-branch\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">From Git</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-icon\">\n <i class=\"fas fa-fw fa-layer-group\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Container image</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">From DockerFile</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
56
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
56
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2626" data-pf-content="true" class="pf-v6-c-content--h3">With checkbox</h3>
|
|
57
57
|
|
|
58
58
|
<astro-island uid="Z2g1cYW" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"menuitem\">\n <label\n class=\"pf-v6-c-menu__item\"\n for=\"with-checkbox-example-check-1-input\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-check\">\n <div class=\"pf-v6-c-check pf-m-standalone\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"with-checkbox-example-check-1-input\"\n name=\"with-checkbox-example-check-1-input\"\n aria-label=\"Standalone check\"\n />\n </div>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Checkbox 1</span>\n </span>\n </label>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"menuitem\">\n <label\n class=\"pf-v6-c-menu__item\"\n for=\"with-checkbox-example-check-2-input\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-check\">\n <div class=\"pf-v6-c-check pf-m-standalone\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"with-checkbox-example-check-2-input\"\n name=\"with-checkbox-example-check-2-input\"\n aria-label=\"Standalone check\"\n />\n </div>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Checkbox 2</span>\n </span>\n </label>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"menuitem\">\n <label\n class=\"pf-v6-c-menu__item\"\n for=\"with-checkbox-example-check-3-input\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-check\">\n <div class=\"pf-v6-c-check pf-m-standalone\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"with-checkbox-example-check-3-input\"\n name=\"with-checkbox-example-check-3-input\"\n aria-label=\"Standalone check\"\n disabled\n />\n </div>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Checkbox 3</span>\n </span>\n </label>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
59
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
59
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2627" data-pf-content="true" class="pf-v6-c-content--h3">Scrollable</h3>
|
|
60
60
|
|
|
61
61
|
<astro-island uid="1AHaVY" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-scrollable\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 1</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 2</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 3</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 4</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 5</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 6</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 7</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 8</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 9</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 10</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 11</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 12</span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
62
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
62
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2628" data-pf-content="true" class="pf-v6-c-content--h3">Scrollable with custom menu height</h3>
|
|
63
63
|
|
|
64
64
|
<astro-island uid="Z1gQAyW" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-menu pf-m-scrollable\"\n style=\"--pf-v6-c-menu__content--MaxHeight: 200px;\"\n>\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 1</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 2</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 3</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 4</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 5</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 6</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 7</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 8</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 9</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 10</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 11</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 12</span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
65
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
65
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2629" data-pf-content="true" class="pf-v6-c-content--h3">With flyout</h3>
|
|
66
66
|
|
|
67
67
|
<astro-island uid="ZY3tPK" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-flyout\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Pause rollouts</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Add storage</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\" hidden>\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Application grouping</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Count</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Labels</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Annotations</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"true\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">Description</span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Application grouping</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Count</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Labels</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Annotations</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Delete deployment config</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
68
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
68
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2630" data-pf-content="true" class="pf-v6-c-content--h3">With flyout menu top</h3>
|
|
69
69
|
|
|
70
70
|
<astro-island uid="1PEk03" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-flyout\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Pause rollouts</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Add storage</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\" hidden>\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Application grouping</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Count</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Labels</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Annotations</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"true\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">Description</span>\n </button>\n <div class=\"pf-v6-c-menu pf-m-top\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Application grouping</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Count</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Labels</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Annotations</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Delete deployment config</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
71
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
71
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2631" data-pf-content="true" class="pf-v6-c-content--h3">With flyout menu left</h3>
|
|
72
72
|
|
|
73
73
|
<astro-island uid="1WM1Fk" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-flyout\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Pause rollouts</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Add storage</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\" hidden>\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Application grouping</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Count</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Labels</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Annotations</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"true\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">Description</span>\n </button>\n <div class=\"pf-v6-c-menu pf-m-left\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Application grouping</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Count</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Labels</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Annotations</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Delete deployment config</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
74
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
74
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2632" data-pf-content="true" class="pf-v6-c-content--h3">With flyout menu left top</h3>
|
|
75
75
|
|
|
76
76
|
<astro-island uid="1qsRpc" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-flyout\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Pause rollouts</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Add storage</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\" hidden>\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Application grouping</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Count</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Labels</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Annotations</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"true\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">Description</span>\n </button>\n <div class=\"pf-v6-c-menu pf-m-left pf-m-top\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Application grouping</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Count</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Labels</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Annotations</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Delete deployment config</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
77
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
77
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2633" data-pf-content="true" class="pf-v6-c-content--h3">Drilldown</h3>
|
|
78
78
|
|
|
79
79
|
<astro-island uid="1cftNP" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-drilldown\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Pause rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Add storage</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-drill-up\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Routes</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Nodes</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">URLs</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Advanced settings</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-toggle-icon\"\n >\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Advanced settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Reports</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Policies</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Systems</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">RBAC</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">RBAC</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Reports</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Policies</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Systems</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Thing with a longer label</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Configuration</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-drill-up\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Configuration</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Profile</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Profile</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Avatar</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Name</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Title</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Time zone</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Account settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Thing with a longer label</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit access settings</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Edit access settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Global access</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Account access</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
80
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
80
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2634" data-pf-content="true" class="pf-v6-c-content--h3">Drilldown level two</h3>
|
|
81
81
|
|
|
82
82
|
<astro-island uid="2a05g6" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-drilldown pf-m-drilled-in\">\n <div\n class=\"pf-v6-c-menu__content\"\n style=\"--pf-v6-c-menu__content--Height: 165px;\"\n >\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Pause rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Add storage</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-current-path\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"true\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-drill-up\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Routes</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Nodes</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">URLs</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Advanced settings</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-toggle-icon\"\n >\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Advanced settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Reports</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Policies</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Systems</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">RBAC</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">RBAC</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Reports</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Policies</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Systems</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Thing with a longer label</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Configuration</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-drill-up\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Configuration</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Profile</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Profile</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Avatar</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Name</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Title</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Time zone</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Account settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Thing with a longer label</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit access settings</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Edit access settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Global access</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Account access</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
83
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
83
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2635" data-pf-content="true" class="pf-v6-c-content--h3">Drilldown level three</h3>
|
|
84
84
|
|
|
85
85
|
<astro-island uid="2rAt1s" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-drilldown pf-m-drilled-in\">\n <div\n class=\"pf-v6-c-menu__content\"\n style=\"--pf-v6-c-menu__content--Height: 202px;\"\n >\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Pause rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Add storage</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-current-path\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"true\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu pf-m-drilled-in\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-drill-up\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item pf-m-current-path\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"true\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Routes</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Nodes</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">URLs</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Advanced settings</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-toggle-icon\"\n >\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Advanced settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Reports</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Policies</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Systems</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">RBAC</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">RBAC</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Reports</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Policies</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Systems</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Thing with a longer label</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Configuration</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-drill-up\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Configuration</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Profile</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Profile</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Avatar</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Name</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Title</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Time zone</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Account settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Thing with a longer label</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit access settings</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Edit access settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Global access</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Account access</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
86
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
86
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2636" data-pf-content="true" class="pf-v6-c-content--h3">Drilldown level four</h3>
|
|
87
87
|
|
|
88
88
|
<astro-island uid="1vkQBS" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-drilldown pf-m-drilled-in\">\n <div\n class=\"pf-v6-c-menu__content\"\n style=\"--pf-v6-c-menu__content--Height: 165px;\"\n >\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Pause rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Add storage</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-current-path\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"true\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu pf-m-drilled-in\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-drill-up\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item pf-m-current-path\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"true\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu pf-m-drilled-in\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Routes</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Nodes</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">URLs</span>\n </span>\n </button>\n </li>\n <li\n class=\"pf-v6-c-menu__list-item pf-m-current-path\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"true\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Advanced settings</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-toggle-icon\"\n >\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Advanced settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Reports</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Policies</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Systems</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">RBAC</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">RBAC</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Reports</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Policies</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Systems</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Thing with a longer label</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Configuration</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-drill-up\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Configuration</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Profile</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Profile</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Avatar</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Name</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Title</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Time zone</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Account settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Thing with a longer label</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit access settings</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Edit access settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Global access</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Account access</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
89
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
89
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2637" data-pf-content="true" class="pf-v6-c-content--h3">Scrollable drilldown</h3>
|
|
90
90
|
|
|
91
91
|
<astro-island uid="Z1ra7Al" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-menu pf-m-drilldown pf-m-scrollable\"\n style=\"--pf-v6-c-menu__content--MaxHeight: 180px;\"\n>\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Pause rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Add storage</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-drill-up\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Routes</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Nodes</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">URLs</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Advanced settings</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-toggle-icon\"\n >\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Advanced settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Reports</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Policies</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Systems</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">RBAC</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">RBAC</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Reports</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Policies</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Systems</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Thing with a longer label</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Configuration</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-drill-up\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Configuration</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Profile</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Profile</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Avatar</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Name</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Title</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Time zone</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Account settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Thing with a longer label</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit access settings</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Edit access settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Global access</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Account access</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
92
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
92
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2638" data-pf-content="true" class="pf-v6-c-content--h3">Width modified drilldown</h3>
|
|
93
93
|
|
|
94
94
|
<astro-island uid="25O9Kj" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-drilldown\" style=\"--pf-v6-c-menu--Width: 350px;\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Pause rollout</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Add storage</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-drill-up\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Routes</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Nodes</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">URLs</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Advanced settings</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n tabindex=\"0\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-toggle-icon\"\n >\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Advanced settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Reports</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Policies</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Systems</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">RBAC</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">RBAC</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Reports</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Policies</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Systems</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Thing with a longer label</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Configuration</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-drill-up\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Configuration</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Profile</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Profile</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Avatar</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Name</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Title</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Time zone</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Account settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Thing with a longer label</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit access settings</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-drill-up\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-left\"></i>\n </span>\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Edit access settings</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Global access</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Account access</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
95
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
95
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2639" data-pf-content="true" class="pf-v6-c-content--h3">Drilldown with breadcrumbs - level 1</h3>
|
|
96
96
|
|
|
97
97
|
<astro-island uid="ZTQmCY" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-drilldown\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Labels</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 1</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 2</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 3</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 4</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 5</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">URLs</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">APIs</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Config</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
98
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
98
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2640" data-pf-content="true" class="pf-v6-c-content--h3">Drilldown with breadcrumbs - level 2</h3>
|
|
99
99
|
|
|
100
100
|
<astro-island uid="1sVyVr" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-menu pf-m-drilldown pf-m-drilled-in\"\n style=\"--pf-v6-c-menu__content--Height: 74px;\"\n>\n <div class=\"pf-v6-c-menu__breadcrumb\">\n <nav class=\"pf-v6-c-breadcrumb\" aria-label=\"breadcrumb\">\n <ol class=\"pf-v6-c-breadcrumb__list\" role=\"list\">\n <li class=\"pf-v6-c-breadcrumb__item\">\n <span class=\"pf-v6-c-breadcrumb__item-divider\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n <button class=\"pf-v6-c-breadcrumb__link\" type=\"button\">All</button>\n </li>\n <li class=\"pf-v6-c-breadcrumb__item\">\n <span class=\"pf-v6-c-breadcrumb__item-divider\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n <h1 class=\"pf-v6-c-breadcrumb__heading\">\n <button\n class=\"pf-v6-c-breadcrumb__link pf-m-current\"\n type=\"button\"\n aria-current=\"page\"\n >Edit</button>\n </h1>\n </li>\n </ol>\n </nav>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-current-path\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Labels</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 1</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 2</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 3</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 4</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 5</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">URLs</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">APIs</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Config</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
101
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
101
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2641" data-pf-content="true" class="pf-v6-c-content--h3">Drilldown with breadcrumbs - level 3</h3>
|
|
102
102
|
|
|
103
103
|
<astro-island uid="OvdxG" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-menu pf-m-drilldown pf-m-drilled-in\"\n style=\"--pf-v6-c-menu__content--Height: 111px;\"\n>\n <div class=\"pf-v6-c-menu__breadcrumb\">\n <nav class=\"pf-v6-c-breadcrumb\" aria-label=\"breadcrumb\">\n <ol class=\"pf-v6-c-breadcrumb__list\" role=\"list\">\n <li class=\"pf-v6-c-breadcrumb__item\">\n <span class=\"pf-v6-c-breadcrumb__item-divider\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n <button class=\"pf-v6-c-breadcrumb__link\" type=\"button\">All</button>\n </li>\n\n <li class=\"pf-v6-c-breadcrumb__item\">\n <span class=\"pf-v6-c-breadcrumb__item-divider\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-breadcrumb__dropdown\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__count\">\n <span class=\"pf-v6-c-badge pf-m-read\">1</span>\n </span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li class=\"pf-v6-c-breadcrumb__item\">\n <span class=\"pf-v6-c-breadcrumb__item-divider\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n <h1 class=\"pf-v6-c-breadcrumb__heading\">\n <button\n class=\"pf-v6-c-breadcrumb__link pf-m-current\"\n type=\"button\"\n aria-current=\"page\"\n >Deployment</button>\n </h1>\n </li>\n </ol>\n </nav>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-current-path\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu pf-m-drilled-in\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-current-path\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Labels</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 1</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 2</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 3</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 4</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 5</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">URLs</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">APIs</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Config</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
104
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
104
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2642" data-pf-content="true" class="pf-v6-c-content--h3">Drilldown with breadcrumbs - level 4</h3>
|
|
105
105
|
|
|
106
106
|
<astro-island uid="2fCbTl" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-menu pf-m-drilldown pf-m-drilled-in\"\n style=\"--pf-v6-c-menu__content--Height: 185px;\"\n>\n <div class=\"pf-v6-c-menu__breadcrumb\">\n <nav class=\"pf-v6-c-breadcrumb\" aria-label=\"breadcrumb\">\n <ol class=\"pf-v6-c-breadcrumb__list\" role=\"list\">\n <li class=\"pf-v6-c-breadcrumb__item\">\n <span class=\"pf-v6-c-breadcrumb__item-divider\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n <button class=\"pf-v6-c-breadcrumb__link\" type=\"button\">All</button>\n </li>\n\n <li class=\"pf-v6-c-breadcrumb__item\">\n <span class=\"pf-v6-c-breadcrumb__item-divider\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-breadcrumb__dropdown\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__count\">\n <span class=\"pf-v6-c-badge pf-m-read\">2</span>\n </span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li class=\"pf-v6-c-breadcrumb__item\">\n <span class=\"pf-v6-c-breadcrumb__item-divider\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n <h1 class=\"pf-v6-c-breadcrumb__heading\">\n <button\n class=\"pf-v6-c-breadcrumb__link pf-m-current\"\n type=\"button\"\n aria-current=\"page\"\n >Labels</button>\n </h1>\n </li>\n </ol>\n </nav>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-current-path\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Edit</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu pf-m-drilled-in\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item pf-m-current-path\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Deployment</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu pf-m-drilled-in\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li\n class=\"pf-v6-c-menu__list-item pf-m-current-path\"\n role=\"none\"\n >\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Labels</span>\n <span class=\"pf-v6-c-menu__item-toggle-icon\">\n <i class=\"fas fa-angle-right\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 1</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 2</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 3</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 4</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span\n class=\"pf-v6-c-menu__item-text\"\n >Label 5</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">URLs</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">APIs</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Config</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Start rollout</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
107
107
|
|
|
108
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
108
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2643" data-pf-content="true" class="pf-v6-c-content--h3">Scrollable menu with header and footer</h3>
|
|
109
109
|
|
|
110
110
|
<astro-island uid="ZHQ2jb" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-scrollable\">\n <div class=\"pf-v6-c-menu__header\">Header</div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 1</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 2</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 3</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 4</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 5</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 6</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 7</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 8</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 9</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 10</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 11</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 12</span>\n </button>\n </li>\n </ul>\n </div>\n <div class=\"pf-v6-c-menu__footer\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Footer</span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
111
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
111
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2644" data-pf-content="true" class="pf-v6-c-content--h3">Scrollable menu with search and footer</h3>
|
|
112
112
|
|
|
113
113
|
<astro-island uid="Q4yqb" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-scrollable\">\n <div class=\"pf-v6-c-menu__search\">\n <div class=\"pf-v6-c-menu__search-input\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Search\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 1</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 2</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 3</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 4</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 5</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 6</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 7</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 8</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 9</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 10</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 11</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 12</span>\n </button>\n </li>\n </ul>\n </div>\n <div class=\"pf-v6-c-menu__footer\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Footer</span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
114
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
114
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2645" data-pf-content="true" class="pf-v6-c-content--h3">With filtering</h3>
|
|
115
115
|
|
|
116
116
|
<astro-island uid="Z5qPKi" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__search\">\n <div class=\"pf-v6-c-menu__search-input\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Search\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Action 1</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Action 2</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Action 3</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
117
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
117
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2646" data-pf-content="true" class="pf-v6-c-content--h3">With links</h3>
|
|
118
118
|
|
|
119
119
|
<astro-island uid="25B1Ry" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\" target=\"_blank\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Link 1</span>\n <span class=\"pf-v6-c-menu__item-external-icon\">\n <i class=\"fas fa-external-link-alt\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-screen-reader\">(opens new window)</span>\n </span>\n </a>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\" target=\"_blank\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Link 2</span>\n <span class=\"pf-v6-c-menu__item-external-icon\">\n <i class=\"fas fa-external-link-alt\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-screen-reader\">(opens new window)</span>\n </span>\n </a>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Link 3</span>\n </span>\n </a>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
120
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
120
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2647" data-pf-content="true" class="pf-v6-c-content--h3">With separator(s)</h3>
|
|
121
121
|
|
|
122
122
|
<astro-island uid="2uYQBY" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Action 1</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Action 2</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Action 3</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
123
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
123
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2648" data-pf-content="true" class="pf-v6-c-content--h3">With titled groups</h3>
|
|
124
124
|
|
|
125
125
|
<astro-island uid="1YFPxU" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <section class=\"pf-v6-c-menu__group\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Link not in group</span>\n </span>\n </a>\n </li>\n </ul>\n </section>\n <hr class=\"pf-v6-c-divider\" />\n <section class=\"pf-v6-c-menu__group\">\n <h1 class=\"pf-v6-c-menu__group-title\">Group 1</h1>\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Link 1</span>\n </span>\n </a>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Link 2</span>\n </span>\n </a>\n </li>\n </ul>\n </section>\n <hr class=\"pf-v6-c-divider\" />\n <section class=\"pf-v6-c-menu__group\">\n <h1 class=\"pf-v6-c-menu__group-title\">Group 2</h1>\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Link 1</span>\n </span>\n </a>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Link 2</span>\n </span>\n </a>\n </li>\n </ul>\n </section>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
126
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
126
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2649" data-pf-content="true" class="pf-v6-c-content--h3">With description</h3>
|
|
127
127
|
|
|
128
128
|
<astro-island uid="ZoJqzB" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-icon\">\n <i class=\"fas fa-fw fa-code-branch\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Action 1</span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">Description</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n disabled\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-icon\">\n <i class=\"fas fa-fw fa-code-branch\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Action 2 disabled</span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">Description</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-icon\">\n <i class=\"fas fa-fw fa-code-branch\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Action 3</span>\n </span>\n <span\n class=\"pf-v6-c-menu__item-description\"\n >Nunc non ornare ex, et pretium dui. Duis nec augue at urna elementum blandit tincidunt eget metus. Aenean sed metus id urna dignissim interdum. Aenean vel nisl vitae arcu vehicula pulvinar eget nec turpis. Cras sit amet est est.</span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
129
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
129
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2650" data-pf-content="true" class="pf-v6-c-content--h3">With actions</h3>
|
|
130
130
|
|
|
131
131
|
<astro-island uid="ZNLTVJ" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <section class=\"pf-v6-c-menu__group\">\n <h1 class=\"pf-v6-c-menu__group-title\">Actions</h1>\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item pf-m-selected\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Item 1</span>\n <span class=\"pf-v6-c-menu__item-select-icon\">\n <i class=\"fas fa-check\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">This is a description</span>\n </button>\n <div class=\"pf-v6-c-menu__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n role=\"menuitem\"\n aria-label=\"Actions\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-fw fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item pf-m-select\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Item 2</span>\n <span class=\"pf-v6-c-menu__item-select-icon\">\n <i class=\"fas fa-check\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n <div class=\"pf-v6-c-menu__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n role=\"menuitem\"\n aria-label=\"Alert\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n disabled\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Item 3 disabled</span>\n <span class=\"pf-v6-c-menu__item-select-icon\">\n <i class=\"fas fa-check\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">This is a description</span>\n </button>\n <div class=\"pf-v6-c-menu__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n role=\"menuitem\"\n aria-label=\"Copy\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-fw fa-clipboard\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item pf-m-selected\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Item 4</span>\n <span class=\"pf-v6-c-menu__item-select-icon\">\n <i class=\"fas fa-check\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">This is a description</span>\n </button>\n <div class=\"pf-v6-c-menu__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n role=\"menuitem\"\n aria-label=\"Expand\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-fw fa-bars\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-aria-disabled\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n aria-disabled=\"true\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Item 5 aria-disabled</span>\n <span class=\"pf-v6-c-menu__item-select-icon\">\n <i class=\"fas fa-check\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">This is a description</span>\n </button>\n <div class=\"pf-v6-c-menu__item-action pf-m-aria-disabled\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n role=\"menuitem\"\n aria-label=\"Copy\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-fw fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </li>\n </ul>\n </section>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
132
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
132
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2651" data-pf-content="true" class="pf-v6-c-content--h3">With favorites</h3>
|
|
133
133
|
|
|
134
134
|
<astro-island uid="1cT9LY" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <section class=\"pf-v6-c-menu__group\">\n <h1 class=\"pf-v6-c-menu__group-title\">Favorites</h1>\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Item 1</span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">This is a description</span>\n </a>\n <div class=\"pf-v6-c-menu__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain\"\n type=\"button\"\n role=\"menuitem\"\n aria-label=\"Starred\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </li>\n </ul>\n </section>\n <hr class=\"pf-v6-c-divider\" />\n <section class=\"pf-v6-c-menu__group\">\n <h1 class=\"pf-v6-c-menu__group-title\">All actions</h1>\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Item 1</span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">This is a description</span>\n </a>\n <div class=\"pf-v6-c-menu__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain\"\n type=\"button\"\n role=\"menuitem\"\n aria-label=\"Starred\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"none\">\n <a\n class=\"pf-v6-c-menu__item\"\n href=\"#\"\n aria-disabled=\"true\"\n tabindex=\"-1\"\n role=\"menuitem\"\n target=\"_blank\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Item 2 disabled</span>\n <span class=\"pf-v6-c-menu__item-external-icon\">\n <i class=\"fas fa-external-link-alt\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-screen-reader\">(opens new window)</span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">This is a description</span>\n </a>\n <div class=\"pf-v6-c-menu__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-favorite pf-m-plain\"\n type=\"button\"\n role=\"menuitem\"\n aria-label=\"Not starred\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a\n class=\"pf-v6-c-menu__item\"\n href=\"#\"\n role=\"menuitem\"\n target=\"_blank\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Item 3</span>\n <span class=\"pf-v6-c-menu__item-external-icon\">\n <i class=\"fas fa-external-link-alt\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-screen-reader\">(opens new window)</span>\n </span>\n </a>\n <div class=\"pf-v6-c-menu__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-favorite pf-m-plain\"\n type=\"button\"\n role=\"menuitem\"\n aria-label=\"Not starred\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </li>\n </ul>\n </section>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
135
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
135
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2652" data-pf-content="true" class="pf-v6-c-content--h3">Option single select</h3>
|
|
136
136
|
|
|
137
137
|
<astro-island uid="Z2hMdBz" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Option 1</span>\n <span class=\"pf-v6-c-menu__item-select-icon\">\n <i class=\"fas fa-check\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Option 2</span>\n <span class=\"pf-v6-c-menu__item-select-icon\">\n <i class=\"fas fa-check\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item pf-m-selected\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-icon\">\n <i class=\"fas fa-fw fa-table\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Option 3</span>\n <span class=\"pf-v6-c-menu__item-select-icon\">\n <i class=\"fas fa-check\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">Description</span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
138
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
138
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2653" data-pf-content="true" class="pf-v6-c-content--h3">Option multi-select</h3>
|
|
139
139
|
|
|
140
140
|
<astro-island uid="1CtP1k" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item pf-m-selected\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Option 1</span>\n <span class=\"pf-v6-c-menu__item-select-icon\">\n <i class=\"fas fa-check\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item pf-m-selected\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Option 2</span>\n <span class=\"pf-v6-c-menu__item-select-icon\">\n <i class=\"fas fa-check\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item pf-m-selected\"\n type=\"button\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-icon\">\n <i class=\"fas fa-fw fa-table\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-menu__item-text\">Option 3</span>\n <span class=\"pf-v6-c-menu__item-select-icon\">\n <i class=\"fas fa-check\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <span class=\"pf-v6-c-menu__item-description\">Description</span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
141
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
141
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2654" data-pf-content="true" class="pf-v6-c-content--h3">View more</h3>
|
|
142
142
|
|
|
143
143
|
<astro-island uid="Z10J7eg" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Action</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Link</span>\n </span>\n </a>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n disabled\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Disabled action</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"none\">\n <a\n class=\"pf-v6-c-menu__item\"\n href=\"#\"\n aria-disabled=\"true\"\n tabindex=\"-1\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Disabled link</span>\n </span>\n </a>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item pf-m-load\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">View more</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
144
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
144
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2655" data-pf-content="true" class="pf-v6-c-content--h3">Loading</h3>
|
|
145
145
|
|
|
146
146
|
<astro-island uid="ZzFfB0" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Action</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Link</span>\n </span>\n </a>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n disabled\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Disabled action</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"none\">\n <a\n class=\"pf-v6-c-menu__item\"\n href=\"#\"\n aria-disabled=\"true\"\n tabindex=\"-1\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Disabled link</span>\n </span>\n </a>\n </li>\n <li class=\"pf-v6-c-divider\" role=\"separator\"></li>\n <li class=\"pf-v6-c-menu__list-item pf-m-loading\" role=\"none\">\n <div class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">\n <svg\n class=\"pf-v6-c-spinner pf-m-lg\"\n role=\"progressbar\"\n viewBox=\"0 0 100 100\"\n aria-label=\"Loading items\"\n >\n <circle\n class=\"pf-v6-c-spinner__path\"\n cx=\"50\"\n cy=\"50\"\n r=\"45\"\n fill=\"none\"\n />\n </svg>\n </span>\n </span>\n </div>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
147
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
147
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2656" data-pf-content="true" class="pf-v6-c-content--h3">Footer</h3>
|
|
148
148
|
|
|
149
149
|
<astro-island uid="1bDNHG" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Action</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Link</span>\n </span>\n </a>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n disabled\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Disabled action</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"none\">\n <a\n class=\"pf-v6-c-menu__item\"\n href=\"#\"\n aria-disabled=\"true\"\n tabindex=\"-1\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Disabled link</span>\n </span>\n </a>\n </li>\n </ul>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-menu__footer\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Action</span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
150
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
150
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2657" data-pf-content="true" class="pf-v6-c-content--h3">Plain</h3>
|
|
151
151
|
|
|
152
152
|
<astro-island uid="28tQqt" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-plain\">\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Action</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <a class=\"pf-v6-c-menu__item\" href=\"#\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Link</span>\n </span>\n </a>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"none\">\n <button\n class=\"pf-v6-c-menu__item\"\n type=\"button\"\n disabled\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Disabled action</span>\n </span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item pf-m-disabled\" role=\"none\">\n <a\n class=\"pf-v6-c-menu__item\"\n href=\"#\"\n aria-disabled=\"true\"\n tabindex=\"-1\"\n role=\"menuitem\"\n >\n <span class=\"pf-v6-c-menu__item-main\">\n <span class=\"pf-v6-c-menu__item-text\">Disabled link</span>\n </span>\n </a>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
153
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
153
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2658" data-pf-content="true" class="pf-v6-c-content--h3">Plain with search and footer</h3>
|
|
154
154
|
|
|
155
155
|
<astro-island uid="ZSXrC3" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-plain\">\n <div class=\"pf-v6-c-menu__search\">\n <div class=\"pf-v6-c-menu__search-input\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Search\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 1</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 2</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 3</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 4</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 5</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 6</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 7</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 8</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 9</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 10</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 11</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 12</span>\n </button>\n </li>\n </ul>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-menu__footer\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Footer</span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
156
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
156
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2659" data-pf-content="true" class="pf-v6-c-content--h3">Plain scrollable with search and footer</h3>
|
|
157
157
|
|
|
158
158
|
<astro-island uid="UjdmW" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-menu pf-m-plain pf-m-scrollable\">\n <div class=\"pf-v6-c-menu__search\">\n <div class=\"pf-v6-c-menu__search-input\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Search\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-menu__content\">\n <ul class=\"pf-v6-c-menu__list\" role=\"menu\">\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 1</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 2</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 3</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 4</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 5</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 6</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 7</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 8</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 9</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 10</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 11</span>\n </button>\n </li>\n <li class=\"pf-v6-c-menu__list-item\" role=\"none\">\n <button class=\"pf-v6-c-menu__item\" type=\"button\" role=\"menuitem\">\n <span class=\"pf-v6-c-menu__item-text\">Action 12</span>\n </button>\n </li>\n </ul>\n </div>\n <div class=\"pf-v6-c-menu__footer\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Footer</span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
159
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
160
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
159
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2660" data-pf-content="true" class="pf-v6-c-content--h2">Documentation</h2>
|
|
160
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2661" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
|
|
161
161
|
|
|
162
162
|
|
|
163
163
|
|
|
@@ -219,7 +219,7 @@
|
|
|
219
219
|
|
|
220
220
|
|
|
221
221
|
<table><thead><tr><th>Attribute</th><th>Applied</th><th>Outcome</th></tr></thead><tbody><tr><td><code>role="menu"</code></td><td><code>.pf-v6-c-menu__list</code></td><td>Declares <code>.pf-v6-c-menu__list</code> as a menu.</td></tr><tr><td><code>disabled</code></td><td><code>button.pf-v6-c-menu__item</code></td><td>When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus.</td></tr><tr><td><code>role="menuitem"</code></td><td><code>.pf-v6-c-menu__item</code>, <code>.pf-v6-c-menu__list-item</code> (checkbox)</td><td>Assigns <code>.pf-v6-c-menu__item</code> as an option in a set of choices contained by a menu.</td></tr><tr><td><code>role="none"</code></td><td><code>.pf-v6-c-menu__list-item</code></td><td>Removes semantic meaning from <code>.pf-v6-c-menu__list-item</code>.</td></tr><tr><td><code>aria-disabled="true"</code></td><td><code>.pf-v6-c-menu__item</code></td><td>Indicates to assistive technologies that the menu item is disabled, but still allows it to be focusable via keyboard. Additional click prevention may be required.</td></tr><tr><td><code>tabindex="-1"</code></td><td><code>a.pf-v6-c-menu__item</code></td><td>When the menu item uses a link element and has <code>aria-disabled="true"</code> passed in, removes it from keyboard focus. This is similar to passing <code>disabled</code> to a menu item that uses a button element.</td></tr><tr><td><code>aria-hidden="true"</code></td><td><code>.pf-v6-c-menu__item-icon</code>, <code>.pf-v6-c-menu__item-action-icon</code>, <code>.pf-v6-c-menu__item-external-icon</code>, <code>.pf-v6-c-menu__item-toggle-icon</code>, <code>.pf-v6-c-menu__item-select-icon</code></td><td>Hides the icon from assistive technologies.</td></tr><tr><td><code>aria-label="Descriptive text"</code></td><td><code>.pf-v6-c-menu__item-action-icon</code></td><td>There should always be descriptive text on an action icon because there is no visible descriptive text labelling the icon.</td></tr><tr><td><code>aria-label="Not starred"</code></td><td><code>.pf-v6-c-menu__item-action-icon.pf-m-favorite</code></td><td>Provides an accessible label indicating that the favorite action is not selected.</td></tr><tr><td><code>aria-label="Starred"</code></td><td><code>.pf-v6-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited</code></td><td>Provides an accessible label indicating that the favorite action is selected.</td></tr></tbody></table>
|
|
222
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
222
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2662" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
|
|
223
223
|
|
|
224
224
|
|
|
225
225
|
|
|
@@ -475,6 +475,6 @@
|
|
|
475
475
|
|
|
476
476
|
|
|
477
477
|
|
|
478
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-menu</code></td><td><code><div></code></td><td>Initiates the menu. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__header</code></td><td><code><div></code></td><td>Initiates the menu header container.</td></tr><tr><td><code>.pf-v6-c-menu__search</code></td><td><code><div></code></td><td>Initiates the menu search container. Use for filtering.</td></tr><tr><td><code>.pf-v6-c-menu__search-input</code></td><td><code><div></code></td><td>Initiates the menu search input container.</td></tr><tr><td><code>.pf-v6-c-menu__content</code></td><td><code><div></code></td><td>Initiates the menu content. Use for lists. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__list</code></td><td><code><ul></code></td><td>Initiates the menu list. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__list-item</code></td><td><code><li></code></td><td>Initiates the menu list item. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__item</code></td><td><code><button></code>, <code><a></code>, <code><div></code>, <code><label></code></td><td>Initiates the menu item. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__item-main</code></td><td><code><span></code></td><td>Initiates the menu item main container. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__item-text</code></td><td><code><span></code></td><td>Initiates the menu item text. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__item-check</code></td><td><code><span></code></td><td>Initiates a menu label.</td></tr><tr><td><code>.pf-v6-c-menu__item-description</code></td><td><code><span></code></td><td>Initiates the menu item description.</td></tr><tr><td><code>.pf-v6-c-menu__item-group</code></td><td><code><section></code></td><td>Initiates the menu item group.</td></tr><tr><td><code>.pf-v6-c-menu__item-group-title</code></td><td><code><h1></code></td><td>Initiates the menu item group title.</td></tr><tr><td><code>.pf-v6-c-menu__item-icon</code></td><td><code><span></code></td><td>Initiates the menu item icon.</td></tr><tr><td><code>.pf-v6-c-menu__item-toggle-icon</code></td><td><code><span></code></td><td>Initiates the menu item toggle icon.</td></tr><tr><td><code>.pf-v6-c-menu__item-select-icon</code></td><td><code><span></code></td><td>Initiates the menu item select icon.</td></tr><tr><td><code>.pf-v6-c-menu__item-action</code></td><td><code><button></code></td><td>Initiates the menu item action.</td></tr><tr><td><code>.pf-v6-c-menu__item-action-icon</code></td><td><code><span></code></td><td>Initiates the menu item action icon.</td></tr><tr><td><code>.pf-v6-c-menu__item-external-icon</code></td><td><code><span></code></td><td>Initiates the menu item external icon.</td></tr><tr><td><code>.pf-v6-c-menu__footer</code></td><td><code><div></code></td><td>Initiates the menu footer.</td></tr><tr><td><code>.pf-m-hidden{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-menu__list</code>, <code>.pf-v6-c-menu__list-item</code>, <code>.pf-v6-c-menu__group</code></td><td>Modifies a menu element to be hidden, at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2985" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr><tr><td><code>.pf-m-visible{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-menu__list</code>, <code>.pf-v6-c-menu__list-item</code>, <code>.pf-v6-c-menu__group</code></td><td>Modifies a menu element to be shown, at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2986" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr><tr><td><code>.pf-m-favorite</code></td><td><code>.pf-v6-c-menu__item-action</code></td><td>Modifies the menu item action to handle the favorite icon.</td></tr><tr><td><code>.pf-m-favorited</code></td><td><code>.pf-v6-c-menu__item-action.pf-m-favorite</code></td><td>Modifies the menu item action icon to be favorited.</td></tr><tr><td><code>.pf-m-selected</code></td><td><code>.pf-v6-c-menu__item</code></td><td>Modifies the menu item to be selected.</td></tr><tr><td><code>.pf-m-drill-up</code></td><td><code>.pf-v6-c-menu__list-item</code></td><td>Flags the menu item as a drill up button.</td></tr><tr><td><code>.pf-m-flyout</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu so that all nested <code>.pf-v6-c-menu</code> elements “flyout”.</td></tr><tr><td><code>.pf-m-nav</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu for nav variant.</td></tr><tr><td><code>.pf-m-top</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies a flyout menu to expand to the top.</td></tr><tr><td><code>.pf-m-left</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies a flyout menu to expand to the left.</td></tr><tr><td><code>.pf-m-plain</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu component for use in the page instead of as a dropdown.</td></tr><tr><td><code>.pf-m-scrollable</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting <code>--pf-v6-c-menu__content--MaxHeight</code>.</td></tr><tr><td><code>.pf-m-current</code></td><td><code>.pf-v6-c-menu__list-item</code></td><td>Modifies a list item for current styles.</td></tr><tr><td><code>.pf-m-load</code></td><td><code>.pf-v6-c-menu__list-item</code></td><td>Modifies a list item for “load more” styles.</td></tr><tr><td><code>.pf-m-loading</code></td><td><code>.pf-v6-c-menu__list-item</code></td><td>Modifies a list item for loading styles.</td></tr><tr><td><code>.pf-m-disabled</code></td><td><code>.pf-v6-c-menu__item</code></td><td>Modifies a list item for disabled styling.</td></tr><tr><td><code>.pf-m-aria-disabled</code></td><td><code>.pf-v6-c-menu__item</code></td><td>Modifies a list item for aria-disabled styling.</td></tr><tr><td><code>.pf-m-drilldown</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu so that all nested <code>.pf-v6-c-menu</code> elements “drill down”.</td></tr><tr><td><code>.pf-m-current-path</code></td><td><code>.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item</code></td><td>Modifies the menu list item for current path state.</td></tr><tr><td><code>.pf-m-drilled-in</code></td><td><code>.pf-v6-c-menu.pf-m-drilldown, .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu</code></td><td>Modifies the menu list for drilled in state.</td></tr><tr><td><code>.pf-m-static</code></td><td><code>.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu</code></td><td>Modifies the menu list for drilled static state.</td></tr><tr><td><code>.pf-m-danger</code></td><td><code>.pf-v6-c-menu__item-text</code></td><td>Modifies a list item for danger styles.</td></tr><tr><td><code>--pf-v6-c-menu--Width: {width}</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the width of the menu. The default value is <code>auto</code>.</td></tr><tr><td><code>--pf-v6-c-menu__content--MaxHeight: {height}</code></td><td><code>.pf-v6-c-menu__content</code></td><td>Modifies the height of the menu content. Update this value when header and/or footer elements are intended to be fixed.</td></tr><tr><td><code>--pf-v6-c-menu__content--Height: {height}</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the height of the drilldown menu content. The default value is <code>auto</code>.</td></tr><tr><td><code>--pf-v6-c-menu--m-flyout__menu--top-offset</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu to allow for an offset to the top positioning.</td></tr><tr><td><code>--pf-v6-c-menu--m-flyout__menu--left-offset</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu to allow for an offset to the left positioning.</td></tr><tr><td><code>--pf-v6-c-menu--m-flyout__menu--m-left--right-offset</code></td><td><code>.pf-v6-c-menu.pf-m-flyout > .pf-v6-c-menu</code></td><td>Modifies the menu to allow for an offset to the right positioning.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2942" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
|
|
478
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-menu</code></td><td><code><div></code></td><td>Initiates the menu. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__header</code></td><td><code><div></code></td><td>Initiates the menu header container.</td></tr><tr><td><code>.pf-v6-c-menu__search</code></td><td><code><div></code></td><td>Initiates the menu search container. Use for filtering.</td></tr><tr><td><code>.pf-v6-c-menu__search-input</code></td><td><code><div></code></td><td>Initiates the menu search input container.</td></tr><tr><td><code>.pf-v6-c-menu__content</code></td><td><code><div></code></td><td>Initiates the menu content. Use for lists. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__list</code></td><td><code><ul></code></td><td>Initiates the menu list. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__list-item</code></td><td><code><li></code></td><td>Initiates the menu list item. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__item</code></td><td><code><button></code>, <code><a></code>, <code><div></code>, <code><label></code></td><td>Initiates the menu item. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__item-main</code></td><td><code><span></code></td><td>Initiates the menu item main container. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__item-text</code></td><td><code><span></code></td><td>Initiates the menu item text. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-menu__item-check</code></td><td><code><span></code></td><td>Initiates a menu label.</td></tr><tr><td><code>.pf-v6-c-menu__item-description</code></td><td><code><span></code></td><td>Initiates the menu item description.</td></tr><tr><td><code>.pf-v6-c-menu__item-group</code></td><td><code><section></code></td><td>Initiates the menu item group.</td></tr><tr><td><code>.pf-v6-c-menu__item-group-title</code></td><td><code><h1></code></td><td>Initiates the menu item group title.</td></tr><tr><td><code>.pf-v6-c-menu__item-icon</code></td><td><code><span></code></td><td>Initiates the menu item icon.</td></tr><tr><td><code>.pf-v6-c-menu__item-toggle-icon</code></td><td><code><span></code></td><td>Initiates the menu item toggle icon.</td></tr><tr><td><code>.pf-v6-c-menu__item-select-icon</code></td><td><code><span></code></td><td>Initiates the menu item select icon.</td></tr><tr><td><code>.pf-v6-c-menu__item-action</code></td><td><code><button></code></td><td>Initiates the menu item action.</td></tr><tr><td><code>.pf-v6-c-menu__item-action-icon</code></td><td><code><span></code></td><td>Initiates the menu item action icon.</td></tr><tr><td><code>.pf-v6-c-menu__item-external-icon</code></td><td><code><span></code></td><td>Initiates the menu item external icon.</td></tr><tr><td><code>.pf-v6-c-menu__footer</code></td><td><code><div></code></td><td>Initiates the menu footer.</td></tr><tr><td><code>.pf-m-hidden{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-menu__list</code>, <code>.pf-v6-c-menu__list-item</code>, <code>.pf-v6-c-menu__group</code></td><td>Modifies a menu element to be hidden, at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2663" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr><tr><td><code>.pf-m-visible{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-menu__list</code>, <code>.pf-v6-c-menu__list-item</code>, <code>.pf-v6-c-menu__group</code></td><td>Modifies a menu element to be shown, at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2664" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr><tr><td><code>.pf-m-favorite</code></td><td><code>.pf-v6-c-menu__item-action</code></td><td>Modifies the menu item action to handle the favorite icon.</td></tr><tr><td><code>.pf-m-favorited</code></td><td><code>.pf-v6-c-menu__item-action.pf-m-favorite</code></td><td>Modifies the menu item action icon to be favorited.</td></tr><tr><td><code>.pf-m-selected</code></td><td><code>.pf-v6-c-menu__item</code></td><td>Modifies the menu item to be selected.</td></tr><tr><td><code>.pf-m-drill-up</code></td><td><code>.pf-v6-c-menu__list-item</code></td><td>Flags the menu item as a drill up button.</td></tr><tr><td><code>.pf-m-flyout</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu so that all nested <code>.pf-v6-c-menu</code> elements “flyout”.</td></tr><tr><td><code>.pf-m-nav</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu for nav variant.</td></tr><tr><td><code>.pf-m-top</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies a flyout menu to expand to the top.</td></tr><tr><td><code>.pf-m-left</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies a flyout menu to expand to the left.</td></tr><tr><td><code>.pf-m-plain</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu component for use in the page instead of as a dropdown.</td></tr><tr><td><code>.pf-m-scrollable</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting <code>--pf-v6-c-menu__content--MaxHeight</code>.</td></tr><tr><td><code>.pf-m-current</code></td><td><code>.pf-v6-c-menu__list-item</code></td><td>Modifies a list item for current styles.</td></tr><tr><td><code>.pf-m-load</code></td><td><code>.pf-v6-c-menu__list-item</code></td><td>Modifies a list item for “load more” styles.</td></tr><tr><td><code>.pf-m-loading</code></td><td><code>.pf-v6-c-menu__list-item</code></td><td>Modifies a list item for loading styles.</td></tr><tr><td><code>.pf-m-disabled</code></td><td><code>.pf-v6-c-menu__item</code></td><td>Modifies a list item for disabled styling.</td></tr><tr><td><code>.pf-m-aria-disabled</code></td><td><code>.pf-v6-c-menu__item</code></td><td>Modifies a list item for aria-disabled styling.</td></tr><tr><td><code>.pf-m-drilldown</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu so that all nested <code>.pf-v6-c-menu</code> elements “drill down”.</td></tr><tr><td><code>.pf-m-current-path</code></td><td><code>.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item</code></td><td>Modifies the menu list item for current path state.</td></tr><tr><td><code>.pf-m-drilled-in</code></td><td><code>.pf-v6-c-menu.pf-m-drilldown, .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu</code></td><td>Modifies the menu list for drilled in state.</td></tr><tr><td><code>.pf-m-static</code></td><td><code>.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu</code></td><td>Modifies the menu list for drilled static state.</td></tr><tr><td><code>.pf-m-danger</code></td><td><code>.pf-v6-c-menu__item-text</code></td><td>Modifies a list item for danger styles.</td></tr><tr><td><code>--pf-v6-c-menu--Width: {width}</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the width of the menu. The default value is <code>auto</code>.</td></tr><tr><td><code>--pf-v6-c-menu__content--MaxHeight: {height}</code></td><td><code>.pf-v6-c-menu__content</code></td><td>Modifies the height of the menu content. Update this value when header and/or footer elements are intended to be fixed.</td></tr><tr><td><code>--pf-v6-c-menu__content--Height: {height}</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the height of the drilldown menu content. The default value is <code>auto</code>.</td></tr><tr><td><code>--pf-v6-c-menu--m-flyout__menu--top-offset</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu to allow for an offset to the top positioning.</td></tr><tr><td><code>--pf-v6-c-menu--m-flyout__menu--left-offset</code></td><td><code>.pf-v6-c-menu</code></td><td>Modifies the menu to allow for an offset to the left positioning.</td></tr><tr><td><code>--pf-v6-c-menu--m-flyout__menu--m-left--right-offset</code></td><td><code>.pf-v6-c-menu.pf-m-flyout > .pf-v6-c-menu</code></td><td>Modifies the menu to allow for an offset to the right positioning.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2620" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
|
|
479
479
|
CSS variables
|
|
480
480
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="10lBQB" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,false],"cssPrefix":[0,"pf-v6-c-menu"]}" ssr client="only" opts="{"name":"CSSTableComponent","value":"react"}"></astro-island></div></div></div></div> </div></section> </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>
|