npm - @patternfly/patternfly-doc-core - Versions diffs - 1.13.1 → 1.13.2 - Mend

@patternfly/patternfly-doc-core 1.13.1 → 1.13.2

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.

Files changed (358) hide show

package/dist/docs/components/menu/react/index.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!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.9.3"><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.CtSceO8m.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
+<!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.13.3"><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.DZnDNxNb.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
 <link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
 <link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
 <link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
@@ -42,119 +42,119 @@
 	animation-fill-mode: both;
 	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"],
 			[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"],
-			[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="ZsaGwN" prefix="r5" component-url="/_astro/PageToggle.DBsLIFpI.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;: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-121"><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="89JAl" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{&quot;name&quot;:&quot;ReactToolbar&quot;,&quot;value&quot;: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-41"><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-122"><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-123"><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-41"><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="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" 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> </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"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-687" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-688" data-pf-content="true" class="pf-v6-c-content--h3">Basic menus</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-716" data-pf-content="true" class="pf-v6-c-content--p">A menu may contain multiple variations of <code>&lt;MenuItem&gt;</code> components. The following example shows a few different states of menu items, where they may:</p>
-<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-752" data-pf-content="true" class="pf-v6-c-content--ul">
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-717" data-pf-content="true" class="pf-v6-c-content--li">Use the <code>itemId</code> property to link to callbacks. In this example, the <code>onSelect</code> property logs information to the console when a menu item is selected. In practice, specific actions can be linked to <code>onSelect</code> callbacks.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-718" data-pf-content="true" class="pf-v6-c-content--li">Use the <code>to</code> property to direct users to other resources or webpages after selecting a menu item, and the <code>onClick</code> property to pass in a callback for specific menu items.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-719" data-pf-content="true" class="pf-v6-c-content--li">Use the <code>isDisabled</code> property to disable a menu item.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-720" data-pf-content="true" class="pf-v6-c-content--li">Use the <code>isPlain</code> property to remove the outer box shadow and style the menu plainly instead.</li>
+			[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="ZsaGwN" prefix="r5" component-url="/_astro/PageToggle.DBsLIFpI.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;: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-121"><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="89JAl" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{&quot;name&quot;:&quot;ReactToolbar&quot;,&quot;value&quot;: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-41"><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-122"><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-123"><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-41"><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="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" 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> </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"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-644" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-645" data-pf-content="true" class="pf-v6-c-content--h3">Basic menus</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-673" data-pf-content="true" class="pf-v6-c-content--p">A menu may contain multiple variations of <code>&lt;MenuItem&gt;</code> components. The following example shows a few different states of menu items, where they may:</p>
+<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-709" data-pf-content="true" class="pf-v6-c-content--ul">
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-674" data-pf-content="true" class="pf-v6-c-content--li">Use the <code>itemId</code> property to link to callbacks. In this example, the <code>onSelect</code> property logs information to the console when a menu item is selected. In practice, specific actions can be linked to <code>onSelect</code> callbacks.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-675" data-pf-content="true" class="pf-v6-c-content--li">Use the <code>to</code> property to direct users to other resources or webpages after selecting a menu item, and the <code>onClick</code> property to pass in a callback for specific menu items.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-676" data-pf-content="true" class="pf-v6-c-content--li">Use the <code>isDisabled</code> property to disable a menu item.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-677" data-pf-content="true" class="pf-v6-c-content--li">Use the <code>isPlain</code> property to remove the outer box shadow and style the menu plainly instead.</li>
 </ul>
 <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="Z2uy94S" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuList, MenuItem, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const MenuBasic: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState(0);\n  const [isPlain, setIsPlain] = useState(false);\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId}`);\n    setActiveItem(item);\n  };\n\n  const togglePlain = (checked: boolean) =&gt; {\n    setIsPlain(checked);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Menu activeItemId={activeItem} onSelect={onSelect} isPlain={isPlain}&gt;\n        &lt;MenuContent&gt;\n          &lt;MenuList&gt;\n            &lt;MenuItem itemId={0}&gt;Action&lt;/MenuItem&gt;\n            &lt;MenuItem\n              itemId={1}\n              to=\&quot;#default-link2\&quot;\n              // just for demo so that navigation is not triggered\n              onClick={(event) =&gt; event.preventDefault()}\n            &gt;\n              Link\n            &lt;/MenuItem&gt;\n            &lt;MenuItem isDisabled&gt;Disabled action&lt;/MenuItem&gt;\n            &lt;MenuItem isDisabled to=\&quot;#default-link4\&quot;&gt;\n              Disabled link\n            &lt;/MenuItem&gt;\n            &lt;MenuItem isAriaDisabled tooltipProps={{ content: &#39;aria-disabled action&#39;, position: &#39;top&#39; }}&gt;\n              Aria-disabled action\n            &lt;/MenuItem&gt;\n            &lt;MenuItem\n              isAriaDisabled\n              to=\&quot;#default-link5\&quot;\n              tooltipProps={{ content: &#39;aria-disabled link&#39;, position: &#39;top&#39; }}\n            &gt;\n              Aria-disabled link\n            &lt;/MenuItem&gt;\n          &lt;/MenuList&gt;\n        &lt;/MenuContent&gt;\n      &lt;/Menu&gt;\n      &lt;div style={{ marginTop: 20 }}&gt;\n        &lt;Checkbox\n          label=\&quot;Plain menu\&quot;\n          isChecked={isPlain}\n          onChange={(_event, checked) =&gt; togglePlain(checked)}\n          aria-label=\&quot;plain menu checkbox\&quot;\n          id=\&quot;toggle-plain\&quot;\n          name=\&quot;toggle-plain\&quot;\n        /&gt;\n      &lt;/div&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-689" data-pf-content="true" class="pf-v6-c-content--h3">Danger menu item</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-721" data-pf-content="true" class="pf-v6-c-content--p">To indicate that a <code>&lt;MenuItem&gt;</code> is connected to a potentially destructive action, use the <code>isDanger</code> property. The “Delete” item in the following example demonstrates how danger items look.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-646" data-pf-content="true" class="pf-v6-c-content--h3">Danger menu item</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-678" data-pf-content="true" class="pf-v6-c-content--p">To indicate that a <code>&lt;MenuItem&gt;</code> is connected to a potentially destructive action, use the <code>isDanger</code> property. The “Delete” item in the following example demonstrates how danger items look.</p>
 <astro-island uid="mrg9" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Divider, Menu, MenuContent, MenuItem, MenuList } from &#39;@patternfly/react-core&#39;;\n\nexport const MenuDangerMenuItem: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    const item = itemId as number;\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId}`);\n    setActiveItem(item);\n  };\n\n  return (\n    &lt;Menu activeItemId={activeItem} onSelect={onSelect}&gt;\n      &lt;MenuContent&gt;\n        &lt;MenuList&gt;\n          &lt;MenuItem itemId={0}&gt;Action 1&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={1}&gt;Action 2&lt;/MenuItem&gt;\n          &lt;Divider component=\&quot;li\&quot; /&gt;\n          &lt;MenuItem itemId={2} isDanger&gt;\n            Delete\n          &lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-690" data-pf-content="true" class="pf-v6-c-content--h3">With icons</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-722" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>icon</code> property to add a familiar icon before a <code>&lt;MenuItem&gt;</code> to accelerate text label recognition.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-647" data-pf-content="true" class="pf-v6-c-content--h3">With icons</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-679" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>icon</code> property to add a familiar icon before a <code>&lt;MenuItem&gt;</code> to accelerate text label recognition.</p>
 <astro-island uid="ZqqWEx" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuList, MenuItem } from &#39;@patternfly/react-core&#39;;\nimport CodeBranchIcon from &#39;@patternfly/react-icons/dist/esm/icons/code-branch-icon&#39;;\nimport LayerGroupIcon from &#39;@patternfly/react-icons/dist/esm/icons/layer-group-icon&#39;;\nimport CubeIcon from &#39;@patternfly/react-icons/dist/esm/icons/cube-icon&#39;;\n\nexport const MenuWithIcons: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  return (\n    &lt;Menu onSelect={onSelect} activeItemId={activeItem}&gt;\n      &lt;MenuContent&gt;\n        &lt;MenuList&gt;\n          &lt;MenuItem icon={&lt;CodeBranchIcon /&gt;} itemId={0}&gt;\n            From git\n          &lt;/MenuItem&gt;\n          &lt;MenuItem icon={&lt;LayerGroupIcon /&gt;} itemId={1}&gt;\n            Container image\n          &lt;/MenuItem&gt;\n          &lt;MenuItem icon={&lt;CubeIcon /&gt;} itemId={2}&gt;\n            Docker file\n          &lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-691" data-pf-content="true" class="pf-v6-c-content--h3">With actions</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-723" data-pf-content="true" class="pf-v6-c-content--p">To connect a menu item to an action icon, add a <code>&lt;MenuItemAction&gt;</code> to a <code>&lt;MenuItem&gt;</code>, and use the <code>icon</code> property to load an easily recognizable icon.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-724" data-pf-content="true" class="pf-v6-c-content--p">To trigger an action when any menu action icon is selected, pass a callback to the <code>onActionClick</code> property of the <code>&lt;Menu&gt;</code>. The following example logs to the console any time any action icon is selected.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-725" data-pf-content="true" class="pf-v6-c-content--p">To trigger an action when a specific item’s action icon is selected, pass in the <code>onClick</code> property to that <code>&lt;MenuItemAction&gt;</code>. The following example logs “clicked on code icon” to the console when the “code” icon is selected.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-648" data-pf-content="true" class="pf-v6-c-content--h3">With actions</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-680" data-pf-content="true" class="pf-v6-c-content--p">To connect a menu item to an action icon, add a <code>&lt;MenuItemAction&gt;</code> to a <code>&lt;MenuItem&gt;</code>, and use the <code>icon</code> property to load an easily recognizable icon.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-681" data-pf-content="true" class="pf-v6-c-content--p">To trigger an action when any menu action icon is selected, pass a callback to the <code>onActionClick</code> property of the <code>&lt;Menu&gt;</code>. The following example logs to the console any time any action icon is selected.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-682" data-pf-content="true" class="pf-v6-c-content--p">To trigger an action when a specific item’s action icon is selected, pass in the <code>onClick</code> property to that <code>&lt;MenuItemAction&gt;</code>. The following example logs “clicked on code icon” to the console when the “code” icon is selected.</p>
 <astro-island uid="2eyYWr" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuGroup, MenuList, MenuItem, MenuItemAction } from &#39;@patternfly/react-core&#39;;\nimport BarsIcon from &#39;@patternfly/react-icons/dist/esm/icons/bars-icon&#39;;\nimport ClipboardIcon from &#39;@patternfly/react-icons/dist/esm/icons/clipboard-icon&#39;;\nimport CodeBranchIcon from &#39;@patternfly/react-icons/dist/esm/icons/code-branch-icon&#39;;\nimport BellIcon from &#39;@patternfly/react-icons/dist/esm/icons/bell-icon&#39;;\n\nexport const MenuWithActions: React.FunctionComponent = () =&gt; {\n  const [selectedItems, setSelectedItems] = useState&lt;number[]&gt;([0, 2, 3]);\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    const item = itemId as number;\n    if (selectedItems.indexOf(item) !== -1) {\n      setSelectedItems(selectedItems.filter((id) =&gt; id !== item));\n    } else {\n      setSelectedItems([...selectedItems, item]);\n    }\n  };\n\n  return (\n    &lt;Menu\n      onSelect={onSelect}\n      // eslint-disable-next-line no-console\n      onActionClick={(_event, itemId, actionId) =&gt; console.log(`clicked on ${itemId} - ${actionId}`)}\n      activeItemId={0}\n    &gt;\n      &lt;MenuContent&gt;\n        &lt;MenuGroup label=\&quot;Actions\&quot; labelHeadingLevel=\&quot;h3\&quot;&gt;\n          &lt;MenuList&gt;\n            &lt;MenuItem\n              isSelected={selectedItems.indexOf(0) !== -1}\n              actions={\n                &lt;MenuItemAction\n                  icon={&lt;CodeBranchIcon /&gt;}\n                  actionId=\&quot;code\&quot;\n                  // eslint-disable-next-line no-console\n                  onClick={() =&gt; console.log(&#39;clicked on code icon&#39;)}\n                  aria-label=\&quot;Code\&quot;\n                /&gt;\n              }\n              description=\&quot;This is a description\&quot;\n              itemId={0}\n            &gt;\n              Item 1\n            &lt;/MenuItem&gt;\n            &lt;MenuItem\n              isDisabled\n              isSelected={selectedItems.indexOf(1) !== -1}\n              actions={&lt;MenuItemAction icon={&lt;BellIcon /&gt;} actionId=\&quot;alert\&quot; aria-label=\&quot;Alert\&quot; /&gt;}\n              description=\&quot;This is a description\&quot;\n              itemId={1}\n            &gt;\n              Item 2\n            &lt;/MenuItem&gt;\n            &lt;MenuItem\n              isSelected={selectedItems.indexOf(2) !== -1}\n              actions={&lt;MenuItemAction icon={&lt;ClipboardIcon /&gt;} actionId=\&quot;copy\&quot; aria-label=\&quot;Copy\&quot; /&gt;}\n              itemId={2}\n            &gt;\n              Item 3\n            &lt;/MenuItem&gt;\n            &lt;MenuItem\n              isSelected={selectedItems.indexOf(3) !== -1}\n              actions={&lt;MenuItemAction icon={&lt;BarsIcon /&gt;} actionId=\&quot;expand\&quot; aria-label=\&quot;Expand\&quot; /&gt;}\n              description=\&quot;This is a description\&quot;\n              itemId={3}\n            &gt;\n              Item 4\n            &lt;/MenuItem&gt;\n          &lt;/MenuList&gt;\n        &lt;/MenuGroup&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-692" data-pf-content="true" class="pf-v6-c-content--h3">With links</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-726" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>to</code> property to add a link to a <code>&lt;MenuItem&gt;</code> that directs users to a new page when the item is selected. Use the <code>isExternalLink</code> property when linking to external resources. This will annotate a menu item link with an external link icon when they navigate to the link or hover over it, as well as add <code>target=&quot;_blank&quot;</code> so that the link opens in a new tab or window.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-649" data-pf-content="true" class="pf-v6-c-content--h3">With links</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-683" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>to</code> property to add a link to a <code>&lt;MenuItem&gt;</code> that directs users to a new page when the item is selected. Use the <code>isExternalLink</code> property when linking to external resources. This will annotate a menu item link with an external link icon when they navigate to the link or hover over it, as well as add <code>target=&quot;_blank&quot;</code> so that the link opens in a new tab or window.</p>
 <astro-island uid="1GDyfU" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuList, MenuItem } from &#39;@patternfly/react-core&#39;;\n\nexport const MenuWithLinks: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  return (\n    &lt;Menu onSelect={onSelect} activeItemId={activeItem}&gt;\n      &lt;MenuContent&gt;\n        &lt;MenuList&gt;\n          &lt;MenuItem isExternalLink to=\&quot;#default-link1\&quot; itemId={0}&gt;\n            Link 1\n          &lt;/MenuItem&gt;\n          &lt;MenuItem isExternalLink to=\&quot;#default-link2\&quot; itemId={1}&gt;\n            Link 2\n          &lt;/MenuItem&gt;\n          &lt;MenuItem to=\&quot;#default-link3\&quot; itemId={2}&gt;\n            Link 3\n          &lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-693" data-pf-content="true" class="pf-v6-c-content--h3">With descriptions</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-727" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>description</code> property to add short descriptive text below any menu item that needs additional context.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-650" data-pf-content="true" class="pf-v6-c-content--h3">With descriptions</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-684" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>description</code> property to add short descriptive text below any menu item that needs additional context.</p>
 <astro-island uid="Z1tqwuR" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuList, MenuItem } from &#39;@patternfly/react-core&#39;;\nimport CodeBranchIcon from &#39;@patternfly/react-icons/dist/esm/icons/code-branch-icon&#39;;\n\nexport const MenuWithDescription: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  return (\n    &lt;Menu onSelect={onSelect} activeItemId={activeItem}&gt;\n      &lt;MenuContent&gt;\n        &lt;MenuList&gt;\n          &lt;MenuItem icon={&lt;CodeBranchIcon /&gt;} description=\&quot;Description\&quot; itemId={0}&gt;\n            Action 1\n          &lt;/MenuItem&gt;\n          &lt;MenuItem isDisabled icon={&lt;CodeBranchIcon /&gt;} description=\&quot;Description\&quot; itemId={1}&gt;\n            Action 2 disabled\n          &lt;/MenuItem&gt;\n          &lt;MenuItem\n            icon={&lt;CodeBranchIcon /&gt;}\n            description=\&quot;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.\&quot;\n            itemId={2}\n          &gt;\n            Action 3\n          &lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-694" data-pf-content="true" class="pf-v6-c-content--h3">Item checkbox</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-728" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>hasCheck</code> property to add a checkbox to a <code>&lt;MenuItem&gt;</code>. Use the <code>isSelected</code> property to indicate when a <code>&lt;MenuItem&gt;</code> is selected.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-651" data-pf-content="true" class="pf-v6-c-content--h3">Item checkbox</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-685" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>hasCheck</code> property to add a checkbox to a <code>&lt;MenuItem&gt;</code>. Use the <code>isSelected</code> property to indicate when a <code>&lt;MenuItem&gt;</code> is selected.</p>
 <astro-island uid="gyBQx" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuList, MenuItem } from &#39;@patternfly/react-core&#39;;\n\nexport const MenuWithCheckbox: React.FunctionComponent = () =&gt; {\n  const [selectedItems, setSelectedItems] = useState&lt;number[]&gt;([]);\n\n  /* eslint no-unused-vars: [\&quot;error\&quot;, {\&quot;args\&quot;: \&quot;after-used\&quot;}] */\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    const item = itemId as number;\n    if (selectedItems.includes(item)) {\n      setSelectedItems(selectedItems.filter((id) =&gt; id !== item));\n    } else {\n      setSelectedItems([...selectedItems, item]);\n    }\n  };\n\n  return (\n    &lt;Menu onSelect={onSelect} selected={selectedItems}&gt;\n      &lt;MenuContent&gt;\n        &lt;MenuList&gt;\n          &lt;MenuItem hasCheckbox itemId={0} isSelected={selectedItems.includes(0)}&gt;\n            Checkbox 1\n          &lt;/MenuItem&gt;\n          &lt;MenuItem hasCheckbox itemId={1} isSelected={selectedItems.includes(1)}&gt;\n            Checkbox 2\n          &lt;/MenuItem&gt;\n          &lt;MenuItem hasCheckbox itemId={2} isDisabled&gt;\n            Checkbox 3\n          &lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-695" data-pf-content="true" class="pf-v6-c-content--h3">Menu footer</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-729" data-pf-content="true" class="pf-v6-c-content--p">Add a <code>&lt;MenuFooter&gt;</code> that contains separate, but related actions at the bottom of a menu.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-652" data-pf-content="true" class="pf-v6-c-content--h3">Menu footer</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-686" data-pf-content="true" class="pf-v6-c-content--p">Add a <code>&lt;MenuFooter&gt;</code> that contains separate, but related actions at the bottom of a menu.</p>
 <astro-island uid="Z8sJ2L" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuList, MenuItem, MenuContent, MenuFooter, Button } from &#39;@patternfly/react-core&#39;;\n\nexport const MenuWithFooter: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    const item = itemId as number;\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  return (\n    &lt;Menu activeItemId={activeItem} onSelect={onSelect}&gt;\n      &lt;MenuContent&gt;\n        &lt;MenuList&gt;\n          &lt;MenuItem itemId={0}&gt;Action&lt;/MenuItem&gt;\n          &lt;MenuItem\n            itemId={1}\n            to=\&quot;#default-link2\&quot;\n            // just for demo so that navigation is not triggered\n            onClick={(event) =&gt; event.preventDefault()}\n          &gt;\n            Link\n          &lt;/MenuItem&gt;\n          &lt;MenuItem isDisabled&gt;Disabled action&lt;/MenuItem&gt;\n          &lt;MenuItem isDisabled to=\&quot;#default-link4\&quot;&gt;\n            Disabled link\n          &lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n      &lt;MenuFooter&gt;\n        &lt;Button variant=\&quot;link\&quot; isInline&gt;\n          Action\n        &lt;/Button&gt;\n      &lt;/MenuFooter&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-696" data-pf-content="true" class="pf-v6-c-content--h3">Separated items</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-749" data-pf-content="true" class="pf-v6-c-content--p">Use a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-697" data-pf-content="true" class="pf-v6-c-content--a">divider</a> to visually separate <code>&lt;MenuContent&gt;</code>. Use the <code>component</code> property to specify the type of divider component to use.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-653" data-pf-content="true" class="pf-v6-c-content--h3">Separated items</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-706" data-pf-content="true" class="pf-v6-c-content--p">Use a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-654" data-pf-content="true" class="pf-v6-c-content--a">divider</a> to visually separate <code>&lt;MenuContent&gt;</code>. Use the <code>component</code> property to specify the type of divider component to use.</p>
 <astro-island uid="25V6q1" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Divider, Menu, MenuContent, MenuList, MenuItem } from &#39;@patternfly/react-core&#39;;\n\nexport const MenuWithSeparators: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    const item = itemId as number;\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  return (\n    &lt;Menu onSelect={onSelect} activeItemId={activeItem}&gt;\n      &lt;MenuContent&gt;\n        &lt;MenuList&gt;\n          &lt;MenuItem itemId={0}&gt;Action 1&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={1}&gt;Action 2&lt;/MenuItem&gt;\n          &lt;Divider component=\&quot;li\&quot; /&gt;\n          &lt;MenuItem itemId={2}&gt;Action 3&lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-698" data-pf-content="true" class="pf-v6-c-content--h3">Titled groups of items</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-730" data-pf-content="true" class="pf-v6-c-content--p">Add a <code>&lt;MenuGroup&gt;</code> to organize <code>&lt;MenuContent&gt;</code> and use the <code>label</code> property to title a group of menu items. Use the <code>labelHeadingLevel</code> property to assign a heading level to the menu group label.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-655" data-pf-content="true" class="pf-v6-c-content--h3">Titled groups of items</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-687" data-pf-content="true" class="pf-v6-c-content--p">Add a <code>&lt;MenuGroup&gt;</code> to organize <code>&lt;MenuContent&gt;</code> and use the <code>label</code> property to title a group of menu items. Use the <code>labelHeadingLevel</code> property to assign a heading level to the menu group label.</p>
 <astro-island uid="Z1D7e6h" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuGroup, MenuList, MenuItem, Divider } from &#39;@patternfly/react-core&#39;;\n\nexport const MenuWithTitledGroups: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  return (\n    &lt;Menu onSelect={onSelect} activeItemId={activeItem}&gt;\n      &lt;MenuContent&gt;\n        &lt;MenuGroup&gt;\n          &lt;MenuList&gt;\n            &lt;MenuItem to=\&quot;#\&quot; itemId={0}&gt;\n              Link not in group\n            &lt;/MenuItem&gt;\n          &lt;/MenuList&gt;\n        &lt;/MenuGroup&gt;\n        &lt;Divider /&gt;\n        &lt;MenuGroup label=\&quot;Group 1\&quot; labelHeadingLevel=\&quot;h3\&quot;&gt;\n          &lt;MenuList&gt;\n            &lt;MenuItem to=\&quot;#\&quot; itemId={1}&gt;\n              Link 1\n            &lt;/MenuItem&gt;\n            &lt;MenuItem itemId={2}&gt;Link 2&lt;/MenuItem&gt;\n          &lt;/MenuList&gt;\n        &lt;/MenuGroup&gt;\n        &lt;Divider /&gt;\n        &lt;MenuGroup label=\&quot;Group 2\&quot; labelHeadingLevel=\&quot;h3\&quot;&gt;\n          &lt;MenuList&gt;\n            &lt;MenuItem to=\&quot;#\&quot; itemId={3}&gt;\n              Link 1\n            &lt;/MenuItem&gt;\n            &lt;MenuItem to=\&quot;#\&quot; itemId={4}&gt;\n              Link 2\n            &lt;/MenuItem&gt;\n          &lt;/MenuList&gt;\n        &lt;/MenuGroup&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-699" data-pf-content="true" class="pf-v6-c-content--h3">With favorites</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-731" data-pf-content="true" class="pf-v6-c-content--p">The following menu example allows users to favorite menu items, an action that duplicates a menu item and places it in a separate group at the top of the menu. The <code>isFavorited</code> property identifies items that a user has favorited.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-656" data-pf-content="true" class="pf-v6-c-content--h3">With favorites</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-688" data-pf-content="true" class="pf-v6-c-content--p">The following menu example allows users to favorite menu items, an action that duplicates a menu item and places it in a separate group at the top of the menu. The <code>isFavorited</code> property identifies items that a user has favorited.</p>
 <astro-island uid="1U1P3c" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuItem, MenuItemAction, MenuGroup, MenuList, Divider } from &#39;@patternfly/react-core&#39;;\nimport BarsIcon from &#39;@patternfly/react-icons/dist/esm/icons/bars-icon&#39;;\nimport ClipboardIcon from &#39;@patternfly/react-icons/dist/esm/icons/clipboard-icon&#39;;\nimport BellIcon from &#39;@patternfly/react-icons/dist/esm/icons/bell-icon&#39;;\n\nexport const MenuWithFavorites: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState(0);\n  const [favorites, setFavorites] = useState&lt;string[]&gt;([]);\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${item}`);\n    setActiveItem(item);\n  };\n\n  const onFavorite = (event, itemId: string, actionId: string) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId} - ${actionId}`);\n    if (actionId === &#39;fav&#39;) {\n      const isFavorite = favorites.includes(itemId);\n      if (isFavorite) {\n        setFavorites(favorites.filter((fav) =&gt; fav !== itemId));\n      } else {\n        setFavorites([...favorites, itemId]);\n      }\n    }\n  };\n\n  const items = [\n    {\n      text: &#39;Item 1&#39;,\n      description: &#39;Description 1&#39;,\n      itemId: &#39;item-1&#39;,\n      action: &lt;BarsIcon /&gt;,\n      actionId: &#39;bars&#39;\n    },\n    {\n      text: &#39;Item 2&#39;,\n      description: &#39;Description 2&#39;,\n      itemId: &#39;item-2&#39;,\n      action: &lt;ClipboardIcon /&gt;,\n      actionId: &#39;clipboard&#39;\n    },\n    {\n      text: &#39;Item 3&#39;,\n      description: &#39;Description 3&#39;,\n      itemId: &#39;item-3&#39;,\n      action: &lt;BellIcon /&gt;,\n      actionId: &#39;bell&#39;\n    }\n  ];\n\n  return (\n    &lt;Menu onSelect={onSelect} onActionClick={onFavorite} activeItemId={activeItem}&gt;\n      &lt;MenuContent&gt;\n        {favorites.length &gt; 0 &amp;&amp; (\n          &lt;Fragment&gt;\n            &lt;MenuGroup label=\&quot;Favorites\&quot; labelHeadingLevel=\&quot;h3\&quot;&gt;\n              &lt;MenuList&gt;\n                {items\n                  .filter((item) =&gt; favorites.includes(item.itemId))\n                  .map((item) =&gt; {\n                    const { text, description, itemId, action, actionId } = item;\n                    return (\n                      &lt;MenuItem\n                        key={`fav-${itemId}`}\n                        isFavorited\n                        description={description}\n                        itemId={itemId}\n                        actions={&lt;MenuItemAction actionId={actionId} icon={action} aria-label={actionId} /&gt;}\n                      &gt;\n                        {text}\n                      &lt;/MenuItem&gt;\n                    );\n                  })}\n              &lt;/MenuList&gt;\n            &lt;/MenuGroup&gt;\n            &lt;Divider /&gt;\n          &lt;/Fragment&gt;\n        )}\n        &lt;MenuGroup label=\&quot;All actions\&quot; labelHeadingLevel=\&quot;h3\&quot;&gt;\n          &lt;MenuList&gt;\n            {items.map((item) =&gt; {\n              const { text, description, itemId, action, actionId } = item;\n              const isFavorited = favorites.includes(item.itemId);\n              return (\n                &lt;MenuItem\n                  key={itemId}\n                  isFavorited={isFavorited}\n                  description={description}\n                  itemId={itemId}\n                  actions={&lt;MenuItemAction actionId={actionId} icon={action} aria-label={actionId} /&gt;}\n                &gt;\n                  {text}\n                &lt;/MenuItem&gt;\n              );\n            })}\n          &lt;/MenuList&gt;\n        &lt;/MenuGroup&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-700" data-pf-content="true" class="pf-v6-c-content--h3">Filtering with search input</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-750" data-pf-content="true" class="pf-v6-c-content--p">A <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-701" data-pf-content="true" class="pf-v6-c-content--a">search input</a> component can be placed within <code>&lt;MenuSearch&gt;</code> and <code>&lt;MenuSearchInput&gt;</code> to render a search input at the top of the menu. In the following example, the <code>onChange</code> property of the text input is passed a callback that filters menu items as a user types.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-657" data-pf-content="true" class="pf-v6-c-content--h3">Filtering with search input</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-707" data-pf-content="true" class="pf-v6-c-content--p">A <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-658" data-pf-content="true" class="pf-v6-c-content--a">search input</a> component can be placed within <code>&lt;MenuSearch&gt;</code> and <code>&lt;MenuSearchInput&gt;</code> to render a search input at the top of the menu. In the following example, the <code>onChange</code> property of the text input is passed a callback that filters menu items as a user types.</p>
 <astro-island uid="70bsz" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Menu,\n  MenuList,\n  MenuItem,\n  MenuContent,\n  MenuSearch,\n  MenuSearchInput,\n  Divider,\n  SearchInput\n} from &#39;@patternfly/react-core&#39;;\n\nexport const MenuFilteringWithSearchInput: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState(0);\n  const [input, setInput] = useState(&#39;&#39;);\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    const item = itemId as number; // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId}`);\n    setActiveItem(item);\n  };\n\n  const handleTextInputChange = (value: string) =&gt; {\n    setInput(value);\n  };\n\n  const menuListItemsText = [&#39;Action 1&#39;, &#39;Action 2&#39;, &#39;Action 3&#39;];\n\n  const menuListItems = menuListItemsText\n    .filter((item) =&gt; !input || item.toLowerCase().includes(input.toString().toLowerCase()))\n    .map((currentValue, index) =&gt; (\n      &lt;MenuItem key={currentValue} itemId={index}&gt;\n        {currentValue}\n      &lt;/MenuItem&gt;\n    ));\n  if (input &amp;&amp; menuListItems.length === 0) {\n    menuListItems.push(\n      &lt;MenuItem isDisabled key=\&quot;no result\&quot;&gt;\n        No results found\n      &lt;/MenuItem&gt;\n    );\n  }\n\n  return (\n    &lt;Menu onSelect={onSelect} activeItemId={activeItem}&gt;\n      &lt;MenuSearch&gt;\n        &lt;MenuSearchInput&gt;\n          &lt;SearchInput\n            value={input}\n            aria-label=\&quot;Filter menu items\&quot;\n            onChange={(_event, value) =&gt; handleTextInputChange(value)}\n          /&gt;\n        &lt;/MenuSearchInput&gt;\n      &lt;/MenuSearch&gt;\n      &lt;Divider /&gt;\n      &lt;MenuContent&gt;\n        &lt;MenuList&gt;{menuListItems}&lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-702" data-pf-content="true" class="pf-v6-c-content--h3">Option single select menu</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-732" data-pf-content="true" class="pf-v6-c-content--p">The following example demonstrates a single option select menu that persists a selected menu item. Use the <code>selected</code> property on the <code>&lt;Menu&gt;</code> to label a selected item with a checkmark. You can also use the <code>isSelected</code> property on a <code>&lt;MenuItem&gt;</code> to indicate that it is selected.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-733" data-pf-content="true" class="pf-v6-c-content--p">You must also use the <code>role</code> property on the <code>&lt;Menu&gt;</code> with a value of <code>&quot;listbox&quot;</code> when using a non-checkbox select menu.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-659" data-pf-content="true" class="pf-v6-c-content--h3">Option single select menu</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-689" data-pf-content="true" class="pf-v6-c-content--p">The following example demonstrates a single option select menu that persists a selected menu item. Use the <code>selected</code> property on the <code>&lt;Menu&gt;</code> to label a selected item with a checkmark. You can also use the <code>isSelected</code> property on a <code>&lt;MenuItem&gt;</code> to indicate that it is selected.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-690" data-pf-content="true" class="pf-v6-c-content--p">You must also use the <code>role</code> property on the <code>&lt;Menu&gt;</code> with a value of <code>&quot;listbox&quot;</code> when using a non-checkbox select menu.</p>
 <astro-island uid="Z9TgdQ" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuList, MenuItem } from &#39;@patternfly/react-core&#39;;\nimport TableIcon from &#39;@patternfly/react-icons/dist/esm/icons/table-icon&#39;;\n\nexport const MenuOptionSingleSelect: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState(0);\n  const [selectedItem, setSelectedItem] = useState(0);\n\n  const onSelect = (_event, itemId) =&gt; {\n    setActiveItem(itemId);\n    setSelectedItem(itemId);\n  };\n\n  return (\n    &lt;Menu role=\&quot;listbox\&quot; onSelect={onSelect} activeItemId={activeItem} selected={selectedItem}&gt;\n      &lt;MenuContent&gt;\n        &lt;MenuList aria-label=\&quot;Menu single select example\&quot;&gt;\n          &lt;MenuItem itemId={0}&gt;Option 1&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={1}&gt;Option 2&lt;/MenuItem&gt;\n          &lt;MenuItem icon={&lt;TableIcon /&gt;} itemId={2}&gt;\n            Option 3\n          &lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-703" data-pf-content="true" class="pf-v6-c-content--h3">Option multi select menu</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-734" data-pf-content="true" class="pf-v6-c-content--p">To persist multiple selections that a user makes, use a multiple option select menu. To enable multi select, pass an array containing each selected <code>itemId</code> to the <code>selected</code> property on the <code>&lt;Menu&gt;</code>, and pass the <code>isAriaMultiselectable</code> property on the <code>&lt;MenuList&gt;</code>.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-735" data-pf-content="true" class="pf-v6-c-content--p">Similar to a single select menu, you must also pass <code>role=&quot;listbox&quot;</code> to the <code>&lt;Menu&gt;</code>.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-660" data-pf-content="true" class="pf-v6-c-content--h3">Option multi select menu</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-691" data-pf-content="true" class="pf-v6-c-content--p">To persist multiple selections that a user makes, use a multiple option select menu. To enable multi select, pass an array containing each selected <code>itemId</code> to the <code>selected</code> property on the <code>&lt;Menu&gt;</code>, and pass the <code>isAriaMultiselectable</code> property on the <code>&lt;MenuList&gt;</code>.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-692" data-pf-content="true" class="pf-v6-c-content--p">Similar to a single select menu, you must also pass <code>role=&quot;listbox&quot;</code> to the <code>&lt;Menu&gt;</code>.</p>
 <astro-island uid="14zeJC" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuList, MenuItem } from &#39;@patternfly/react-core&#39;;\nimport TableIcon from &#39;@patternfly/react-icons/dist/esm/icons/table-icon&#39;;\n\nexport const MenuOptionMultiSelect: React.FunctionComponent = () =&gt; {\n  const [selectedItems, setSelectedItems] = useState&lt;number[]&gt;([]);\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    const item = itemId as number;\n    if (selectedItems.indexOf(item) !== -1) {\n      setSelectedItems(selectedItems.filter((id) =&gt; id !== item));\n    } else {\n      setSelectedItems([...selectedItems, item]);\n    }\n  };\n\n  return (\n    &lt;Menu role=\&quot;listbox\&quot; onSelect={onSelect} activeItemId={0} selected={selectedItems}&gt;\n      &lt;MenuContent&gt;\n        &lt;MenuList isAriaMultiselectable aria-label=\&quot;Menu multi select example\&quot;&gt;\n          &lt;MenuItem itemId={0}&gt;Option 1&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={1}&gt;Option 2&lt;/MenuItem&gt;\n          &lt;MenuItem icon={&lt;TableIcon /&gt;} itemId={2}&gt;\n            Option 3\n          &lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-704" data-pf-content="true" class="pf-v6-c-content--h3">Scrollable menus</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-736" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>isScrollable</code> property to make a long <code>&lt;Menu&gt;</code> scrollable and visually condensed.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-661" data-pf-content="true" class="pf-v6-c-content--h3">Scrollable menus</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-693" data-pf-content="true" class="pf-v6-c-content--p">Use the <code>isScrollable</code> property to make a long <code>&lt;Menu&gt;</code> scrollable and visually condensed.</p>
 <astro-island uid="Z1IH7BT" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuList, MenuItem } from &#39;@patternfly/react-core&#39;;\n\nexport const MenuScrollable: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event, itemId) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId}`);\n    setActiveItem(itemId);\n  };\n\n  return (\n    &lt;Menu activeItemId={activeItem} onSelect={onSelect} isScrollable&gt;\n      &lt;MenuContent&gt;\n        &lt;MenuList&gt;\n          &lt;MenuItem itemId={0}&gt;Action 1&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={1}&gt;Action 2&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={2}&gt;Action 3&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={3}&gt;Action 4&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={4}&gt;Action 5&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={5}&gt;Action 6&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={6}&gt;Action 7&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={7}&gt;Action 8&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={8}&gt;Action 9&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={9}&gt;Action 10&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={10}&gt;Action 11&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={11}&gt;Action 12&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={12}&gt;Action 13&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={13}&gt;Action 14&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={14}&gt;Action 15&lt;/MenuItem&gt;\n          &lt;MenuItem\n            itemId={15}\n            to=\&quot;#default-link2\&quot;\n            // just for demo so that navigation is not triggered\n            onClick={(event) =&gt; event.preventDefault()}\n          &gt;\n            Link\n          &lt;/MenuItem&gt;\n          &lt;MenuItem isDisabled&gt;Disabled action&lt;/MenuItem&gt;\n          &lt;MenuItem isDisabled to=\&quot;#default-link4\&quot;&gt;\n            Disabled link\n          &lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-705" data-pf-content="true" class="pf-v6-c-content--h3">Scrollable menu with custom height</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-737" data-pf-content="true" class="pf-v6-c-content--p">Adjust the visual size of a scrollable menu by using the <code>menuHeight</code> property within <code>&lt;MenuContent&gt;</code>. This example adjusts the height to 200px.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-662" data-pf-content="true" class="pf-v6-c-content--h3">Scrollable menu with custom height</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-694" data-pf-content="true" class="pf-v6-c-content--p">Adjust the visual size of a scrollable menu by using the <code>menuHeight</code> property within <code>&lt;MenuContent&gt;</code>. This example adjusts the height to 200px.</p>
 <astro-island uid="Z3m2U0" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuList, MenuItem } from &#39;@patternfly/react-core&#39;;\n\nexport const MenuScrollableCustomMenuHeight: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState(0);\n\n  const onSelect = (_event, itemId) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId}`);\n    setActiveItem(itemId);\n  };\n\n  return (\n    &lt;Menu activeItemId={activeItem} onSelect={onSelect} isScrollable&gt;\n      &lt;MenuContent menuHeight=\&quot;200px\&quot;&gt;\n        &lt;MenuList&gt;\n          &lt;MenuItem itemId={0}&gt;Action 1&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={1}&gt;Action 2&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={2}&gt;Action 3&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={3}&gt;Action 4&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={4}&gt;Action 5&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={5}&gt;Action 6&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={6}&gt;Action 7&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={7}&gt;Action 8&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={8}&gt;Action 9&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={9}&gt;Action 10&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={10}&gt;Action 11&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={11}&gt;Action 12&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={12}&gt;Action 13&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={13}&gt;Action 14&lt;/MenuItem&gt;\n          &lt;MenuItem itemId={14}&gt;Action 15&lt;/MenuItem&gt;\n          &lt;MenuItem\n            itemId={15}\n            to=\&quot;#default-link2\&quot;\n            // just for demo so that navigation is not triggered\n            onClick={(event) =&gt; event.preventDefault()}\n          &gt;\n            Link\n          &lt;/MenuItem&gt;\n          &lt;MenuItem isDisabled&gt;Disabled action&lt;/MenuItem&gt;\n          &lt;MenuItem isDisabled to=\&quot;#default-link4\&quot;&gt;\n            Disabled link\n          &lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-706" data-pf-content="true" class="pf-v6-c-content--h3">With view more</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-738" data-pf-content="true" class="pf-v6-c-content--p">If you want to initially render only a certain number of menu items within a large menu, you can add a “view more” menu item with a callback passed into its <code>onClick</code> property that will render additional menu items.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-707" data-pf-content="true" class="pf-v6-c-content--p">In this example, 3 additional menu items are revealed each time the “view more” option is selected, with a loading icon simulating a network call to fetch more items. After all items are visible, the “view more” link disappears.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-663" data-pf-content="true" class="pf-v6-c-content--h3">With view more</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-695" data-pf-content="true" class="pf-v6-c-content--p">If you want to initially render only a certain number of menu items within a large menu, you can add a “view more” menu item with a callback passed into its <code>onClick</code> property that will render additional menu items.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-664" data-pf-content="true" class="pf-v6-c-content--p">In this example, 3 additional menu items are revealed each time the “view more” option is selected, with a loading icon simulating a network call to fetch more items. After all items are visible, the “view more” link disappears.</p>
 <astro-island uid="1nKCfC" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useRef, useState } from &#39;react&#39;;\nimport { Menu, MenuList, MenuItem, MenuContent, Spinner } from &#39;@patternfly/react-core&#39;;\n\nexport const MenuWithViewMore: React.FunctionComponent = () =&gt; {\n  const [activeItem, setActiveItem] = useState&lt;number | string&gt;(0);\n  const [isLoading, setIsLoading] = useState(false);\n  const [numOptions, setNumOptions] = useState(3);\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const [menuOptions, setMenuOptions] = useState([\n    &lt;MenuItem key={0} itemId={&#39;view-more-0&#39;}&gt;\n      Action\n    &lt;/MenuItem&gt;,\n    &lt;MenuItem\n      key={1}\n      itemId={&#39;view-more-1&#39;}\n      to=\&quot;#default-link2\&quot;\n      // just for demo so that navigation is not triggered\n      onClick={(event) =&gt; event.preventDefault()}\n    &gt;\n      Link\n    &lt;/MenuItem&gt;,\n    &lt;MenuItem key={2} itemId=\&quot;view-more-2\&quot; isDisabled&gt;\n      Disabled action\n    &lt;/MenuItem&gt;,\n    &lt;MenuItem key={3} itemId=\&quot;view-more-3\&quot; isDisabled to=\&quot;#default-link4\&quot;&gt;\n      Disabled link\n    &lt;/MenuItem&gt;,\n    &lt;MenuItem key={4} itemId=\&quot;view-more-4\&quot;&gt;\n      Action 2\n    &lt;/MenuItem&gt;,\n    &lt;MenuItem key={5} itemId=\&quot;view-more-5\&quot;&gt;\n      Action 3\n    &lt;/MenuItem&gt;,\n    &lt;MenuItem key={6} itemId=\&quot;view-more-6\&quot;&gt;\n      Action 4\n    &lt;/MenuItem&gt;,\n    &lt;MenuItem key={7} itemId=\&quot;view-more-7\&quot;&gt;\n      Action 5\n    &lt;/MenuItem&gt;,\n    &lt;MenuItem key={8} itemId=\&quot;view-more-8\&quot;&gt;\n      Final option\n    &lt;/MenuItem&gt;\n  ]);\n  const [visibleOptions, setVisibleOptions] = useState(menuOptions.slice(0, numOptions));\n\n  const activeItemRef = useRef&lt;HTMLElement&gt;(null);\n  const viewMoreRef = useRef&lt;HTMLElement&gt;(null);\n\n  useEffect(() =&gt; {\n    activeItemRef.current?.focus();\n  }, [visibleOptions]);\n\n  const onSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, itemId: number | string | undefined) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(`clicked ${itemId}`);\n    setActiveItem(itemId as string);\n  };\n\n  const simulateNetworkCall = (networkCallback: () =&gt; void) =&gt; {\n    setTimeout(networkCallback, 2000);\n  };\n\n  const getNextValidItem = (startingIndex: number, maxLength: number) =&gt; {\n    let validItem;\n    for (let i = startingIndex; i &lt; maxLength; i++) {\n      if (menuOptions[i].props.isDisabled) {\n        continue;\n      } else {\n        validItem = menuOptions[i];\n        break;\n      }\n    }\n    return validItem;\n  };\n\n  const loadMoreOptions = () =&gt; {\n    const newLength = numOptions + 3 &lt;= menuOptions.length ? numOptions + 3 : menuOptions.length;\n    const prevPosition = numOptions;\n    const nextValidItem = getNextValidItem(prevPosition, newLength);\n\n    setNumOptions(newLength);\n    setIsLoading(false);\n    setActiveItem(nextValidItem.props.itemId);\n    setVisibleOptions(menuOptions.slice(0, newLength));\n  };\n\n  const onViewMoreClick = () =&gt; {\n    setIsLoading(true);\n    simulateNetworkCall(() =&gt; {\n      loadMoreOptions();\n    });\n  };\n\n  return (\n    &lt;Menu activeItemId={activeItem} onSelect={onSelect}&gt;\n      &lt;MenuContent&gt;\n        &lt;MenuList&gt;\n          {visibleOptions.map((option) =&gt; {\n            const props = option.props;\n\n            return &lt;MenuItem key={option.key} ref={props.itemId === activeItem ? activeItemRef : null} {...props} /&gt;;\n          })}\n          {numOptions !== menuOptions.length &amp;&amp; (\n            &lt;MenuItem\n              {...(!isLoading &amp;&amp; { isLoadButton: true })}\n              {...(isLoading &amp;&amp; { isLoading: true })}\n              onClick={onViewMoreClick}\n              itemId=\&quot;loader\&quot;\n              ref={viewMoreRef}\n            &gt;\n              {isLoading ? &lt;Spinner size=\&quot;lg\&quot; /&gt; : &#39;View more&#39;}\n            &lt;/MenuItem&gt;\n          )}\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-708" data-pf-content="true" class="pf-v6-c-content--h3">With drilldown</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-709" data-pf-content="true" class="pf-v6-c-content--p">Use a drilldown menu to contain different levels of menu items. When a parent menu item (an item that has a submenu of children) is selected, the menu is replaced with the children items.</p>
-<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-753" data-pf-content="true" class="pf-v6-c-content--ul">
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-739" data-pf-content="true" class="pf-v6-c-content--li">To indicate that a menu contains a drilldown, use the <code>containsDrilldown</code> property.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-740" data-pf-content="true" class="pf-v6-c-content--li">To indicate the path of drilled-in menu item ids, use the <code>drilldownItemPath</code> property.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-741" data-pf-content="true" class="pf-v6-c-content--li">Pass in an array of drilled-in menus with the <code>drilledInMenus</code> property.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-742" data-pf-content="true" class="pf-v6-c-content--li">Use the <code>onDrillIn</code> and <code>onDrillOut</code> properties to contain callbacks for drilling into and drilling out of a submenu, respectively.</li>
-<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-743" data-pf-content="true" class="pf-v6-c-content--li">To account for updated heights as menus drill in and out of use, use the <code>onGetMenuHeight</code> property. When starting from a drilled-in state, the <code>onGetMenuHeight</code> property must define the height of the root menu.</li>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-665" data-pf-content="true" class="pf-v6-c-content--h3">With drilldown</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-666" data-pf-content="true" class="pf-v6-c-content--p">Use a drilldown menu to contain different levels of menu items. When a parent menu item (an item that has a submenu of children) is selected, the menu is replaced with the children items.</p>
+<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-710" data-pf-content="true" class="pf-v6-c-content--ul">
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-696" data-pf-content="true" class="pf-v6-c-content--li">To indicate that a menu contains a drilldown, use the <code>containsDrilldown</code> property.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-697" data-pf-content="true" class="pf-v6-c-content--li">To indicate the path of drilled-in menu item ids, use the <code>drilldownItemPath</code> property.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-698" data-pf-content="true" class="pf-v6-c-content--li">Pass in an array of drilled-in menus with the <code>drilledInMenus</code> property.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-699" data-pf-content="true" class="pf-v6-c-content--li">Use the <code>onDrillIn</code> and <code>onDrillOut</code> properties to contain callbacks for drilling into and drilling out of a submenu, respectively.</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-700" data-pf-content="true" class="pf-v6-c-content--li">To account for updated heights as menus drill in and out of use, use the <code>onGetMenuHeight</code> property. When starting from a drilled-in state, the <code>onGetMenuHeight</code> property must define the height of the root menu.</li>
 </ul>
 <astro-island uid="1dbgWF" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from &#39;@patternfly/react-core&#39;;\nimport StorageDomainIcon from &#39;@patternfly/react-icons/dist/esm/icons/storage-domain-icon&#39;;\nimport CodeBranchIcon from &#39;@patternfly/react-icons/dist/esm/icons/code-branch-icon&#39;;\nimport LayerGroupIcon from &#39;@patternfly/react-icons/dist/esm/icons/layer-group-icon&#39;;\nimport CubeIcon from &#39;@patternfly/react-icons/dist/esm/icons/cube-icon&#39;;\n\nexport const MenuWithDrilldown: React.FunctionComponent = () =&gt; {\n  const [menuDrilledIn, setMenuDrilledIn] = useState&lt;string[]&gt;([]);\n  const [drilldownPath, setDrilldownPath] = useState&lt;string[]&gt;([]);\n  const [menuHeights, setMenuHeights] = useState&lt;any&gt;({});\n  const [activeMenu, setActiveMenu] = useState&lt;string&gt;(&#39;drilldown-rootMenu&#39;);\n\n  const drillIn = (\n    _event: React.KeyboardEvent | React.MouseEvent,\n    fromMenuId: string,\n    toMenuId: string,\n    pathId: string\n  ) =&gt; {\n    setMenuDrilledIn([...menuDrilledIn, fromMenuId]);\n    setDrilldownPath([...drilldownPath, pathId]);\n    setActiveMenu(toMenuId);\n  };\n\n  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) =&gt; {\n    const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);\n    const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);\n    setMenuDrilledIn(menuDrilledInSansLast);\n    setDrilldownPath(pathSansLast);\n    setActiveMenu(toMenuId);\n  };\n\n  const setHeight = (menuId: string, height: number) =&gt; {\n    if (menuHeights[menuId] === undefined || (menuId !== &#39;drilldown-rootMenu&#39; &amp;&amp; menuHeights[menuId] !== height)) {\n      setMenuHeights({ ...menuHeights, [menuId]: height });\n    }\n  };\n\n  return (\n    &lt;Menu\n      id=\&quot;drilldown-rootMenu\&quot;\n      containsDrilldown\n      drilldownItemPath={drilldownPath}\n      drilledInMenus={menuDrilledIn}\n      activeMenu={activeMenu}\n      onDrillIn={drillIn}\n      onDrillOut={drillOut}\n      onGetMenuHeight={setHeight}\n    &gt;\n      &lt;MenuContent menuHeight={`${menuHeights[activeMenu]}px`}&gt;\n        &lt;MenuList&gt;\n          &lt;MenuItem\n            itemId=\&quot;group:start_rollout\&quot;\n            direction=\&quot;down\&quot;\n            drilldownMenu={\n              &lt;DrilldownMenu id=\&quot;drilldown-drilldownMenuStart\&quot;&gt;\n                &lt;MenuItem itemId=\&quot;group:start_rollout_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                  Start rollout\n                &lt;/MenuItem&gt;\n                &lt;Divider component=\&quot;li\&quot; /&gt;\n                &lt;MenuItem\n                  itemId=\&quot;group:app_grouping\&quot;\n                  description=\&quot;Groups A-C\&quot;\n                  direction=\&quot;down\&quot;\n                  drilldownMenu={\n                    &lt;DrilldownMenu id=\&quot;drilldown-drilldownMenuStartGrouping\&quot;&gt;\n                      &lt;MenuItem itemId=\&quot;group:app_grouping_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                        Application grouping\n                      &lt;/MenuItem&gt;\n                      &lt;Divider component=\&quot;li\&quot; /&gt;\n                      &lt;MenuItem itemId=\&quot;group_a\&quot;&gt;Group A&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;group_b\&quot;&gt;Group B&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;group_c\&quot;&gt;Group C&lt;/MenuItem&gt;\n                    &lt;/DrilldownMenu&gt;\n                  }\n                &gt;\n                  Application grouping\n                &lt;/MenuItem&gt;\n                &lt;MenuItem itemId=\&quot;count\&quot;&gt;Count&lt;/MenuItem&gt;\n                &lt;MenuItem\n                  itemId=\&quot;group:labels\&quot;\n                  direction=\&quot;down\&quot;\n                  drilldownMenu={\n                    &lt;DrilldownMenu id=\&quot;drilldown-drilldownMenuStartLabels\&quot;&gt;\n                      &lt;MenuItem itemId=\&quot;group:labels_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                        Labels\n                      &lt;/MenuItem&gt;\n                      &lt;Divider component=\&quot;li\&quot; /&gt;\n                      &lt;MenuItem itemId=\&quot;label_1\&quot;&gt;Label 1&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;label_2\&quot;&gt;Label 2&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;label_3\&quot;&gt;Label 3&lt;/MenuItem&gt;\n                    &lt;/DrilldownMenu&gt;\n                  }\n                &gt;\n                  Labels\n                &lt;/MenuItem&gt;\n                &lt;MenuItem itemId=\&quot;annotations\&quot;&gt;Annotations&lt;/MenuItem&gt;\n              &lt;/DrilldownMenu&gt;\n            }\n          &gt;\n            Start rollout\n          &lt;/MenuItem&gt;\n          &lt;MenuItem\n            itemId=\&quot;group:pause_rollout\&quot;\n            direction=\&quot;down\&quot;\n            drilldownMenu={\n              &lt;DrilldownMenu id=\&quot;drilldown-drilldownMenuPause\&quot;&gt;\n                &lt;MenuItem itemId=\&quot;group:pause_rollout_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                  Pause rollouts\n                &lt;/MenuItem&gt;\n                &lt;Divider component=\&quot;li\&quot; /&gt;\n                &lt;MenuItem\n                  itemId=\&quot;group:app_grouping\&quot;\n                  description=\&quot;Groups A-C\&quot;\n                  direction=\&quot;down\&quot;\n                  drilldownMenu={\n                    &lt;DrilldownMenu id=\&quot;drilldown-drilldownMenuGrouping\&quot;&gt;\n                      &lt;MenuItem itemId=\&quot;group:app_grouping_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                        Application grouping\n                      &lt;/MenuItem&gt;\n                      &lt;Divider component=\&quot;li\&quot; /&gt;\n                      &lt;MenuItem itemId=\&quot;group_a\&quot;&gt;Group A&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;group_b\&quot;&gt;Group B&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;group_c\&quot;&gt;Group C&lt;/MenuItem&gt;\n                    &lt;/DrilldownMenu&gt;\n                  }\n                &gt;\n                  Application grouping\n                &lt;/MenuItem&gt;\n                &lt;MenuItem itemId=\&quot;count\&quot;&gt;Count&lt;/MenuItem&gt;\n                &lt;MenuItem\n                  itemId=\&quot;group:labels\&quot;\n                  direction=\&quot;down\&quot;\n                  drilldownMenu={\n                    &lt;DrilldownMenu id=\&quot;drilldown-drilldownMenuLabels\&quot;&gt;\n                      &lt;MenuItem itemId=\&quot;group:labels_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                        Labels\n                      &lt;/MenuItem&gt;\n                      &lt;Divider component=\&quot;li\&quot; /&gt;\n                      &lt;MenuItem itemId=\&quot;label_1\&quot;&gt;Label 1&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;label_2\&quot;&gt;Label 2&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;label_3\&quot;&gt;Label 3&lt;/MenuItem&gt;\n                    &lt;/DrilldownMenu&gt;\n                  }\n                &gt;\n                  Labels\n                &lt;/MenuItem&gt;\n                &lt;MenuItem itemId=\&quot;annotations\&quot;&gt;Annotations&lt;/MenuItem&gt;\n              &lt;/DrilldownMenu&gt;\n            }\n          &gt;\n            Pause rollouts\n          &lt;/MenuItem&gt;\n          &lt;MenuItem\n            itemId=\&quot;group:storage\&quot;\n            icon={&lt;StorageDomainIcon /&gt;}\n            direction=\&quot;down\&quot;\n            drilldownMenu={\n              &lt;DrilldownMenu id=\&quot;drilldown-drilldownMenuStorage\&quot;&gt;\n                &lt;MenuItem itemId=\&quot;group:storage_breadcrumb\&quot; icon={&lt;StorageDomainIcon /&gt;} direction=\&quot;up\&quot;&gt;\n                  Add storage\n                &lt;/MenuItem&gt;\n                &lt;Divider component=\&quot;li\&quot; /&gt;\n                &lt;MenuItem icon={&lt;CodeBranchIcon /&gt;} itemId=\&quot;git\&quot;&gt;\n                  From git\n                &lt;/MenuItem&gt;\n                &lt;MenuItem icon={&lt;LayerGroupIcon /&gt;} itemId=\&quot;container\&quot;&gt;\n                  Container image\n                &lt;/MenuItem&gt;\n                &lt;MenuItem icon={&lt;CubeIcon /&gt;} itemId=\&quot;docker\&quot;&gt;\n                  Docker file\n                &lt;/MenuItem&gt;\n              &lt;/DrilldownMenu&gt;\n            }\n          &gt;\n            Add storage\n          &lt;/MenuItem&gt;\n          &lt;MenuItem itemId=\&quot;edit\&quot;&gt;Edit&lt;/MenuItem&gt;\n          &lt;MenuItem itemId=\&quot;delete_deployment\&quot;&gt;Delete deployment config&lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-710" data-pf-content="true" class="pf-v6-c-content--h3">Initially drilled-in menu</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-744" data-pf-content="true" class="pf-v6-c-content--p">To render an initially drilled-in menu, the <code>drilldownItemPath</code>, <code>drilledInMenus</code>, and <code>activeMenu</code> properties must be set to default values.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-667" data-pf-content="true" class="pf-v6-c-content--h3">Initially drilled-in menu</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-701" data-pf-content="true" class="pf-v6-c-content--p">To render an initially drilled-in menu, the <code>drilldownItemPath</code>, <code>drilledInMenus</code>, and <code>activeMenu</code> properties must be set to default values.</p>
 <astro-island uid="aap59" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from &#39;@patternfly/react-core&#39;;\nimport StorageDomainIcon from &#39;@patternfly/react-icons/dist/esm/icons/storage-domain-icon&#39;;\nimport CodeBranchIcon from &#39;@patternfly/react-icons/dist/esm/icons/code-branch-icon&#39;;\nimport LayerGroupIcon from &#39;@patternfly/react-icons/dist/esm/icons/layer-group-icon&#39;;\nimport CubeIcon from &#39;@patternfly/react-icons/dist/esm/icons/cube-icon&#39;;\n\nexport const MenuDrilldownInitialState: React.FunctionComponent = () =&gt; {\n  const [menuDrilledIn, setMenuDrilledIn] = useState&lt;string[]&gt;([\n    &#39;initial-state-rootMenu&#39;,\n    &#39;initial-state-drilldownMenuStart&#39;\n  ]);\n  const [drilldownPath, setDrilldownPath] = useState&lt;string[]&gt;([&#39;group:start_rollout&#39;, &#39;group:app_grouping&#39;]);\n  const [menuHeights, setMenuHeights] = useState&lt;any&gt;({ &#39;initial-state-rootMenu&#39;: 216 }); // The root menu height must be defined when starting from a drilled in state\n  const [activeMenu, setActiveMenu] = useState&lt;string&gt;(&#39;initial-state-drilldownMenuStartGrouping&#39;);\n\n  const drillIn = (\n    _event: React.KeyboardEvent | React.MouseEvent,\n    fromMenuId: string,\n    toMenuId: string,\n    pathId: string\n  ) =&gt; {\n    setMenuDrilledIn([...menuDrilledIn, fromMenuId]);\n    setDrilldownPath([...drilldownPath, pathId]);\n    setActiveMenu(toMenuId);\n  };\n\n  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) =&gt; {\n    const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);\n    const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);\n    setMenuDrilledIn(menuDrilledInSansLast);\n    setDrilldownPath(pathSansLast);\n    setActiveMenu(toMenuId);\n  };\n\n  const setHeight = (menuId: string, height: number) =&gt; {\n    if (menuHeights[menuId] === undefined || (menuId !== &#39;initial-state-rootMenu&#39; &amp;&amp; menuHeights[menuId] !== height)) {\n      setMenuHeights({ ...menuHeights, [menuId]: height });\n    }\n  };\n\n  return (\n    &lt;Menu\n      id=\&quot;initial-state-rootMenu\&quot;\n      containsDrilldown\n      drilldownItemPath={drilldownPath}\n      drilledInMenus={menuDrilledIn}\n      activeMenu={activeMenu}\n      onDrillIn={drillIn}\n      onDrillOut={drillOut}\n      onGetMenuHeight={setHeight}\n    &gt;\n      &lt;MenuContent menuHeight={`${menuHeights[activeMenu]}px`}&gt;\n        &lt;MenuList&gt;\n          &lt;MenuItem\n            itemId=\&quot;group:start_rollout\&quot;\n            direction=\&quot;down\&quot;\n            drilldownMenu={\n              &lt;DrilldownMenu id=\&quot;initial-state-drilldownMenuStart\&quot;&gt;\n                &lt;MenuItem itemId=\&quot;group:start_rollout_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                  Start rollout\n                &lt;/MenuItem&gt;\n                &lt;Divider component=\&quot;li\&quot; /&gt;\n                &lt;MenuItem\n                  itemId=\&quot;group:app_grouping\&quot;\n                  description=\&quot;Groups A-C\&quot;\n                  direction=\&quot;down\&quot;\n                  drilldownMenu={\n                    &lt;DrilldownMenu id=\&quot;initial-state-drilldownMenuStartGrouping\&quot;&gt;\n                      &lt;MenuItem itemId=\&quot;group:app_grouping_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                        Application grouping\n                      &lt;/MenuItem&gt;\n                      &lt;Divider component=\&quot;li\&quot; /&gt;\n                      &lt;MenuItem itemId=\&quot;group_a\&quot;&gt;Group A&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;group_b\&quot;&gt;Group B&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;group_c\&quot;&gt;Group C&lt;/MenuItem&gt;\n                    &lt;/DrilldownMenu&gt;\n                  }\n                &gt;\n                  Application grouping\n                &lt;/MenuItem&gt;\n                &lt;MenuItem itemId=\&quot;count\&quot;&gt;Count&lt;/MenuItem&gt;\n                &lt;MenuItem\n                  itemId=\&quot;group:labels\&quot;\n                  direction=\&quot;down\&quot;\n                  drilldownMenu={\n                    &lt;DrilldownMenu id=\&quot;initial-state-drilldownMenuStartLabels\&quot;&gt;\n                      &lt;MenuItem itemId=\&quot;group:labels_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                        Labels\n                      &lt;/MenuItem&gt;\n                      &lt;Divider component=\&quot;li\&quot; /&gt;\n                      &lt;MenuItem itemId=\&quot;label_1\&quot;&gt;Label 1&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;label_2\&quot;&gt;Label 2&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;label_3\&quot;&gt;Label 3&lt;/MenuItem&gt;\n                    &lt;/DrilldownMenu&gt;\n                  }\n                &gt;\n                  Labels\n                &lt;/MenuItem&gt;\n                &lt;MenuItem itemId=\&quot;annotations\&quot;&gt;Annotations&lt;/MenuItem&gt;\n              &lt;/DrilldownMenu&gt;\n            }\n          &gt;\n            Start rollout\n          &lt;/MenuItem&gt;\n          &lt;MenuItem\n            itemId=\&quot;group:pause_rollout\&quot;\n            direction=\&quot;down\&quot;\n            drilldownMenu={\n              &lt;DrilldownMenu id=\&quot;initial-state-drilldownMenuPause\&quot;&gt;\n                &lt;MenuItem itemId=\&quot;group:pause_rollout_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                  Pause rollouts\n                &lt;/MenuItem&gt;\n                &lt;Divider component=\&quot;li\&quot; /&gt;\n                &lt;MenuItem\n                  itemId=\&quot;group:app_grouping\&quot;\n                  description=\&quot;Groups A-C\&quot;\n                  direction=\&quot;down\&quot;\n                  drilldownMenu={\n                    &lt;DrilldownMenu id=\&quot;initial-state-drilldownMenuGrouping\&quot;&gt;\n                      &lt;MenuItem itemId=\&quot;group:app_grouping_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                        Application grouping\n                      &lt;/MenuItem&gt;\n                      &lt;Divider component=\&quot;li\&quot; /&gt;\n                      &lt;MenuItem itemId=\&quot;group_a\&quot;&gt;Group A&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;group_b\&quot;&gt;Group B&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;group_c\&quot;&gt;Group C&lt;/MenuItem&gt;\n                    &lt;/DrilldownMenu&gt;\n                  }\n                &gt;\n                  Application grouping\n                &lt;/MenuItem&gt;\n                &lt;MenuItem itemId=\&quot;count\&quot;&gt;Count&lt;/MenuItem&gt;\n                &lt;MenuItem\n                  itemId=\&quot;group:labels\&quot;\n                  direction=\&quot;down\&quot;\n                  drilldownMenu={\n                    &lt;DrilldownMenu id=\&quot;initial-state-drilldownMenuLabels\&quot;&gt;\n                      &lt;MenuItem itemId=\&quot;group:labels_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                        Labels\n                      &lt;/MenuItem&gt;\n                      &lt;Divider component=\&quot;li\&quot; /&gt;\n                      &lt;MenuItem itemId=\&quot;label_1\&quot;&gt;Label 1&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;label_2\&quot;&gt;Label 2&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;label_3\&quot;&gt;Label 3&lt;/MenuItem&gt;\n                    &lt;/DrilldownMenu&gt;\n                  }\n                &gt;\n                  Labels\n                &lt;/MenuItem&gt;\n                &lt;MenuItem itemId=\&quot;annotations\&quot;&gt;Annotations&lt;/MenuItem&gt;\n              &lt;/DrilldownMenu&gt;\n            }\n          &gt;\n            Pause rollouts\n          &lt;/MenuItem&gt;\n          &lt;MenuItem\n            itemId=\&quot;group:storage\&quot;\n            icon={&lt;StorageDomainIcon /&gt;}\n            direction=\&quot;down\&quot;\n            drilldownMenu={\n              &lt;DrilldownMenu id=\&quot;initial-state-drilldownMenuStorage\&quot;&gt;\n                &lt;MenuItem itemId=\&quot;group:storage_breadcrumb\&quot; icon={&lt;StorageDomainIcon /&gt;} direction=\&quot;up\&quot;&gt;\n                  Add storage\n                &lt;/MenuItem&gt;\n                &lt;Divider component=\&quot;li\&quot; /&gt;\n                &lt;MenuItem icon={&lt;CodeBranchIcon /&gt;} itemId=\&quot;git\&quot;&gt;\n                  From git\n                &lt;/MenuItem&gt;\n                &lt;MenuItem icon={&lt;LayerGroupIcon /&gt;} itemId=\&quot;container\&quot;&gt;\n                  Container image\n                &lt;/MenuItem&gt;\n                &lt;MenuItem icon={&lt;CubeIcon /&gt;} itemId=\&quot;docker\&quot;&gt;\n                  Docker file\n                &lt;/MenuItem&gt;\n              &lt;/DrilldownMenu&gt;\n            }\n          &gt;\n            Add storage\n          &lt;/MenuItem&gt;\n          &lt;MenuItem itemId=\&quot;edit\&quot;&gt;Edit&lt;/MenuItem&gt;\n          &lt;MenuItem itemId=\&quot;delete_deployment\&quot;&gt;Delete deployment config&lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-711" data-pf-content="true" class="pf-v6-c-content--h3">With drilldown - submenu functions</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-745" data-pf-content="true" class="pf-v6-c-content--p">For added flexibility with large menus, you may create a menu by passing a function to <code>drilldownMenu</code>. This approach allows you to create menu items dynamically, rather than creating everything up front.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-668" data-pf-content="true" class="pf-v6-c-content--h3">With drilldown - submenu functions</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-702" data-pf-content="true" class="pf-v6-c-content--p">For added flexibility with large menus, you may create a menu by passing a function to <code>drilldownMenu</code>. This approach allows you to create menu items dynamically, rather than creating everything up front.</p>
 <astro-island uid="ZksIVU" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from &#39;@patternfly/react-core&#39;;\nimport StorageDomainIcon from &#39;@patternfly/react-icons/dist/esm/icons/storage-domain-icon&#39;;\nimport CodeBranchIcon from &#39;@patternfly/react-icons/dist/esm/icons/code-branch-icon&#39;;\nimport LayerGroupIcon from &#39;@patternfly/react-icons/dist/esm/icons/layer-group-icon&#39;;\nimport CubeIcon from &#39;@patternfly/react-icons/dist/esm/icons/cube-icon&#39;;\n\nexport const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () =&gt; {\n  const [menuDrilledIn, setMenuDrilledIn] = useState&lt;string[]&gt;([]);\n  const [drilldownPath, setDrilldownPath] = useState&lt;string[]&gt;([]);\n  const [menuHeights, setMenuHeights] = useState&lt;any&gt;({});\n  const [activeMenu, setActiveMenu] = useState&lt;string&gt;(&#39;functions-rootMenu&#39;);\n\n  const drillIn = (\n    _event: React.KeyboardEvent | React.MouseEvent,\n    fromMenuId: string,\n    toMenuId: string,\n    pathId: string\n  ) =&gt; {\n    setMenuDrilledIn([...menuDrilledIn, fromMenuId]);\n    setDrilldownPath([...drilldownPath, pathId]);\n    setActiveMenu(toMenuId);\n  };\n\n  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) =&gt; {\n    const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);\n    const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);\n    setMenuDrilledIn(menuDrilledInSansLast);\n    setDrilldownPath(pathSansLast);\n    setActiveMenu(toMenuId);\n  };\n\n  const setHeight = (menuId: string, height: number) =&gt; {\n    if (menuHeights[menuId] === undefined || (menuId !== &#39;functions-rootMenu&#39; &amp;&amp; menuHeights[menuId] !== height)) {\n      setMenuHeights({ ...menuHeights, [menuId]: height });\n    }\n  };\n\n  return (\n    &lt;Menu\n      id=\&quot;functions-rootMenu\&quot;\n      containsDrilldown\n      drilldownItemPath={drilldownPath}\n      drilledInMenus={menuDrilledIn}\n      activeMenu={activeMenu}\n      onDrillIn={drillIn}\n      onDrillOut={drillOut}\n      onGetMenuHeight={setHeight}\n    &gt;\n      &lt;MenuContent menuHeight={`${menuHeights[activeMenu]}px`}&gt;\n        &lt;MenuList&gt;\n          &lt;MenuItem\n            itemId=\&quot;group:start_rollout\&quot;\n            direction=\&quot;down\&quot;\n            drilldownMenu={() =&gt; (\n              &lt;DrilldownMenu id=\&quot;functions-drilldownMenuStart\&quot;&gt;\n                &lt;MenuItem itemId=\&quot;group:start_rollout_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                  Start rollout\n                &lt;/MenuItem&gt;\n                &lt;Divider component=\&quot;li\&quot; /&gt;\n                &lt;MenuItem\n                  itemId=\&quot;group:app_grouping\&quot;\n                  description=\&quot;Groups A-C\&quot;\n                  direction=\&quot;down\&quot;\n                  drilldownMenu={() =&gt; (\n                    &lt;DrilldownMenu id=\&quot;functions-drilldownMenuStartGrouping\&quot;&gt;\n                      &lt;MenuItem itemId=\&quot;group:app_grouping_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                        Application grouping\n                      &lt;/MenuItem&gt;\n                      &lt;Divider component=\&quot;li\&quot; /&gt;\n                      &lt;MenuItem itemId=\&quot;group_a\&quot;&gt;Group A&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;group_b\&quot;&gt;Group B&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;group_c\&quot;&gt;Group C&lt;/MenuItem&gt;\n                    &lt;/DrilldownMenu&gt;\n                  )}\n                &gt;\n                  Application grouping\n                &lt;/MenuItem&gt;\n                &lt;MenuItem itemId=\&quot;count\&quot;&gt;Count&lt;/MenuItem&gt;\n                &lt;MenuItem\n                  itemId=\&quot;group:labels\&quot;\n                  direction=\&quot;down\&quot;\n                  drilldownMenu={() =&gt; (\n                    &lt;DrilldownMenu id=\&quot;functions-drilldownMenuStartLabels\&quot;&gt;\n                      &lt;MenuItem itemId=\&quot;group:labels_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                        Labels\n                      &lt;/MenuItem&gt;\n                      &lt;Divider component=\&quot;li\&quot; /&gt;\n                      &lt;MenuItem itemId=\&quot;label_1\&quot;&gt;Label 1&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;label_2\&quot;&gt;Label 2&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;label_3\&quot;&gt;Label 3&lt;/MenuItem&gt;\n                    &lt;/DrilldownMenu&gt;\n                  )}\n                &gt;\n                  Labels\n                &lt;/MenuItem&gt;\n                &lt;MenuItem itemId=\&quot;annotations\&quot;&gt;Annotations&lt;/MenuItem&gt;\n              &lt;/DrilldownMenu&gt;\n            )}\n          &gt;\n            Start rollout\n          &lt;/MenuItem&gt;\n          &lt;MenuItem\n            itemId=\&quot;group:pause_rollout\&quot;\n            direction=\&quot;down\&quot;\n            drilldownMenu={() =&gt; (\n              &lt;DrilldownMenu id=\&quot;functions-drilldownMenuPause\&quot;&gt;\n                &lt;MenuItem itemId=\&quot;group:pause_rollout_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                  Pause rollouts\n                &lt;/MenuItem&gt;\n                &lt;Divider component=\&quot;li\&quot; /&gt;\n                &lt;MenuItem\n                  itemId=\&quot;group:app_grouping\&quot;\n                  description=\&quot;Groups A-C\&quot;\n                  direction=\&quot;down\&quot;\n                  drilldownMenu={() =&gt; (\n                    &lt;DrilldownMenu id=\&quot;functions-drilldownMenuGrouping\&quot;&gt;\n                      &lt;MenuItem itemId=\&quot;group:app_grouping_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                        Application grouping\n                      &lt;/MenuItem&gt;\n                      &lt;Divider component=\&quot;li\&quot; /&gt;\n                      &lt;MenuItem itemId=\&quot;group_a\&quot;&gt;Group A&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;group_b\&quot;&gt;Group B&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;group_c\&quot;&gt;Group C&lt;/MenuItem&gt;\n                    &lt;/DrilldownMenu&gt;\n                  )}\n                &gt;\n                  Application grouping\n                &lt;/MenuItem&gt;\n                &lt;MenuItem itemId=\&quot;count\&quot;&gt;Count&lt;/MenuItem&gt;\n                &lt;MenuItem\n                  itemId=\&quot;group:labels\&quot;\n                  direction=\&quot;down\&quot;\n                  drilldownMenu={() =&gt; (\n                    &lt;DrilldownMenu id=\&quot;functions-drilldownMenuLabels\&quot;&gt;\n                      &lt;MenuItem itemId=\&quot;group:labels_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                        Labels\n                      &lt;/MenuItem&gt;\n                      &lt;Divider component=\&quot;li\&quot; /&gt;\n                      &lt;MenuItem itemId=\&quot;label_1\&quot;&gt;Label 1&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;label_2\&quot;&gt;Label 2&lt;/MenuItem&gt;\n                      &lt;MenuItem itemId=\&quot;label_3\&quot;&gt;Label 3&lt;/MenuItem&gt;\n                    &lt;/DrilldownMenu&gt;\n                  )}\n                &gt;\n                  Labels\n                &lt;/MenuItem&gt;\n                &lt;MenuItem itemId=\&quot;annotations\&quot;&gt;Annotations&lt;/MenuItem&gt;\n              &lt;/DrilldownMenu&gt;\n            )}\n          &gt;\n            Pause rollouts\n          &lt;/MenuItem&gt;\n          &lt;MenuItem\n            itemId=\&quot;group:storage\&quot;\n            icon={&lt;StorageDomainIcon /&gt;}\n            direction=\&quot;down\&quot;\n            drilldownMenu={() =&gt; (\n              &lt;DrilldownMenu id=\&quot;functions-drilldownMenuStorage\&quot;&gt;\n                &lt;MenuItem itemId=\&quot;group:storage_breadcrumb\&quot; icon={&lt;StorageDomainIcon /&gt;} direction=\&quot;up\&quot;&gt;\n                  Add storage\n                &lt;/MenuItem&gt;\n                &lt;Divider component=\&quot;li\&quot; /&gt;\n                &lt;MenuItem icon={&lt;CodeBranchIcon /&gt;} itemId=\&quot;git\&quot;&gt;\n                  From git\n                &lt;/MenuItem&gt;\n                &lt;MenuItem icon={&lt;LayerGroupIcon /&gt;} itemId=\&quot;container\&quot;&gt;\n                  Container image\n                &lt;/MenuItem&gt;\n                &lt;MenuItem icon={&lt;CubeIcon /&gt;} itemId=\&quot;docker\&quot;&gt;\n                  Docker file\n                &lt;/MenuItem&gt;\n              &lt;/DrilldownMenu&gt;\n            )}\n          &gt;\n            Add storage\n          &lt;/MenuItem&gt;\n          &lt;MenuItem itemId=\&quot;edit\&quot;&gt;Edit&lt;/MenuItem&gt;\n          &lt;MenuItem itemId=\&quot;delete_deployment\&quot;&gt;Delete deployment config&lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-712" data-pf-content="true" class="pf-v6-c-content--h3">With drilldown breadcrumbs</h3>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-751" data-pf-content="true" class="pf-v6-c-content--p">Use <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-713" data-pf-content="true" class="pf-v6-c-content--a">breadcrumbs</a> when a drilldown menu has more than 2 levels to offer users better navigation.</p>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-746" data-pf-content="true" class="pf-v6-c-content--p">To control the height of a menu, use the <code>maxMenuHeight</code> property. Selecting the “Set max menu height” checkbox in the following example sets the menu height to “100px” and makes the menu scrollable.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-669" data-pf-content="true" class="pf-v6-c-content--h3">With drilldown breadcrumbs</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-708" data-pf-content="true" class="pf-v6-c-content--p">Use <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-670" data-pf-content="true" class="pf-v6-c-content--a">breadcrumbs</a> when a drilldown menu has more than 2 levels to offer users better navigation.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-703" data-pf-content="true" class="pf-v6-c-content--p">To control the height of a menu, use the <code>maxMenuHeight</code> property. Selecting the “Set max menu height” checkbox in the following example sets the menu height to “100px” and makes the menu scrollable.</p>
 <astro-island uid="dtpEY" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Badge,\n  Breadcrumb,\n  BreadcrumbHeading,\n  BreadcrumbItem,\n  Checkbox,\n  Divider,\n  DrilldownMenu,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  Icon,\n  Menu,\n  MenuBreadcrumb,\n  MenuContent,\n  MenuItem,\n  MenuList,\n  MenuToggle,\n  MenuToggleElement\n} from &#39;@patternfly/react-core&#39;;\nimport StorageDomainIcon from &#39;@patternfly/react-icons/dist/esm/icons/storage-domain-icon&#39;;\nimport CodeBranchIcon from &#39;@patternfly/react-icons/dist/esm/icons/code-branch-icon&#39;;\nimport LayerGroupIcon from &#39;@patternfly/react-icons/dist/esm/icons/layer-group-icon&#39;;\nimport AngleLeftIcon from &#39;@patternfly/react-icons/dist/esm/icons/angle-left-icon&#39;;\nimport CubeIcon from &#39;@patternfly/react-icons/dist/esm/icons/cube-icon&#39;;\n\nexport const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () =&gt; {\n  const [menuDrilledIn, setMenuDrilledIn] = useState&lt;string[]&gt;([]);\n  const [drilldownPath, setDrilldownPath] = useState&lt;string[]&gt;([]);\n  const [menuHeights, setMenuHeights] = useState&lt;any&gt;({});\n  const [activeMenu, setActiveMenu] = useState&lt;string&gt;(&#39;breadcrumbs-rootMenu&#39;);\n  const [breadcrumb, setBreadcrumb] = useState&lt;React.JSX.Element | null&gt;();\n  const [withMaxMenuHeight, setWithMaxMenuHeight] = useState(false);\n\n  const onToggle = (isOpen: boolean, key: string) =&gt; {\n    switch (key) {\n      case &#39;app&#39;:\n        setBreadcrumb(appGroupingBreadcrumb(isOpen));\n        break;\n      case &#39;label&#39;:\n        setBreadcrumb(labelsBreadcrumb(isOpen));\n        break;\n      case &#39;pause-app&#39;:\n        setBreadcrumb(pauseRolloutsAppGrpBreadcrumb(isOpen));\n        break;\n      case &#39;pause-label&#39;:\n        setBreadcrumb(pauseRolloutsLabelsBreadcrumb(isOpen));\n        break;\n      default:\n        break;\n    }\n  };\n\n  const onToggleMaxMenuHeight = (checked: boolean) =&gt; {\n    setWithMaxMenuHeight(checked);\n  };\n\n  const drillOut = (\n    _event: React.KeyboardEvent&lt;Element&gt; | MouseEvent | React.MouseEvent&lt;any, MouseEvent&gt;,\n    toMenuId: string,\n    fromPathId: string,\n    breadcrumb: React.JSX.Element | null\n  ) =&gt; {\n    setMenuDrilledIn((prevMenuDrilledIn) =&gt; {\n      const indexOfMenuId = prevMenuDrilledIn.indexOf(toMenuId);\n      return prevMenuDrilledIn.slice(0, indexOfMenuId);\n    });\n    setDrilldownPath((prevDrilldownPath) =&gt; {\n      const indexOfMenuIdPath = prevDrilldownPath.indexOf(fromPathId);\n      return prevDrilldownPath.slice(0, indexOfMenuIdPath);\n    });\n    setActiveMenu(toMenuId);\n    setBreadcrumb(breadcrumb);\n  };\n\n  const setHeight = (menuId: string, height: number) =&gt; {\n    if (menuHeights[menuId] === undefined || (menuId !== &#39;breadcrumbs-rootMenu&#39; &amp;&amp; menuHeights[menuId] !== height)) {\n      setMenuHeights({ ...menuHeights, [menuId]: height });\n    }\n  };\n\n  const drillIn = (\n    _event: React.KeyboardEvent | React.MouseEvent,\n    fromMenuId: string,\n    toMenuId: string,\n    pathId: string\n  ) =&gt; {\n    setMenuDrilledIn([...menuDrilledIn, fromMenuId]);\n    setDrilldownPath([...drilldownPath, pathId]);\n    setActiveMenu(toMenuId);\n  };\n\n  const startRolloutBreadcrumb = (\n    &lt;Breadcrumb&gt;\n      &lt;BreadcrumbItem\n        component=\&quot;button\&quot;\n        onClick={(event: any) =&gt; drillOut(event, &#39;breadcrumbs-rootMenu&#39;, &#39;group:start_rollout&#39;, null)}\n      &gt;\n        Root\n      &lt;/BreadcrumbItem&gt;\n      &lt;BreadcrumbHeading component=\&quot;button\&quot;&gt;Start rollout&lt;/BreadcrumbHeading&gt;\n    &lt;/Breadcrumb&gt;\n  );\n\n  const appGroupingBreadcrumb = (isOpen: boolean) =&gt; (\n    &lt;Breadcrumb&gt;\n      &lt;BreadcrumbItem\n        component=\&quot;button\&quot;\n        onClick={(event: any) =&gt; drillOut(event, &#39;breadcrumbs-rootMenu&#39;, &#39;group:start_rollout&#39;, null)}\n      &gt;\n        Root\n      &lt;/BreadcrumbItem&gt;\n      &lt;BreadcrumbItem isDropdown&gt;\n        &lt;Dropdown\n          isOpen={isOpen}\n          onOpenChange={(isOpen: boolean) =&gt; onToggle(isOpen, &#39;app&#39;)}\n          toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n            &lt;MenuToggle\n              badge={\n                &lt;Badge isRead screenReaderText=\&quot;additional item\&quot;&gt;\n                  1\n                &lt;/Badge&gt;\n              }\n              ref={toggleRef}\n              onClick={() =&gt; onToggle(true, &#39;app&#39;)}\n              isExpanded={isOpen}\n              variant=\&quot;plainText\&quot;\n            /&gt;\n          )}\n        &gt;\n          &lt;DropdownList&gt;\n            &lt;DropdownItem\n              key=\&quot;dropdown-start\&quot;\n              icon={\n                &lt;Icon shouldMirrorRTL&gt;\n                  &lt;AngleLeftIcon /&gt;\n                &lt;/Icon&gt;\n              }\n              onClick={(event: any) =&gt;\n                drillOut(event, &#39;breadcrumbs-drilldownMenuStart&#39;, &#39;group:app_grouping_start&#39;, startRolloutBreadcrumb)\n              }\n            &gt;\n              Start rollout\n            &lt;/DropdownItem&gt;\n          &lt;/DropdownList&gt;\n        &lt;/Dropdown&gt;\n      &lt;/BreadcrumbItem&gt;\n      &lt;BreadcrumbHeading component=\&quot;button\&quot;&gt;Application Grouping&lt;/BreadcrumbHeading&gt;\n    &lt;/Breadcrumb&gt;\n  );\n\n  const labelsBreadcrumb = (isOpen: boolean) =&gt; (\n    &lt;Breadcrumb&gt;\n      &lt;BreadcrumbItem\n        component=\&quot;button\&quot;\n        onClick={(event: any) =&gt; drillOut(event, &#39;breadcrumbs-rootMenu&#39;, &#39;group:start_rollout&#39;, null)}\n      &gt;\n        Root\n      &lt;/BreadcrumbItem&gt;\n      &lt;BreadcrumbItem isDropdown&gt;\n        &lt;Dropdown\n          isOpen={isOpen}\n          onOpenChange={(isOpen: boolean) =&gt; onToggle(isOpen, &#39;label&#39;)}\n          toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n            &lt;MenuToggle\n              badge={\n                &lt;Badge isRead screenReaderText=\&quot;additional item\&quot;&gt;\n                  1\n                &lt;/Badge&gt;\n              }\n              ref={toggleRef}\n              onClick={() =&gt; onToggle(true, &#39;label&#39;)}\n              isExpanded={isOpen}\n              variant=\&quot;plainText\&quot;\n            /&gt;\n          )}\n        &gt;\n          &lt;DropdownList&gt;\n            &lt;DropdownItem\n              key=\&quot;dropdown-start\&quot;\n              icon={\n                &lt;Icon shouldMirrorRTL&gt;\n                  &lt;AngleLeftIcon /&gt;\n                &lt;/Icon&gt;\n              }\n              onClick={(event: any) =&gt;\n                drillOut(event, &#39;breadcrumbs-drilldownMenuStart&#39;, &#39;group:labels_start&#39;, startRolloutBreadcrumb)\n              }\n            &gt;\n              Start rollout\n            &lt;/DropdownItem&gt;\n          &lt;/DropdownList&gt;\n        &lt;/Dropdown&gt;\n      &lt;/BreadcrumbItem&gt;\n      &lt;BreadcrumbHeading component=\&quot;button\&quot;&gt;Labels&lt;/BreadcrumbHeading&gt;\n    &lt;/Breadcrumb&gt;\n  );\n\n  const pauseRolloutsBreadcrumb = (\n    &lt;Breadcrumb&gt;\n      &lt;BreadcrumbItem\n        component=\&quot;button\&quot;\n        onClick={(event: any) =&gt; drillOut(event, &#39;breadcrumbs-rootMenu&#39;, &#39;group:pause_rollout&#39;, null)}\n      &gt;\n        Root\n      &lt;/BreadcrumbItem&gt;\n      &lt;BreadcrumbHeading component=\&quot;button\&quot;&gt;Pause rollouts&lt;/BreadcrumbHeading&gt;\n    &lt;/Breadcrumb&gt;\n  );\n\n  const pauseRolloutsAppGrpBreadcrumb = (isOpen: boolean) =&gt; (\n    &lt;Breadcrumb&gt;\n      &lt;BreadcrumbItem\n        component=\&quot;button\&quot;\n        onClick={(event: any) =&gt; drillOut(event, &#39;breadcrumbs-rootMenu&#39;, &#39;group:pause_rollout&#39;, null)}\n      &gt;\n        Root\n      &lt;/BreadcrumbItem&gt;\n      &lt;BreadcrumbItem isDropdown&gt;\n        &lt;Dropdown\n          isOpen={isOpen}\n          onOpenChange={(isOpen: boolean) =&gt; onToggle(isOpen, &#39;pause-app&#39;)}\n          toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n            &lt;MenuToggle\n              badge={\n                &lt;Badge isRead screenReaderText=\&quot;additional item\&quot;&gt;\n                  1\n                &lt;/Badge&gt;\n              }\n              ref={toggleRef}\n              onClick={() =&gt; onToggle(true, &#39;pause-app&#39;)}\n              isExpanded={isOpen}\n              variant=\&quot;plainText\&quot;\n            /&gt;\n          )}\n        &gt;\n          &lt;DropdownList&gt;\n            &lt;DropdownItem\n              key=\&quot;dropdown-pause\&quot;\n              icon={\n                &lt;Icon shouldMirrorRTL&gt;\n                  &lt;AngleLeftIcon /&gt;\n                &lt;/Icon&gt;\n              }\n              onClick={(event: any) =&gt;\n                drillOut(event, &#39;breadcrumbs-drilldownMenuPause&#39;, &#39;group:app_grouping&#39;, pauseRolloutsBreadcrumb)\n              }\n            &gt;\n              Pause rollouts\n            &lt;/DropdownItem&gt;\n          &lt;/DropdownList&gt;\n        &lt;/Dropdown&gt;\n      &lt;/BreadcrumbItem&gt;\n      &lt;BreadcrumbHeading component=\&quot;button\&quot;&gt;Application Grouping&lt;/BreadcrumbHeading&gt;\n    &lt;/Breadcrumb&gt;\n  );\n\n  const pauseRolloutsLabelsBreadcrumb = (isOpen: boolean) =&gt; (\n    &lt;Breadcrumb&gt;\n      &lt;BreadcrumbItem\n        component=\&quot;button\&quot;\n        onClick={(event: any) =&gt; drillOut(event, &#39;breadcrumbs-rootMenu&#39;, &#39;group:pause_rollout&#39;, null)}\n      &gt;\n        Root\n      &lt;/BreadcrumbItem&gt;\n      &lt;BreadcrumbItem isDropdown&gt;\n        &lt;Dropdown\n          isOpen={isOpen}\n          onOpenChange={(isOpen: boolean) =&gt; onToggle(isOpen, &#39;pause-label&#39;)}\n          toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n            &lt;MenuToggle\n              badge={\n                &lt;Badge isRead screenReaderText=\&quot;additional item\&quot;&gt;\n                  1\n                &lt;/Badge&gt;\n              }\n              ref={toggleRef}\n              onClick={() =&gt; onToggle(true, &#39;pause-label&#39;)}\n              isExpanded={isOpen}\n              variant=\&quot;plainText\&quot;\n            /&gt;\n          )}\n        &gt;\n          &lt;DropdownList&gt;\n            &lt;DropdownItem\n              key=\&quot;dropdown-pause\&quot;\n              icon={\n                &lt;Icon shouldMirrorRTL&gt;\n                  &lt;AngleLeftIcon /&gt;\n                &lt;/Icon&gt;\n              }\n              onClick={(event: any) =&gt;\n                drillOut(event, &#39;breadcrumbs-drilldownMenuPause&#39;, &#39;group:labels&#39;, pauseRolloutsBreadcrumb)\n              }\n            &gt;\n              Pause rollouts\n            &lt;/DropdownItem&gt;\n          &lt;/DropdownList&gt;\n        &lt;/Dropdown&gt;\n      &lt;/BreadcrumbItem&gt;\n      &lt;BreadcrumbHeading component=\&quot;button\&quot;&gt;Labels&lt;/BreadcrumbHeading&gt;\n    &lt;/Breadcrumb&gt;\n  );\n\n  const addStorageBreadcrumb = (\n    &lt;Breadcrumb&gt;\n      &lt;BreadcrumbItem\n        component=\&quot;button\&quot;\n        onClick={(event: any) =&gt; drillOut(event, &#39;breadcrumbs-rootMenu&#39;, &#39;group:storage&#39;, null)}\n      &gt;\n        Root\n      &lt;/BreadcrumbItem&gt;\n      &lt;BreadcrumbHeading component=\&quot;button\&quot;&gt;Add storage&lt;/BreadcrumbHeading&gt;\n    &lt;/Breadcrumb&gt;\n  );\n\n  return (\n    &lt;&gt;\n      &lt;Checkbox\n        label=\&quot;Set max menu height\&quot;\n        isChecked={withMaxMenuHeight}\n        onChange={(_event, checked) =&gt; onToggleMaxMenuHeight(checked)}\n        aria-label=\&quot;Set max menu height checkbox\&quot;\n        id=\&quot;toggle-max-menu-height\&quot;\n        name=\&quot;toggle-max-menu-height\&quot;\n      /&gt;\n      &lt;br /&gt;\n      &lt;Menu\n        id=\&quot;breadcrumbs-rootMenu\&quot;\n        containsDrilldown\n        drilldownItemPath={drilldownPath}\n        drilledInMenus={menuDrilledIn}\n        activeMenu={activeMenu}\n        onDrillIn={drillIn}\n        onDrillOut={() =&gt; drillOut}\n        onGetMenuHeight={setHeight}\n        isScrollable={withMaxMenuHeight}\n      &gt;\n        {breadcrumb &amp;&amp; (\n          &lt;&gt;\n            &lt;MenuBreadcrumb&gt;{breadcrumb}&lt;/MenuBreadcrumb&gt;\n            &lt;Divider /&gt;\n          &lt;/&gt;\n        )}\n        &lt;MenuContent menuHeight={`${menuHeights[activeMenu]}px`} maxMenuHeight={withMaxMenuHeight ? &#39;100px&#39; : &#39;auto&#39;}&gt;\n          &lt;MenuList&gt;\n            &lt;MenuItem\n              itemId=\&quot;group:start_rollout\&quot;\n              direction=\&quot;down\&quot;\n              onClick={() =&gt; setBreadcrumb(startRolloutBreadcrumb)}\n              drilldownMenu={\n                &lt;DrilldownMenu id=\&quot;breadcrumbs-drilldownMenuStart\&quot;&gt;\n                  &lt;MenuItem\n                    itemId=\&quot;group:app_grouping_start\&quot;\n                    description=\&quot;Groups A-G\&quot;\n                    direction=\&quot;down\&quot;\n                    onClick={() =&gt; setBreadcrumb(appGroupingBreadcrumb(false))}\n                    drilldownMenu={\n                      &lt;DrilldownMenu id=\&quot;breadcrumbs-drilldownMenuStartGrouping\&quot;&gt;\n                        &lt;MenuItem itemId=\&quot;group_a\&quot;&gt;Group A (start rollout)&lt;/MenuItem&gt;\n                        &lt;MenuItem itemId=\&quot;group_b\&quot;&gt;Group B (start rollout)&lt;/MenuItem&gt;\n                        &lt;MenuItem itemId=\&quot;group_c\&quot;&gt;Group C (start rollout)&lt;/MenuItem&gt;\n                        &lt;MenuItem itemId=\&quot;group_d\&quot;&gt;Group D (start rollout)&lt;/MenuItem&gt;\n                        &lt;MenuItem itemId=\&quot;group_e\&quot;&gt;Group E (start rollout)&lt;/MenuItem&gt;\n                        &lt;MenuItem itemId=\&quot;group_f\&quot;&gt;Group F (start rollout)&lt;/MenuItem&gt;\n                        &lt;MenuItem itemId=\&quot;group_g\&quot;&gt;Group G (start rollout)&lt;/MenuItem&gt;\n                      &lt;/DrilldownMenu&gt;\n                    }\n                  &gt;\n                    Application grouping (start rollout)\n                  &lt;/MenuItem&gt;\n                  &lt;MenuItem itemId=\&quot;count\&quot;&gt;Count (start rollout)&lt;/MenuItem&gt;\n                  &lt;MenuItem\n                    itemId=\&quot;group:labels_start\&quot;\n                    direction=\&quot;down\&quot;\n                    onClick={() =&gt; setBreadcrumb(labelsBreadcrumb(false))}\n                    drilldownMenu={\n                      &lt;DrilldownMenu id=\&quot;breadcrumbs-drilldownMenuStartLabels\&quot;&gt;\n                        &lt;MenuItem itemId=\&quot;label_1\&quot;&gt;Label 1 (start rollout)&lt;/MenuItem&gt;\n                        &lt;MenuItem itemId=\&quot;label_2\&quot;&gt;Label 2 (start rollout)&lt;/MenuItem&gt;\n                        &lt;MenuItem itemId=\&quot;label_3\&quot;&gt;Label 3 (start rollout)&lt;/MenuItem&gt;\n                      &lt;/DrilldownMenu&gt;\n                    }\n                  &gt;\n                    Labels (start rollout)\n                  &lt;/MenuItem&gt;\n                  &lt;MenuItem itemId=\&quot;annotations\&quot;&gt;Annotations (start rollout)&lt;/MenuItem&gt;\n                &lt;/DrilldownMenu&gt;\n              }\n            &gt;\n              Start rollout\n            &lt;/MenuItem&gt;\n            &lt;MenuItem\n              itemId=\&quot;group:pause_rollout\&quot;\n              direction=\&quot;down\&quot;\n              onClick={() =&gt; setBreadcrumb(pauseRolloutsBreadcrumb)}\n              drilldownMenu={\n                &lt;DrilldownMenu id=\&quot;breadcrumbs-drilldownMenuPause\&quot;&gt;\n                  &lt;MenuItem\n                    itemId=\&quot;group:app_grouping\&quot;\n                    description=\&quot;Groups A-C\&quot;\n                    direction=\&quot;down\&quot;\n                    onClick={() =&gt; setBreadcrumb(pauseRolloutsAppGrpBreadcrumb(false))}\n                    drilldownMenu={\n                      &lt;DrilldownMenu id=\&quot;breadcrumbs-drilldownMenuGrouping\&quot;&gt;\n                        &lt;MenuItem itemId=\&quot;group_a\&quot;&gt;Group A (pause rollouts)&lt;/MenuItem&gt;\n                        &lt;MenuItem itemId=\&quot;group_b\&quot;&gt;Group B (pause rollouts)&lt;/MenuItem&gt;\n                        &lt;MenuItem itemId=\&quot;group_c\&quot;&gt;Group C (pause rollouts)&lt;/MenuItem&gt;\n                      &lt;/DrilldownMenu&gt;\n                    }\n                  &gt;\n                    Application grouping (pause rollouts)\n                  &lt;/MenuItem&gt;\n                  &lt;MenuItem itemId=\&quot;count\&quot;&gt;Count (pause rollouts)&lt;/MenuItem&gt;\n                  &lt;MenuItem\n                    itemId=\&quot;group:labels\&quot;\n                    direction=\&quot;down\&quot;\n                    onClick={() =&gt; setBreadcrumb(pauseRolloutsLabelsBreadcrumb(false))}\n                    drilldownMenu={\n                      &lt;DrilldownMenu id=\&quot;breadcrumbs-drilldownMenuLabels\&quot;&gt;\n                        &lt;MenuItem itemId=\&quot;label_1\&quot;&gt;Label 1 (pause rollouts)&lt;/MenuItem&gt;\n                        &lt;MenuItem itemId=\&quot;label_2\&quot;&gt;Label 2 (pause rollouts)&lt;/MenuItem&gt;\n                        &lt;MenuItem itemId=\&quot;label_3\&quot;&gt;Label 3 (pause rollouts)&lt;/MenuItem&gt;\n                      &lt;/DrilldownMenu&gt;\n                    }\n                  &gt;\n                    Labels (pause rollouts)\n                  &lt;/MenuItem&gt;\n                  &lt;MenuItem itemId=\&quot;annotations\&quot;&gt;Annotations (pause rollouts)&lt;/MenuItem&gt;\n                &lt;/DrilldownMenu&gt;\n              }\n            &gt;\n              Pause rollouts\n            &lt;/MenuItem&gt;\n            &lt;MenuItem\n              itemId=\&quot;group:storage\&quot;\n              icon={&lt;StorageDomainIcon /&gt;}\n              direction=\&quot;down\&quot;\n              onClick={() =&gt; setBreadcrumb(addStorageBreadcrumb)}\n              drilldownMenu={\n                &lt;DrilldownMenu id=\&quot;breadcrumbs-drilldownMenuStorage\&quot;&gt;\n                  &lt;MenuItem icon={&lt;CodeBranchIcon /&gt;} itemId=\&quot;git\&quot;&gt;\n                    From git\n                  &lt;/MenuItem&gt;\n                  &lt;MenuItem icon={&lt;LayerGroupIcon /&gt;} itemId=\&quot;container\&quot;&gt;\n                    Container image\n                  &lt;/MenuItem&gt;\n                  &lt;MenuItem icon={&lt;CubeIcon /&gt;} itemId=\&quot;docker\&quot;&gt;\n                    Docker file\n                  &lt;/MenuItem&gt;\n                &lt;/DrilldownMenu&gt;\n              }\n            &gt;\n              Add storage\n            &lt;/MenuItem&gt;\n            &lt;MenuItem itemId=\&quot;edit\&quot;&gt;Edit&lt;/MenuItem&gt;\n            &lt;MenuItem itemId=\&quot;delete_deployment\&quot;&gt;Delete deployment config&lt;/MenuItem&gt;\n          &lt;/MenuList&gt;\n        &lt;/MenuContent&gt;\n      &lt;/Menu&gt;\n    &lt;/&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-714" data-pf-content="true" class="pf-v6-c-content--h3">With drilldown and inline filter</h3>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-671" data-pf-content="true" class="pf-v6-c-content--h3">With drilldown and inline filter</h3>
 <astro-island uid="Z2hgeTM" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { createRef, useState } from &#39;react&#39;;\nimport {\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  Divider,\n  DrilldownMenu,\n  MenuSearch,\n  MenuSearchInput,\n  SearchInput\n} from &#39;@patternfly/react-core&#39;;\n\nexport const MenuWithDrilldown: React.FunctionComponent = () =&gt; {\n  const [menuDrilledIn, setMenuDrilledIn] = useState&lt;string[]&gt;([]);\n  const [drilldownPath, setDrilldownPath] = useState&lt;string[]&gt;([]);\n  const [menuHeights, setMenuHeights] = useState&lt;any&gt;({});\n  const [activeMenu, setActiveMenu] = useState&lt;string&gt;(&#39;filter_drilldown-rootMenu&#39;);\n\n  const drillIn = (\n    _event: React.KeyboardEvent | React.MouseEvent,\n    fromMenuId: string,\n    toMenuId: string,\n    pathId: string\n  ) =&gt; {\n    setMenuDrilledIn([...menuDrilledIn, fromMenuId]);\n    setDrilldownPath([...drilldownPath, pathId]);\n    setActiveMenu(toMenuId);\n  };\n\n  const drillOut = (_event: React.KeyboardEvent | React.MouseEvent, toMenuId: string) =&gt; {\n    const menuDrilledInSansLast = menuDrilledIn.slice(0, menuDrilledIn.length - 1);\n    const pathSansLast = drilldownPath.slice(0, drilldownPath.length - 1);\n    setMenuDrilledIn(menuDrilledInSansLast);\n    setDrilldownPath(pathSansLast);\n    setActiveMenu(toMenuId);\n  };\n\n  const setHeight = (menuId: string, height: number) =&gt; {\n    if (\n      menuHeights[menuId] === undefined ||\n      (menuId !== &#39;filter_drilldown-rootMenu&#39; &amp;&amp; menuHeights[menuId] !== height)\n    ) {\n      setMenuHeights({ ...menuHeights, [menuId]: height });\n    }\n  };\n\n  const searchRef = createRef&lt;HTMLInputElement&gt;();\n  const [startInput, setStartInput] = useState(&#39;&#39;);\n\n  const handleStartTextInputChange = (value: string) =&gt; {\n    setStartInput(value);\n    searchRef?.current?.focus();\n  };\n\n  const startDrillItems = [\n    {\n      item: &#39;Application grouping&#39;,\n      rest: { description: &#39;Description text&#39; }\n    },\n    { item: &#39;Labels&#39; },\n    { item: &#39;Annotations&#39; },\n    { item: &#39;Count&#39; },\n    { item: &#39;Count 2&#39; },\n    { item: &#39;Count 3&#39; },\n    { item: &#39;Other&#39; }\n  ];\n\n  const mapped = startDrillItems\n    .filter((opt) =&gt; !startInput || opt.item.toLowerCase().includes(startInput.toString().toLowerCase()))\n    .map((opt, index) =&gt; (\n      &lt;MenuItem key={opt.item} itemId={index} {...opt.rest}&gt;\n        {opt.item}\n      &lt;/MenuItem&gt;\n    ));\n  if (startInput &amp;&amp; mapped.length === 0) {\n    mapped.push(\n      &lt;MenuItem isDisabled key=\&quot;no result\&quot;&gt;\n        No results found\n      &lt;/MenuItem&gt;\n    );\n  }\n\n  return (\n    &lt;Menu\n      id=\&quot;filter_drilldown-rootMenu\&quot;\n      containsDrilldown\n      drilldownItemPath={drilldownPath}\n      drilledInMenus={menuDrilledIn}\n      activeMenu={activeMenu}\n      onDrillIn={drillIn}\n      onDrillOut={drillOut}\n      onGetMenuHeight={setHeight}\n    &gt;\n      &lt;MenuContent menuHeight={`${menuHeights[activeMenu]}px`}&gt;\n        &lt;MenuList&gt;\n          &lt;MenuItem\n            itemId=\&quot;filter_group:start_rollout\&quot;\n            direction=\&quot;down\&quot;\n            drilldownMenu={\n              &lt;DrilldownMenu id=\&quot;filter_drilldown-drilldownMenuStart\&quot;&gt;\n                &lt;MenuItem itemId=\&quot;filter_group:start_rollout_breadcrumb\&quot; direction=\&quot;up\&quot;&gt;\n                  Start rollout\n                &lt;/MenuItem&gt;\n                &lt;Divider component=\&quot;li\&quot; /&gt;\n                &lt;MenuSearch&gt;\n                  &lt;MenuSearchInput&gt;\n                    &lt;SearchInput\n                      ref={searchRef}\n                      value={startInput}\n                      aria-label=\&quot;Filter menu items\&quot;\n                      onChange={(_event, value) =&gt; handleStartTextInputChange(value)}\n                    /&gt;\n                  &lt;/MenuSearchInput&gt;\n                &lt;/MenuSearch&gt;\n                &lt;Divider component=\&quot;li\&quot; /&gt;\n                {mapped}\n              &lt;/DrilldownMenu&gt;\n            }\n          &gt;\n            Start rollout\n          &lt;/MenuItem&gt;\n          &lt;MenuItem itemId=\&quot;item-a\&quot;&gt;Item B&lt;/MenuItem&gt;\n          &lt;MenuItem itemId=\&quot;item-b\&quot;&gt;Item C&lt;/MenuItem&gt;\n          &lt;MenuItem itemId=\&quot;item-c\&quot;&gt;Item D&lt;/MenuItem&gt;\n        &lt;/MenuList&gt;\n      &lt;/MenuContent&gt;\n    &lt;/Menu&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
-<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-715" data-pf-content="true" class="pf-v6-c-content--h2">Using router links</h2>
-<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-747" data-pf-content="true" class="pf-v6-c-content--p">Router links can be used for in-app linking in React environments to prevent page reloading. To use a <code>Link</code> component from a router package, you can pass a callback to the <code>component</code> property of the <code>MenuItem</code>:</p>
-<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-748" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span>&lt;MenuItem</span></span>
+<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-672" data-pf-content="true" class="pf-v6-c-content--h2">Using router links</h2>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-704" data-pf-content="true" class="pf-v6-c-content--p">Router links can be used for in-app linking in React environments to prevent page reloading. To use a <code>Link</code> component from a router package, you can pass a callback to the <code>component</code> property of the <code>MenuItem</code>:</p>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-705" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span>&lt;MenuItem</span></span>
 <span class="line"><span>  component={(props) =&gt; &lt;Link {...props} to=&quot;#&quot; /&gt;}</span></span>
 <span class="line"><span>&gt;</span></span>
 <span class="line"><span>  {...Link Content}</span></span>
-<span class="line"><span>&lt;/MenuItem&gt;</span></span></code></pre> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z1jwtvC" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Menu&quot;],[0,&quot;MenuList&quot;],[0,&quot;MenuItem&quot;],[0,&quot;MenuItemAction&quot;],[0,&quot;MenuContent&quot;],[0,&quot;MenuSearch&quot;],[0,&quot;MenuSearchInput&quot;],[0,&quot;MenuGroup&quot;],[0,&quot;MenuContainer&quot;],[0,&quot;MenuPopperProps&quot;],[0,&quot;TooltipProps&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/menu/react/&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><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-686" 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>
+<span class="line"><span>&lt;/MenuItem&gt;</span></span></code></pre> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z1jwtvC" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Menu&quot;],[0,&quot;MenuList&quot;],[0,&quot;MenuItem&quot;],[0,&quot;MenuItemAction&quot;],[0,&quot;MenuContent&quot;],[0,&quot;MenuSearch&quot;],[0,&quot;MenuSearchInput&quot;],[0,&quot;MenuGroup&quot;],[0,&quot;MenuContainer&quot;],[0,&quot;MenuPopperProps&quot;],[0,&quot;TooltipProps&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/menu/react/&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><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-643" 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>
 CSS variables
 </h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="10lBQB" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,false],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-menu&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;CSSTableComponent&quot;,&quot;value&quot;:&quot;react&quot;}"></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>