npm - newskit - Versions diffs - 5.4.3 → 5.4.4 - Mend

newskit 5.4.3 → 5.4.4

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 (122) hide show

package/public/components/menu/index.html CHANGED Viewed

@@ -6,7 +6,7 @@
             body {
               margin: 0;
             }
-            </style><script data-react-helmet="true" type="text/javascript">window._sp_ = {"config":{"accountId":259,"propertyHref":"https://newskit.co.uk","baseEndpoint":"https://cdn.privacy-mgmt.com"}}</script><script data-react-helmet="true" type="text/javascript" src="https://cdn.privacy-mgmt.com/messagingNoTcfApi.js" async=""></script><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" type="image/x-icon" href="static/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="192x192" href="static/android-chrome-192x192.png"/><link rel="manifest" href="static/site.webmanifest"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="msapplication-square150x150logo" content="mstile-150x150.png"/><meta name="theme-color" content="#ffffff"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-c0cad99bf97088e2.js" defer=""></script><script src="/_next/static/chunks/framework-a1dc26d0ae5e7407.js" defer=""></script><script src="/_next/static/chunks/main-ea11f884a96185e4.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b9df849172598dfa.js" defer=""></script><script src="/_next/static/chunks/2ebec9a3-c51e9946115f3de3.js" defer=""></script><script src="/_next/static/chunks/2365afd3-2dcc650597ed5bea.js" defer=""></script><script src="/_next/static/chunks/61519-78f3aa2a16269f79.js" defer=""></script><script src="/_next/static/chunks/97475-a4abd0f30d3e91f5.js" defer=""></script><script src="/_next/static/chunks/51863-2bfb71df42da8833.js" defer=""></script><script src="/_next/static/chunks/58760-80709d0c225631ef.js" defer=""></script><script src="/_next/static/chunks/39471-ccf0d27bcb507ab7.js" defer=""></script><script src="/_next/static/chunks/83762-cf7a34852c935d16.js" defer=""></script><script src="/_next/static/chunks/92206-0a9a59fef6e96a54.js" defer=""></script><script src="/_next/static/chunks/27107-b360fbe4fb7271f4.js" defer=""></script><script src="/_next/static/chunks/52526-76b534ca87453a1a.js" defer=""></script><script src="/_next/static/chunks/41873-fd01213764af92b8.js" defer=""></script><script src="/_next/static/chunks/91904-5c5a44f4ef2735b3.js" defer=""></script><script src="/_next/static/chunks/86062-655c47ed5b066704.js" defer=""></script><script src="/_next/static/chunks/pages/components/menu-cb331c3a279d403b.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_buildManifest.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_ssgManifest.js" defer=""></script><script src="/_next/static/4eEzQdZEpSITC7CcT92PH/_middlewareManifest.js" defer=""></script></head><body><style data-emotion="css-global goexhq">html{scroll-behavior:smooth;scroll-padding-top:90px;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-regular-webfont.woff2') format('woff2'),url('static/fonts/dmsans-regular-webfont.woff') format('woff');font-style:normal;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-italic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-italic-webfont.woff') format('woff');font-style:italic;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-medium-webfont.woff2') format('woff2'),url('static/fonts/dmsans-medium-webfont.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-mediumitalic-webfont.woff') format('woff');font-style:italic;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bold-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bold-webfont.woff') format('woff');font-style:normal;font-weight:700;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bolditalic-webfont.woff') format('woff');font-style:italic;font-weight:700;font-display:swap;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bold-webfont.woff2') format('woff2'),url('static/fonts/poppins-bold-webfont.woff') format('woff');font-weight:700;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-bolditalic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabold-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabold-webfont.woff') format('woff');font-weight:800;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabolditalic-webfont.woff') format('woff');font-weight:800;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-italic-webfont.woff2') format('woff2'),url('static/fonts/poppins-italic-webfont.woff') format('woff');font-weight:400;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-light-webfont.woff2') format('woff2'),url('static/fonts/poppins-light-webfont.woff') format('woff');font-weight:300;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-lightitalic-webfont.woff') format('woff');font-weight:300;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-medium-webfont.woff2') format('woff2'),url('static/fonts/poppins-medium-webfont.woff') format('woff');font-weight:500;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-mediumitalic-webfont.woff') format('woff');font-weight:500;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-regular-webfont.woff2') format('woff2'),url('static/fonts/poppins-regular-webfont.woff') format('woff');font-weight:400;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibold-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibold-webfont.woff') format('woff');font-weight:600;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibolditalic-webfont.woff') format('woff');font-weight:600;font-style:italic;}@font-face{font-family:'DM Mono';src:url('static/fonts/dmmono-medium.woff2') format('woff2'),url('static/fonts/dmmono-medium.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}</style><script type="text/javascript">(function(a,b,c,d){
+            </style><script data-react-helmet="true" type="text/javascript">window._sp_ = {"config":{"accountId":259,"propertyHref":"https://newskit.co.uk","baseEndpoint":"https://cdn.privacy-mgmt.com"}}</script><script data-react-helmet="true" type="text/javascript" src="https://cdn.privacy-mgmt.com/messagingNoTcfApi.js" async=""></script><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" type="image/x-icon" href="static/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="static/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="16x16" href="static/favicon-16x16.png"/><link rel="icon" type="image/png" sizes="32x32" href="static/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="192x192" href="static/android-chrome-192x192.png"/><link rel="manifest" href="static/site.webmanifest"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="msapplication-square150x150logo" content="mstile-150x150.png"/><meta name="theme-color" content="#ffffff"/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-c0cad99bf97088e2.js" defer=""></script><script src="/_next/static/chunks/framework-a1dc26d0ae5e7407.js" defer=""></script><script src="/_next/static/chunks/main-ea11f884a96185e4.js" defer=""></script><script src="/_next/static/chunks/pages/_app-b9df849172598dfa.js" defer=""></script><script src="/_next/static/chunks/2ebec9a3-c51e9946115f3de3.js" defer=""></script><script src="/_next/static/chunks/2365afd3-2dcc650597ed5bea.js" defer=""></script><script src="/_next/static/chunks/61519-78f3aa2a16269f79.js" defer=""></script><script src="/_next/static/chunks/97475-a4abd0f30d3e91f5.js" defer=""></script><script src="/_next/static/chunks/51863-d9a28ce188f9fa84.js" defer=""></script><script src="/_next/static/chunks/58760-80709d0c225631ef.js" defer=""></script><script src="/_next/static/chunks/39471-ccf0d27bcb507ab7.js" defer=""></script><script src="/_next/static/chunks/83762-cf7a34852c935d16.js" defer=""></script><script src="/_next/static/chunks/92206-0a9a59fef6e96a54.js" defer=""></script><script src="/_next/static/chunks/27107-b360fbe4fb7271f4.js" defer=""></script><script src="/_next/static/chunks/52526-76b534ca87453a1a.js" defer=""></script><script src="/_next/static/chunks/41873-fd01213764af92b8.js" defer=""></script><script src="/_next/static/chunks/91904-5c5a44f4ef2735b3.js" defer=""></script><script src="/_next/static/chunks/86062-5337d9895699f119.js" defer=""></script><script src="/_next/static/chunks/pages/components/menu-cb331c3a279d403b.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_buildManifest.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_ssgManifest.js" defer=""></script><script src="/_next/static/16aAekWqHChB9xZCUOXJs/_middlewareManifest.js" defer=""></script></head><body><style data-emotion="css-global goexhq">html{scroll-behavior:smooth;scroll-padding-top:90px;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-regular-webfont.woff2') format('woff2'),url('static/fonts/dmsans-regular-webfont.woff') format('woff');font-style:normal;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-italic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-italic-webfont.woff') format('woff');font-style:italic;font-weight:400;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-medium-webfont.woff2') format('woff2'),url('static/fonts/dmsans-medium-webfont.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-mediumitalic-webfont.woff') format('woff');font-style:italic;font-weight:500;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bold-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bold-webfont.woff') format('woff');font-style:normal;font-weight:700;font-display:swap;}@font-face{font-family:'DM Sans';src:url('static/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/dmsans-bolditalic-webfont.woff') format('woff');font-style:italic;font-weight:700;font-display:swap;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bold-webfont.woff2') format('woff2'),url('static/fonts/poppins-bold-webfont.woff') format('woff');font-weight:700;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-bolditalic-webfont.woff') format('woff');font-weight:normal;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabold-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabold-webfont.woff') format('woff');font-weight:800;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-extrabolditalic-webfont.woff') format('woff');font-weight:800;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-italic-webfont.woff2') format('woff2'),url('static/fonts/poppins-italic-webfont.woff') format('woff');font-weight:400;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-light-webfont.woff2') format('woff2'),url('static/fonts/poppins-light-webfont.woff') format('woff');font-weight:300;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-lightitalic-webfont.woff') format('woff');font-weight:300;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-medium-webfont.woff2') format('woff2'),url('static/fonts/poppins-medium-webfont.woff') format('woff');font-weight:500;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-mediumitalic-webfont.woff') format('woff');font-weight:500;font-style:italic;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-regular-webfont.woff2') format('woff2'),url('static/fonts/poppins-regular-webfont.woff') format('woff');font-weight:400;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibold-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibold-webfont.woff') format('woff');font-weight:600;font-style:normal;}@font-face{font-family:'Poppins';src:url('static/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),url('static/fonts/poppins-semibolditalic-webfont.woff') format('woff');font-weight:600;font-style:italic;}@font-face{font-family:'DM Mono';src:url('static/fonts/dmmono-medium.woff2') format('woff2'),url('static/fonts/dmmono-medium.woff') format('woff');font-style:normal;font-weight:500;font-display:swap;}</style><script type="text/javascript">(function(a,b,c,d){
               a='//tags.tiqcdn.com/utag/newsinternational/thetimes.newskit/dev/utag.js';
               b=document;
               c='script';
@@ -39,11 +39,11 @@
               }
               a = b.getElementsByTagName(c)[0];
               a.parentNode.insertBefore(d, a);
-            })();</script><div id="__next" data-reactroot=""><style data-emotion="css 1wzcknb">.css-1wzcknb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:100%;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}</style><div class="css-1wzcknb"><style data-emotion="css 1npm8fs">.css-1npm8fs{width:276px;padding-left:24px;padding-right:24px;position:fixed;overflow:auto;bottom:0;top:0;left:0;z-index:3;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 300ms;transition:transform 300ms;margin-top:64px;background-color:#F4F4F4;border-style:solid;border-color:#E4E4E4;border-width:0 1px 0 0;}@media screen and (min-width: 1024px){.css-1npm8fs{margin-top:80px;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);overflow:hidden;}.css-1npm8fs:hover{overflow:auto;}}@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2){.css-1npm8fs{overflow:auto;}}</style><div data-testid="sidebar" role="complementary" class="css-1npm8fs"><style data-emotion="css 1975ixv">.css-1975ixv{padding:48px;}</style><div class="css-1975ixv"><style data-emotion="css 1xvxlxw">@media screen{.css-1xvxlxw{display:block;}}@media screen and (min-width: 480px){.css-1xvxlxw{display:block;}}@media screen and (min-width: 768px){.css-1xvxlxw{display:block;}}@media screen and (min-width: 1024px){.css-1xvxlxw{display:none;}}@media screen and (min-width: 1440px){.css-1xvxlxw{display:none;}}</style><div class="css-1xvxlxw"><style data-emotion="css uinsfl">.css-uinsfl{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-uinsfl"><style data-emotion="css su8d3y">.css-su8d3y{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}</style><div tabindex="0" data-testid="close-icon" class="css-su8d3y"><style data-emotion="css 1cpsn4a">.css-1cpsn4a{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1cpsn4a{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1cpsn4a{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1cpsn4a.css-1cpsn4a{width:16px;height:16px;fill:#2E2E2E;}@media screen and (prefers-reduced-motion: no-preference){.css-1cpsn4a.css-1cpsn4a{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1cpsn4a.css-1cpsn4a{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><style data-emotion="css h4sfgt-EmotionIconBase">.css-h4sfgt-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-h4sfgt-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-h4sfgt-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-h4sfgt-EmotionIconBase.css-h4sfgt-EmotionIconBase{width:16px;height:16px;fill:#2E2E2E;}@media screen and (prefers-reduced-motion: no-preference){.css-h4sfgt-EmotionIconBase.css-h4sfgt-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-h4sfgt-EmotionIconBase.css-h4sfgt-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-h4sfgt-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg></div></div></div></div><style data-emotion="css kpgnf7">.css-kpgnf7{font-family:"DM Sans",sans-serif;font-size:16px;line-height:1.5;font-weight:400;letter-spacing:0;}</style><nav role="navigation" aria-label="Sidebar" class="css-kpgnf7"><style data-emotion="css 1m479iu">.css-1m479iu{list-style-type:none;margin:0px;padding:0;}.css-1m479iu:last-child{margin-bottom:24px;}</style><ul role="list" class="css-1m479iu"><style data-emotion="css exhu38">.css-exhu38{margin-bottom:24px;}</style><li class="css-exhu38"><div class="css-exhu38"><div><style data-emotion="css az6lpi">.css-az6lpi{display:inline-block;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-az6lpi{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-az6lpi{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-az6lpi:hover:not(:disabled){-webkit-text-decoration:none;text-decoration:none;}</style><a href="/components/overview/" class="css-az6lpi"><style data-emotion="css 17x5lw">.css-17x5lw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}</style><span class="css-17x5lw"><style data-emotion="css t1lyqx">.css-t1lyqx{font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;background-color:transparent;color:#535353;box-sizing:border-box;cursor:'pointer';min-width:230px;padding:12px;margin:4px 0;text-overflow:ellipsis;}.css-t1lyqx::before{content:'';margin-bottom:-0.403em;display:block;}.css-t1lyqx::after{content:'';margin-top:-0.4em;display:block;}.css-t1lyqx:hover:not(:disabled){background-color:#E0E7FF;border-radius:8px;color:#0A0A0A;}.css-t1lyqx:active:not(:disabled){background-color:#AEBFFF;border-radius:8px;color:#0A0A0A;}</style><div data-testid="/components/overview" class="css-t1lyqx">Overview</div></span></a></div><style data-emotion="css x36bp3">.css-x36bp3{font-family:"Poppins",sans-serif;font-size:14px;line-height:1.5;font-weight:500;letter-spacing:0;background-color:transparent;color:#0A0A0A;min-height:32px;margin-top:20px;}</style><div id="/components/action-and-inputs" class="css-x36bp3">Actions &amp; Inputs</div><div><a href="/components/button/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/button" class="css-t1lyqx">Button</div></span></a></div><div><a href="/components/checkbox/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/checkbox" class="css-t1lyqx">Checkbox</div></span></a></div><div><a href="/components/form/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/form" class="css-t1lyqx">Form</div></span></a></div><div><a href="/components/radio-button/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/radio-button" class="css-t1lyqx">Radio Button</div></span></a></div><div><a href="/components/select/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/select" class="css-t1lyqx">Select</div></span></a></div><div><a href="/components/share-bar/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/share-bar" class="css-t1lyqx">Share Bar</div></span></a></div><div><a href="/components/slider/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/slider" class="css-t1lyqx">Slider</div></span></a></div><div><a href="/components/text-field/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/text-field" class="css-t1lyqx">Text Field</div></span></a></div><div><a href="/components/text-input/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/text-input" class="css-t1lyqx">Text Input</div></span></a></div><div id="/components/feedback-and-status" class="css-x36bp3">Feedback &amp; Status</div><div><a href="/components/banner/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/banner" class="css-t1lyqx">Banner</div></span></a></div><div><a href="/components/flag/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/flag" class="css-t1lyqx">Flag</div></span></a></div><div><a href="/components/progress-indicator/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/progress-indicator" class="css-t1lyqx">Progress Indicator</div></span></a></div><div><a href="/components/toast/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/toast" class="css-t1lyqx">Toast</div></span></a></div><div><a href="/components/inline-message/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/inline-message" class="css-t1lyqx">Inline Message</div></span></a></div><div id="/components/layout" class="css-x36bp3">Layout</div><div><a href="/components/aspect-ratio/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/aspect-ratio" class="css-t1lyqx">Aspect Ratio</div></span></a></div><div><a href="/components/block/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/block" class="css-t1lyqx">Block</div></span></a></div><div><a href="/components/card/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/card" class="css-t1lyqx">Card</div></span></a></div><div><a href="/components/divider/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/divider" class="css-t1lyqx">Divider</div></span></a></div><div><a href="/components/drawer/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/drawer" class="css-t1lyqx">Drawer</div></span></a></div><div><a href="/components/fieldset/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/fieldset" class="css-t1lyqx">Fieldset</div></span></a></div><div><a href="/components/grid/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/grid" class="css-t1lyqx">Grid</div></span></a></div><div><a href="/components/grid-layout/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/grid-layout" class="css-t1lyqx">Grid Layout</div></span></a></div><div><a href="/components/modal/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/modal" class="css-t1lyqx">Modal</div></span></a></div><div><a href="/components/stack/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/stack" class="css-t1lyqx">Stack</div></span></a></div><div><a href="/components/visibility/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/visibility" class="css-t1lyqx">Visibility</div></span></a></div><div id="/components/media" class="css-x36bp3">Media</div><div><a href="/components/audio-player/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/audio-player" class="css-t1lyqx">Audio Player</div></span></a></div><div><a href="/components/icons/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/icons" class="css-t1lyqx">Icons</div></span></a></div><div><a href="/components/image/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/image" class="css-t1lyqx">Image</div></span></a></div><div><a href="/components/volume-control/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/volume-control" class="css-t1lyqx">Volume Control</div></span></a></div><div id="/components/navigation" class="css-x36bp3">Navigation</div><div><a href="/components/link/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/link" class="css-t1lyqx">Link</div></span></a></div><div><a href="/components/menu/" class="css-az6lpi"><span class="css-17x5lw"><style data-emotion="css 5ft680">.css-5ft680{font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;background-color:transparent;color:#0A0A0A;box-sizing:border-box;cursor:'pointer';min-width:230px;padding:12px;margin:4px 0;text-overflow:ellipsis;}.css-5ft680::before{content:'';margin-bottom:-0.403em;display:block;}.css-5ft680::after{content:'';margin-top:-0.4em;display:block;}</style><div data-testid="/components/menu" class="css-5ft680">Menu</div></span></a></div><div><a href="/components/scroll/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/scroll" class="css-t1lyqx">Scroll</div></span></a></div><div><a href="/components/tabs/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/tabs" class="css-t1lyqx">Tabs</div></span></a></div><div><a href="/components/tag/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/tag" class="css-t1lyqx">Tag</div></span></a></div><div><a href="/components/title-bar/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/title-bar" class="css-t1lyqx">Title Bar</div></span></a></div><div id="/components/text" class="css-x36bp3">Text</div><div><a href="/components/byline/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/byline" class="css-t1lyqx">Byline</div></span></a></div><div><a href="/components/caption/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/caption" class="css-t1lyqx">Caption</div></span></a></div><div><a href="/components/date-time/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/date-time" class="css-t1lyqx">Date Time</div></span></a></div><div><a href="/components/headline/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/headline" class="css-t1lyqx">Headline</div></span></a></div><div><a href="/components/ordered-list/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/ordered-list" class="css-t1lyqx">Ordered List</div></span></a></div><div><a href="/components/standfirst/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/standfirst" class="css-t1lyqx">Standfirst</div></span></a></div><div><a href="/components/text-block/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/text-block" class="css-t1lyqx">Text Block</div></span></a></div><div><a href="/components/unordered-list/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/unordered-list" class="css-t1lyqx">Unordered List</div></span></a></div><div id="/components/third-party" class="css-x36bp3">Third Party Integrations</div><div><a href="/components/consent/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/consent" class="css-t1lyqx">Consent</div></span></a></div><div><a href="/components/consent-settings-link/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/consent-settings-link" class="css-t1lyqx">Consent Settings Link</div></span></a></div><div><a href="/components/experimentation-web/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/experimentation-web" class="css-t1lyqx">Experimentation Web</div></span></a></div><div><a href="/components/tealium/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/tealium" class="css-t1lyqx">Tealium</div></span></a></div><div id="/utils" class="css-x36bp3">Utilities</div><div><a href="/components/utils/emotion/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/utils/emotion" class="css-t1lyqx">Emotion</div></span></a></div><div><a href="/components/utils/custom-to-newskit-icon/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/utils/custom-to-newskit-icon" class="css-t1lyqx">customToNewsKitIcon</div></span></a></div><div><a href="/components/utils/get-css-from-theme/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/utils/get-css-from-theme" class="css-t1lyqx">getCssFromTheme</div></span></a></div><div><a href="/components/utils/get-from-theme/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/utils/get-from-theme" class="css-t1lyqx">getFromTheme</div></span></a></div><div><a href="/components/utils/get-defaults/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/utils/get-defaults" class="css-t1lyqx">getComponentDefaults</div></span></a></div><div><a href="/components/utils/hooks/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/utils/hooks" class="css-t1lyqx">Hooks</div></span></a></div></div></li></ul></nav></div><style data-emotion="css 1dzjn3i">.css-1dzjn3i{background-color:rgba(0, 0, 0, 0.8);position:fixed;overflow:auto;bottom:0;top:0;left:0;right:100%;opacity:0;visibility:hidden;-webkit-transition:opacity 0.6s,right 0.3s;transition:opacity 0.6s,right 0.3s;z-index:2;}@media screen and (min-width: 1024px){.css-1dzjn3i{display:none;}}</style><div data-testid="overlay" class="css-1dzjn3i"></div><style data-emotion="css 1kjizz3">.css-1kjizz3{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:fixed;top:0;right:0;left:0;z-index:4;background-color:#FFFFFF;font-family:"Poppins",sans-serif;font-size:14px;line-height:1.5;font-weight:500;letter-spacing:0;padding-top:8px;padding-bottom:8px;box-shadow:0 4px 8px 0 rgba(10,10,10,0.08);}@media screen and (min-width: 1024px){.css-1kjizz3{padding-top:12px;padding-bottom:12px;box-shadow:0 8px 16px 0 rgba(10,10,10,0.08);height:80px;}}</style><header data-testid="header-navigation" class="css-1kjizz3"><style data-emotion="css x51be0">.css-x51be0{position:-webkit-sticky;position:sticky;}</style><style data-emotion="css dre6gm">.css-dre6gm{width:100%;max-width:9999px;margin:0 auto;}</style><div class="css-dre6gm"><style data-emotion="css 18z1uw5">.css-18z1uw5{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:-webkit-sticky;position:sticky;}@media screen{.css-18z1uw5{margin:-16px 8px 0 8px;}}@media screen and (min-width: 480px){.css-18z1uw5{margin:-16px 8px 0 8px;}}@media screen and (min-width: 768px){.css-18z1uw5{margin:-16px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-18z1uw5{margin:-24px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-18z1uw5{margin:-24px 12px 0 12px;}}</style><div class="css-18z1uw5"><style data-emotion="css 4yea8k">.css-4yea8k{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-4yea8k{-webkit-order:1;-ms-flex-order:1;order:1;padding:0 8px;margin-top:16px;-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;}}@media screen and (min-width: 1024px){.css-4yea8k{padding:0 12px;margin-top:24px;}}</style><div class="css-4yea8k"><div class="css-17x5lw"><style data-emotion="css 1k3e0au">@media screen{.css-1k3e0au{display:block;}}@media screen and (min-width: 480px){.css-1k3e0au{display:block;}}@media screen and (min-width: 768px){.css-1k3e0au{display:none;}}@media screen and (min-width: 1024px){.css-1k3e0au{display:none;}}@media screen and (min-width: 1440px){.css-1k3e0au{display:none;}}</style><div class="css-1k3e0au"><div data-testid="logo-container" class="css-17x5lw"><style data-emotion="css 1tjzrtp">.css-1tjzrtp{font-size:0;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;margin-right:16px;}</style><div tabindex="0" data-testid="mobile-menu-icon" class="css-1tjzrtp"><style data-emotion="css 1ypz2ua">.css-1ypz2ua{color:#577FFB;fill:#577FFB;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1ypz2ua{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1ypz2ua{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1ypz2ua.css-1ypz2ua{width:32px;height:32px;color:#577FFB;fill:#577FFB;}@media screen and (prefers-reduced-motion: no-preference){.css-1ypz2ua.css-1ypz2ua{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1ypz2ua.css-1ypz2ua{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><style data-emotion="css 17xb90z-EmotionIconBase">.css-17xb90z-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;color:#577FFB;fill:#577FFB;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-17xb90z-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-17xb90z-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-17xb90z-EmotionIconBase.css-17xb90z-EmotionIconBase{width:32px;height:32px;color:#577FFB;fill:#577FFB;}@media screen and (prefers-reduced-motion: no-preference){.css-17xb90z-EmotionIconBase.css-17xb90z-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-17xb90z-EmotionIconBase.css-17xb90z-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-17xb90z-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></div><style data-emotion="css 1fjt7l2">.css-1fjt7l2{display:inline-block;color:#2E2E2E;}@media screen and (prefers-reduced-motion: no-preference){.css-1fjt7l2{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1fjt7l2{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1fjt7l2 svg{fill:#2E2E2E;}</style><a href="/" class="css-1fjt7l2"><span class="css-17x5lw"><style data-emotion="css nr1bh9">.css-nr1bh9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:64px;height:40px;overflow:hidden;}</style><div class="css-nr1bh9"><style data-emotion="css 1qvdy2v">.css-1qvdy2v{display:inline-block;fill:#2E2E2E;color:#2E2E2E;width:48px;height:32px;}</style><svg viewBox="0 0 587 400" class="css-1qvdy2v"><title>Newskit Logo</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M542.931651,29.2896728 C572.492354,32.9192707 586.5572,64.4547843 586.348415,106.08797 L586.495247,105.970589 C537.990326,145.154611 442.468706,171.95996 348.623603,120.985066 L348.721238,120.845043 C362.553081,128.155467 377.170854,133.793553 394.357307,135.903784 C415.412272,138.489009 432.330134,126.917892 447.679336,110.530755 L448.773075,109.352181 C448.954931,109.154429 449.136575,108.956026 449.318008,108.756987 L450.404133,107.55526 L450.404133,107.55526 L451.485443,106.339042 L451.485443,106.339042 L452.562145,105.109091 L452.562145,105.109091 L453.634447,103.866163 C453.812809,103.657969 453.990997,103.449266 454.169014,103.240069 L455.235107,101.979094 L455.235107,101.979094 L456.29732,100.707032 L456.29732,100.707032 L457.587754,99.1418332 C457.802393,98.8797626 458.016819,98.6171092 458.231042,98.3539014 L459.83401,96.3698952 L459.83401,96.3698952 L461.430067,94.3677804 L462.702432,92.7548508 L463.971223,91.1334185 L465.236818,89.5048552 L467.13004,87.0516409 L470.379422,82.8097527 L474.299324,77.6792448 L476.754567,74.4820285 L478.597452,72.100709 L480.442909,69.7384417 L481.675233,68.1763279 L482.909587,66.6259015 L484.146323,65.0884505 L485.385797,63.5652628 L486.628361,62.0576264 L487.624877,60.8635796 L487.624877,60.8635796 L488.623779,59.6809694 L488.623779,59.6809694 L489.625249,58.510455 L489.625249,58.510455 L490.629468,57.3526961 C490.797077,57.1608358 490.964809,56.9695345 491.132666,56.7788059 L492.141348,55.6414163 C492.309724,55.4530334 492.478233,55.2652506 492.646879,55.0780818 L493.660434,53.9625454 C494.168065,53.4085705 494.676998,52.8603679 495.187337,52.3183087 L496.209917,51.2424913 C496.722174,50.708788 497.235905,50.1814753 497.751209,49.6609242 L498.783949,48.6289471 C511.892687,35.6742166 526.055811,27.2175802 542.931651,29.2896728 Z" fill="#AEBFFF"></path><path d="M233.380135,275.552866 L233.481089,275.663916 C221.00643,269.775743 208.041451,265.334595 193.610157,263.562655 C178.279744,261.680317 164.987976,268.064335 152.720979,278.527996 L151.754642,279.362473 C151.27252,279.783874 150.791953,280.21146 150.312878,280.644973 L149.356702,281.519826 L149.356702,281.519826 L148.404395,282.410029 C147.612388,283.158133 146.824297,283.921749 146.039833,284.699684 L145.100198,285.640004 L145.100198,285.640004 L144.163935,286.593612 L144.163935,286.593612 L143.230932,287.560052 C143.075697,287.722169 142.920593,287.884802 142.765618,288.047941 L141.837298,289.032769 C141.68283,289.197894 141.528485,289.363505 141.374263,289.529594 L140.27472,290.723935 C139.908877,291.124669 139.543693,291.527981 139.179139,291.933742 L138.087333,293.158242 C137.90567,293.363507 137.724156,293.569352 137.542788,293.775761 L136.456294,295.020854 L135.373107,296.278709 L134.293042,297.548555 L133.215909,298.829619 L132.678385,299.474116 L132.678385,299.474116 L131.353955,301.076035 L130.693146,301.88229 L129.374121,303.504482 L128.715817,304.320056 L127.401406,305.959251 L126.08963,307.607965 L124.126138,310.095703 L121.514088,313.432437 L115.59486,321.034134 L113.63866,323.535524 L111.680042,326.02386 L110.372368,327.673078 L108.407082,330.128759 L107.093862,331.751664 L105.777807,333.3615 L104.458567,334.956815 L103.135788,336.536155 L102.101338,337.756016 L101.064355,338.964583 L100.02467,340.161167 L98.982118,341.345078 L97.936531,342.515628 L96.8877422,343.672125 L95.8355846,344.813881 L95.3081902,345.379015 L95.3081902,345.379015 L94.2506661,346.497364 L93.3700527,347.413119 L93.3700527,347.413119 L92.4867353,348.317137 L92.4867353,348.317137 L91.6006185,349.209022 C91.1568443,349.651865 90.7119845,350.090012 90.2659853,350.523239 L89.372452,351.383068 L89.372452,351.383068 L88.475785,352.229385 C88.326074,352.36929 88.1762285,352.508615 88.0262465,352.647353 L87.1246998,353.472662 C86.5225551,354.018078 85.9181622,354.55383 85.3113935,355.07939 L84.3994429,355.86002 C84.2471489,355.98883 84.0947024,356.116986 83.9421015,356.24448 L83.0246266,357.00144 C71.5326258,366.362564 59.1494776,371.909706 45.035813,370.176766 C15.7285936,366.578292 1.08954462,335.668876 0.349530223,294.649268 L-0.505045496,295.436748 C55.5334979,243.070922 150.863739,236.107309 233.380135,275.552866 Z" fill="#3358CC"></path><path d="M369.722888,336.535023 C344.478199,333.039998 323.729573,325.3413 305.289933,316.177684 L303.619902,315.340669 C303.065305,315.060369 302.512767,314.778801 301.962228,314.496039 L300.316545,313.644253 L298.275747,312.570154 L298.275747,312.570154 L296.252403,311.486479 L294.645814,310.613246 L292.652088,309.514587 L292.652088,309.514587 L290.673817,308.408855 L289.101849,307.519775 L287.538952,306.627197 L285.210813,305.282771 L282.134966,303.482225 L282.134966,303.482225 L279.680373,302.028273 L277.243511,300.572493 L273.61813,298.389574 L265.271816,293.333002 L262.909329,291.906348 L259.965971,290.139474 L257.030668,288.394353 C249.211286,283.773014 241.446067,279.423464 233.480948,275.66385 L233.380135,275.552866 C151.688903,236.501765 57.4388213,242.936291 1.18784621,293.879395 L0.349511934,294.648254 C-1.40117061,197.576039 74.685447,43.8855432 218.416223,61.5334634 C243.595502,64.6250902 263.775794,71.8618633 281.413553,80.6870641 L282.986322,81.4815588 C283.508357,81.7477604 284.028191,82.0153094 284.54589,82.2841378 L286.092649,83.0943931 L286.861347,83.5022718 L286.861347,83.5022718 L288.389627,84.3232765 L289.906078,85.1509374 L289.906078,85.1509374 L291.411091,85.9848465 L292.159431,86.4040166 L292.159431,86.4040166 L294.018523,87.4579947 L294.018523,87.4579947 L295.861428,88.5199823 L297.324613,89.3748037 L298.778321,90.233833 L300.222943,91.0966623 L301.658873,91.9628835 L303.086502,92.8320886 L304.506222,93.7038695 L305.918425,94.5778183 L308.21828,96.01414 L309.361566,96.7335126 L311.635937,98.1735576 L313.895479,99.6138377 L323.926209,106.049807 L326.13506,107.459247 L328.340309,108.857237 L331.094434,110.585885 L333.849002,112.290322 C338.421777,115.096398 343.010309,117.787993 347.683946,120.292931 L349.440685,121.223392 C442.141776,171.224285 536.201082,145.590447 585.029491,107.139624 L586.348414,106.088092 C585.864018,202.666729 508.569775,353.583277 369.722888,336.535023 Z" fill="#577FFB"></path></g></svg></div></span></a></div></div><style data-emotion="css n86qze">@media screen{.css-n86qze{display:none;}}@media screen and (min-width: 480px){.css-n86qze{display:none;}}@media screen and (min-width: 768px){.css-n86qze{display:block;}}@media screen and (min-width: 1024px){.css-n86qze{display:none;}}@media screen and (min-width: 1440px){.css-n86qze{display:none;}}</style><div class="css-n86qze"><div data-testid="logo-container" class="css-17x5lw"><div tabindex="0" data-testid="mobile-menu-icon" class="css-1tjzrtp"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-17xb90z-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></div><a href="/" class="css-1fjt7l2"><span class="css-17x5lw"><style data-emotion="css 3s8hd2">.css-3s8hd2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:52px;overflow:hidden;}</style><div class="css-3s8hd2"><style data-emotion="css kbqybq">.css-kbqybq{display:inline-block;width:183px;height:40px;}</style><svg viewBox="0 0 1587 347" class="css-kbqybq"><title>Newskit Logo</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-5.000000, 47.000000)"><style data-emotion="css 1epbdp2">.css-1epbdp2{fill:#162740;color:#162740;}</style><g transform="translate(508.073657, 26.125170)" class="css-1epbdp2"><path d="M49.6701967,183.5 L49.6701967,88.2085714 L126.078764,185.96333 C126.836849,186.933201 127.99928,187.5 129.230272,187.5 L167,187.5 C169.209139,187.5 171,185.709139 171,183.5 L171,10.5 C171,8.290861 169.209139,6.5 167,6.5 L125.329803,6.5 C123.120664,6.5 121.329803,8.290861 121.329803,10.5 L121.329803,102.171429 L48.025595,8.04230221 C47.2677022,7.06910032 46.1031929,6.5 44.8696924,6.5 L4,6.5 C1.790861,6.5 0,8.290861 0,10.5 L0,183.5 C0,185.709139 1.790861,187.5 4,187.5 L45.6701967,187.5 C47.8793357,187.5 49.6701967,185.709139 49.6701967,183.5 Z M903,55 C918.187831,55 930.5,42.6878306 930.5,27.5 C930.5,12.3121694 918.187831,0 903,0 C887.812169,0 875.5,12.3121694 875.5,27.5 C875.5,42.6878306 887.812169,55 903,55 Z M263.027523,190.5 C289.304083,190.5 308.121364,180.273822 321.470735,164.67486 C322.185034,163.840189 322.721045,161.426603 321.327744,160.275568 L299.153134,141.956652 C297.457714,140.556029 294.757606,141.251542 293.943758,141.981606 C284.811066,150.174114 276.283121,153.871025 265.355963,153.871025 C250.091743,153.871025 238.966972,146.132509 235.086239,130.913428 L323.782339,130.913428 C325.435321,130.913428 329,129.596531 329,126.880598 L329,120.853357 C329,79.8392226 306.750459,44.5 258.629358,44.5 C217.234862,44.5 188,76.7438163 188,117.5 L188,118.015901 C188,161.09364 219.045872,190.5 263.027523,190.5 Z M284,105.5 L235,105.5 C237.592593,90.1938776 246.407407,80.5 259.37037,80.5 C272.851852,80.5 282.185185,90.1938776 284,105.5 Z M414.377751,184.718744 L435.778461,117.819827 C435.946735,117.293802 436.509575,117.003787 437.0356,117.17206 C437.345716,117.271265 437.588117,117.515238 437.685316,117.825988 L458.600819,184.6941 C459.122984,186.363495 460.669273,187.5 462.418426,187.5 L498.895815,187.5 C500.65258,187.5 502.203732,186.353753 502.719524,184.674412 L543.410734,52.1899515 C544.059344,50.078175 542.873213,47.8404396 540.761436,47.1918296 C540.380918,47.0749574 539.985086,47.0155393 539.587024,47.0155393 L500.789687,47.0155393 C498.978012,47.0155393 497.392536,48.2331786 496.925114,49.9835159 L479.758709,114.265808 C479.616217,114.799394 479.068146,115.116438 478.53456,114.973946 C478.200911,114.884846 477.936847,114.629901 477.836082,114.299588 L458.017303,49.3328585 C457.503885,47.6498526 455.950944,46.5 454.191368,46.5 L419.802333,46.5 C418.045766,46.5 416.494742,47.6459914 415.978782,49.3250718 L396.176619,113.766952 C396.014396,114.294874 395.454922,114.591331 394.927,114.429108 C394.595866,114.327355 394.340981,114.061474 394.253297,113.72634 L377.580699,50.0030584 C377.120225,48.2431076 375.530153,47.0155393 373.71096,47.0155393 L334.393967,47.0155393 C332.184828,47.0155393 330.393967,48.8064003 330.393967,51.0155393 C330.393967,51.4090901 330.452046,51.8004866 330.566327,52.1770793 L370.770217,184.66154 C371.2818,186.347367 372.836116,187.5 374.597856,187.5 L410.56794,187.5 C412.307555,187.5 413.847715,186.375646 414.377751,184.718744 Z M609.892857,190.5 C644.002101,190.5 667,174.450355 667,143.64539 L667,143.12766 C667,118.664894 649.208929,108.460426 625.494477,101.002777 L623.904868,100.509543 C623.37216,100.346404 622.836658,100.184495 622.29849,100.02369 L620.676125,99.5444603 L619.038552,99.0710951 L617.386555,98.6028369 L613.001051,97.2603787 L611.189694,96.694176 L609.88794,96.27927 L608.635445,95.8713519 L607.432756,95.4691926 L606.280417,95.0715629 L605.540433,94.808386 L604.823231,94.5463117 L604.128973,94.2849759 L603.45782,94.0240145 L602.809933,93.7630631 L602.185475,93.5017577 L601.584607,93.239734 C601.486437,93.1959833 601.389256,93.1521875 601.293069,93.108339 L600.727889,92.844555 C600.543485,92.7563758 600.36308,92.6679252 600.186702,92.5791423 L599.66967,92.3117367 C599.58552,92.2669828 599.502384,92.2221307 599.420263,92.1771727 L598.939768,91.9060948 C598.783687,91.8152718 598.631699,91.723965 598.483832,91.6321135 L598.052617,91.3548645 C595.819012,89.8668424 594.647059,88.2238632 594.647059,86.177305 L594.647059,85.6595745 C594.647059,81.5177305 598.523109,78.6702128 606.016807,78.6702128 C616.381853,78.6702128 630.794334,82.9501422 644.429889,90.2492222 L645.170746,90.6470084 L645.278629,90.6877084 L645.428516,90.7318551 L645.61432,90.7746621 C645.681564,90.788176 645.75378,90.8006688 645.829952,90.8113428 L646.069325,90.8371103 C646.858502,90.8963762 647.913206,90.7194935 648.363501,89.6224742 L649.482426,86.2332564 L650.41522,83.3635462 L652.066003,78.2026376 L653.805034,72.6715009 L655.229292,68.0824946 L657.906292,59.3602096 C658.332293,57.9717378 657.777631,57.2285724 657.347441,56.8859969 L657.223223,56.7949973 L657.113105,56.7265648 L657.065405,56.7003523 C642.103147,48.8120377 624.172333,44.5 606.533613,44.5 C574.233193,44.5 550.460084,61.0673759 550.460084,90.8368794 L550.460084,91.3546099 C550.460084,115.11844 566.32928,125.416099 588.07008,132.422028 L589.614346,132.91123 L591.177336,133.390292 C591.701366,133.548378 592.228386,133.704907 592.758266,133.86001 L594.356357,134.32118 L595.970827,134.774596 L597.600894,135.221053 L599.245776,135.661348 C599.521115,135.734261 599.797038,135.80695 600.073529,135.879433 L603.575041,136.868735 L605.906341,137.539846 L607.668301,138.06027 L608.929112,138.443108 L609.740577,138.69553 L610.913911,139.070971 L611.666742,139.319726 L612.395944,139.567722 L613.101414,139.815365 L613.783052,140.063058 L614.440756,140.311206 C614.548374,140.352624 614.65499,140.394078 614.760602,140.435577 L615.382218,140.685167 C615.483808,140.726876 615.58439,140.768646 615.683962,140.810486 L616.269261,141.062428 L616.830223,141.316444 L617.366747,141.572938 L617.878732,141.832315 C621.126662,143.528516 622.813025,145.433083 622.813025,148.046099 L622.813025,148.56383 C622.813025,153.48227 618.678571,156.070922 610.151261,156.070922 C596.440715,156.070922 580.178478,151.190806 564.881159,141.650754 L564.141733,141.185503 C564.093732,141.155032 564.040729,141.123143 563.983488,141.090874 L563.79981,140.993962 L563.595278,140.900988 C562.919404,140.619369 561.998701,140.490551 561.487311,141.403508 L551.779214,170.769329 L551.450065,171.738253 C550.79398,173.603357 552.142953,174.923294 552.801936,175.310151 C570.051776,185.436717 589.878719,190.5 609.892857,190.5 Z M740.083086,182.5 L740.083086,139.826518 C740.083086,139.577805 740.175768,139.338018 740.343042,139.15396 L757.55884,120.210705 C757.930284,119.80199 758.562728,119.771776 758.971443,120.143219 C759.02977,120.196228 759.081626,120.255946 759.125931,120.32113 L802.916375,184.748531 C803.661045,185.844139 804.899841,186.5 806.224563,186.5 L856.418355,186.5 C858.627494,186.5 860.418355,184.709139 860.418355,182.5 C860.418355,181.694156 860.174957,180.907101 859.720045,180.241939 L793.703389,83.7137554 C793.445031,83.3359897 793.476098,82.831043 793.778816,82.4877974 L855.815462,12.1457707 C857.276681,10.488926 857.118095,7.96123597 855.46125,6.50001714 C854.730545,5.8555868 853.78976,5.5 852.81548,5.5 L804.406558,5.5 C803.233698,5.5 802.119934,6.01475249 801.35994,6.90806657 L741.844741,76.8635966 C741.486869,77.2842468 740.855753,77.3351391 740.435103,76.9772678 C740.211774,76.7872693 740.083086,76.5088283 740.083086,76.2156133 L740.083086,9.5 C740.083086,7.290861 738.292225,5.5 736.083086,5.5 L694,5.5 C691.790861,5.5 690,7.290861 690,9.5 L690,182.5 C690,184.709139 691.790861,186.5 694,186.5 L736.083086,186.5 C738.292225,186.5 740.083086,184.709139 740.083086,182.5 Z M928,182.5 L928,75.0824946 C928,72.8733556 926.209139,71.0824946 924,71.0824946 L883,71.0824946 C880.790861,71.0824946 879,72.8733556 879,75.0824946 L879,182.5 C879,184.709139 880.790861,186.5 883,186.5 L924,186.5 C926.209139,186.5 928,184.709139 928,182.5 Z M1013.35092,189.5 C1025.71919,189.5 1036.40257,186.764504 1044.83085,182.622854 L1045.44285,182.317168 L1045.60937,182.227026 L1045.78895,182.119754 C1046.52796,181.653073 1047.48285,180.715298 1047.48285,178.586712 L1047.48285,145.854246 C1047.48285,144.165121 1046.13184,143.992466 1045.13243,144.162007 L1044.90881,144.206672 C1044.87284,144.21495 1044.83758,144.223601 1044.80314,144.232558 L1044.60696,144.289433 C1044.54533,144.309258 1044.48771,144.329772 1044.43489,144.35044 L1044.35935,144.38149 C1039.37124,146.413468 1034.2066,147.648041 1028.86544,147.648041 C1019.8153,147.648041 1015.41953,143.514514 1015.41953,133.697388 L1015.41953,87.1618287 C1015.41953,86.609544 1015.86724,86.1618287 1016.41953,86.1618287 L1044,86.1618287 C1046.20914,86.1618287 1048,84.3709677 1048,82.1618287 L1048,50.8933237 C1048,48.6841847 1046.20914,46.8933237 1044,46.8933237 L1016.41953,46.8933237 C1015.86724,46.8933237 1015.41953,46.4456084 1015.41953,45.8933237 L1015.41953,15.5 C1015.41953,13.290861 1013.62866,11.5 1011.41953,11.5 L970.548813,11.5 C968.339674,11.5 966.548813,13.290861 966.548813,15.5 L966.548813,45.8933237 C966.548813,46.4456084 966.101097,46.8933237 965.548813,46.8933237 L954,46.8933237 C951.790861,46.8933237 950,48.6841847 950,50.8933237 L950,82.1618287 C950,84.3709677 951.790861,86.1618287 954,86.1618287 L965.548813,86.1618287 C966.101097,86.1618287 966.548813,86.609544 966.548813,87.1618287 L966.548813,143.256168 C966.548813,176.582729 983.873351,189.5 1013.35092,189.5 Z"></path></g><g transform="translate(0.000000, 0.116667)"><g transform="translate(207.496510, 125.867994) rotate(2.000000) translate(-207.496510, -125.867994) translate(4.492344, 7.592994)"><path d="M375.877049,0.215696421 C396.323202,2.72616833 406.051387,24.5382319 405.906977,53.3345184 L406.008536,53.2533299 C372.459299,80.3556122 306.390178,98.8959782 241.480649,63.6383437 L241.54818,63.541494 C251.115204,68.597871 261.22583,72.497547 273.113127,73.9571235 C287.676144,75.7452372 299.377666,67.7418812 309.994197,56.407445 L310.7507,55.5922645 C310.876484,55.4554859 311.002121,55.3182571 311.127612,55.1805889 L311.878849,54.3493941 L311.878849,54.3493941 L312.626754,53.508177 L312.626754,53.508177 L313.371473,52.657461 L313.371473,52.657461 L314.113149,51.7977691 C314.236516,51.6537682 314.359762,51.5094151 314.482891,51.3647207 L315.220272,50.492546 L315.220272,50.492546 L315.95497,49.6127035 L315.95497,49.6127035 L316.84752,48.5301073 C316.995978,48.3488419 317.14429,48.1671732 317.29246,47.9851212 L318.40118,46.6128503 L318.40118,46.6128503 L319.50512,45.2280542 L320.385172,44.1124446 L321.262753,42.9909538 L322.138122,41.8645309 L323.447601,40.1677244 L325.69509,37.2337517 L328.406356,33.6851504 L330.104566,31.4737425 L331.379227,29.8266632 L332.655668,28.1927616 L333.508026,27.1122995 L334.361787,26.0399213 L335.217197,24.9765177 L336.074499,23.9229795 L336.93394,22.8801977 L337.623197,22.0543153 L337.623197,22.0543153 L338.314104,21.2363432 L338.314104,21.2363432 L339.006787,20.4267375 L339.006787,20.4267375 L339.701372,19.6259542 C339.817302,19.4932508 339.933316,19.3609341 340.049417,19.2290135 L340.747089,18.442319 C340.863549,18.3120208 340.980101,18.1821378 341.096748,18.0526793 L341.79779,17.2810999 C342.148901,16.897934 342.500914,16.5187606 342.853898,16.1438363 L343.561183,15.3997292 C343.915494,15.0305844 344.270824,14.6658598 344.627243,14.305812 L345.341555,13.5920278 C354.408432,4.63167253 364.204592,-1.21750098 375.877049,0.215696421 Z" fill="#AEBFFF"></path><path d="M161.770583,170.547738 L161.84041,170.624548 C153.212104,166.551895 144.24466,163.480101 134.263015,162.254509 C123.659479,160.952559 114.466007,165.368171 105.981333,172.605536 L105.312951,173.182717 C104.979483,173.474186 104.64709,173.769932 104.315731,174.069779 L103.654375,174.674886 L103.654375,174.674886 L102.995697,175.29061 C102.447892,175.808048 101.902795,176.336216 101.360208,176.874288 L100.710294,177.524675 L100.710294,177.524675 L100.062712,178.184255 L100.062712,178.184255 L99.4173845,178.852709 C99.3100136,178.96484 99.2027335,179.077327 99.0955426,179.190165 L98.4534543,179.871338 C98.3466136,179.985549 98.2398589,180.100097 98.1331886,180.214975 L97.3726713,181.041061 C97.1196294,181.318236 96.8670443,181.597193 96.6148944,181.877844 L95.8597287,182.72479 C95.7340782,182.866765 95.608531,183.009141 95.4830846,183.151907 L94.731593,184.013097 L93.9823892,184.883113 L93.2353436,185.761423 L92.490327,186.647492 L92.1185391,187.093269 L92.1185391,187.093269 L91.2024752,188.201264 L90.7454158,188.758923 L89.8330904,189.88094 L89.3777634,190.445045 L88.4686288,191.578821 L87.5613172,192.719182 L86.2032351,194.439867 L84.3965671,196.747775 L80.3024344,202.005615 L78.949396,203.735743 L77.5946857,205.456843 L76.6902108,206.597551 L75.330888,208.296064 L74.4225774,209.418574 L73.5123064,210.532044 L72.5998317,211.63547 L71.6849099,212.727847 L70.9694154,213.571583 L70.2521684,214.407509 L69.5330533,215.235146 L68.8119548,216.054019 L68.0887571,216.863649 L67.3633448,217.663559 L66.6356025,218.453273 L66.2708214,218.844158 L66.2708214,218.844158 L65.5393672,219.617683 L64.9302762,220.25108 L64.9302762,220.25108 L64.3193151,220.876359 L64.3193151,220.876359 L63.7064176,221.493246 C63.3994738,221.799546 63.0917791,222.102597 62.7832963,222.402246 L62.1652691,222.996961 L62.1652691,222.996961 L61.5450744,223.58233 C61.4415243,223.679098 61.3378812,223.775465 61.2341436,223.871425 L60.6105738,224.442264 C60.1940904,224.81951 59.776052,225.190072 59.3563703,225.553584 L58.7256045,226.09352 C58.6202678,226.182613 58.5148256,226.271254 58.4092767,226.359438 L57.7746899,226.883002 C49.826056,233.357779 41.2610451,237.194553 31.4990938,235.995936 C11.228267,233.506992 1.10292483,212.127979 0.591081538,183.756083 L1.73976389e-12,184.300757 C38.7599925,148.081061 104.696743,143.264562 161.770583,170.547738 Z" fill="#3358CC"></path><path d="M256.074321,212.727064 C238.613411,210.309671 224.262278,204.984739 211.508193,198.646571 L210.353089,198.067635 C209.969492,197.873761 209.58732,197.67901 209.206531,197.483433 L208.068267,196.894281 L206.656715,196.151362 L206.656715,196.151362 L205.257235,195.401821 L204.146011,194.797834 L202.767017,194.037929 L202.767017,194.037929 L201.398713,193.27313 L200.311436,192.658184 L199.230432,192.040818 L197.620136,191.110923 L195.492675,189.865545 L195.492675,189.865545 L193.794915,188.859895 L192.109418,187.85298 L189.601863,186.343128 L183.828996,182.845666 L182.194942,181.858897 L180.15912,180.636809 L178.128868,179.429767 C172.720463,176.23334 167.349519,173.224902 161.840312,170.624502 L161.770583,170.547738 C105.267481,143.537393 40.0778412,147.987941 1.17091676,183.223588 L0.591068889,183.755382 C-0.61981987,116.613766 52.0067573,10.3111735 151.420544,22.5176516 C168.836212,24.6560268 182.794248,29.6614615 194.993697,35.7655587 L196.081529,36.3150842 C196.442603,36.499207 196.802155,36.6842617 197.160231,36.8702014 L198.230072,37.4306279 L198.761755,37.7127441 L198.761755,37.7127441 L199.818815,38.2806057 L200.867694,38.8530711 L200.867694,38.8530711 L201.908661,39.4298582 L202.426263,39.7197842 L202.426263,39.7197842 L203.712135,40.4487857 L203.712135,40.4487857 L204.986811,41.1833272 L205.998847,41.7745786 L207.004328,42.3687406 L208.003526,42.9655309 L208.996711,43.5646672 L209.984154,44.1658674 L210.966127,44.7688492 L211.942901,45.3733304 L213.533633,46.3667862 L214.324406,46.8643523 L215.897513,47.8603834 L217.460363,48.8565771 L224.398284,53.3081228 L225.926073,54.2829853 L227.45137,55.2499283 L229.356307,56.4455762 L231.261549,57.6244787 C234.424385,59.565348 237.59812,61.4270346 240.830719,63.1596166 L242.045797,63.8031855 C306.164051,98.3871368 371.221738,80.6570654 404.994721,54.0619123 L405.906976,53.3346033 C405.571936,120.134827 352.110084,224.518773 256.074321,212.727064 Z" fill="#577FFB"></path></g></g></g></g></svg></div></span></a></div></div><style data-emotion="css 1tiut6d">@media screen{.css-1tiut6d{display:none;}}@media screen and (min-width: 480px){.css-1tiut6d{display:none;}}@media screen and (min-width: 768px){.css-1tiut6d{display:none;}}@media screen and (min-width: 1024px){.css-1tiut6d{display:block;}}@media screen and (min-width: 1440px){.css-1tiut6d{display:block;}}</style><div class="css-1tiut6d"><a href="/" class="css-1fjt7l2"><span class="css-17x5lw"><div class="css-3s8hd2"><svg viewBox="0 0 1587 347" class="css-kbqybq"><title>Newskit Logo</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-5.000000, 47.000000)"><g transform="translate(508.073657, 26.125170)" class="css-1epbdp2"><path d="M49.6701967,183.5 L49.6701967,88.2085714 L126.078764,185.96333 C126.836849,186.933201 127.99928,187.5 129.230272,187.5 L167,187.5 C169.209139,187.5 171,185.709139 171,183.5 L171,10.5 C171,8.290861 169.209139,6.5 167,6.5 L125.329803,6.5 C123.120664,6.5 121.329803,8.290861 121.329803,10.5 L121.329803,102.171429 L48.025595,8.04230221 C47.2677022,7.06910032 46.1031929,6.5 44.8696924,6.5 L4,6.5 C1.790861,6.5 0,8.290861 0,10.5 L0,183.5 C0,185.709139 1.790861,187.5 4,187.5 L45.6701967,187.5 C47.8793357,187.5 49.6701967,185.709139 49.6701967,183.5 Z M903,55 C918.187831,55 930.5,42.6878306 930.5,27.5 C930.5,12.3121694 918.187831,0 903,0 C887.812169,0 875.5,12.3121694 875.5,27.5 C875.5,42.6878306 887.812169,55 903,55 Z M263.027523,190.5 C289.304083,190.5 308.121364,180.273822 321.470735,164.67486 C322.185034,163.840189 322.721045,161.426603 321.327744,160.275568 L299.153134,141.956652 C297.457714,140.556029 294.757606,141.251542 293.943758,141.981606 C284.811066,150.174114 276.283121,153.871025 265.355963,153.871025 C250.091743,153.871025 238.966972,146.132509 235.086239,130.913428 L323.782339,130.913428 C325.435321,130.913428 329,129.596531 329,126.880598 L329,120.853357 C329,79.8392226 306.750459,44.5 258.629358,44.5 C217.234862,44.5 188,76.7438163 188,117.5 L188,118.015901 C188,161.09364 219.045872,190.5 263.027523,190.5 Z M284,105.5 L235,105.5 C237.592593,90.1938776 246.407407,80.5 259.37037,80.5 C272.851852,80.5 282.185185,90.1938776 284,105.5 Z M414.377751,184.718744 L435.778461,117.819827 C435.946735,117.293802 436.509575,117.003787 437.0356,117.17206 C437.345716,117.271265 437.588117,117.515238 437.685316,117.825988 L458.600819,184.6941 C459.122984,186.363495 460.669273,187.5 462.418426,187.5 L498.895815,187.5 C500.65258,187.5 502.203732,186.353753 502.719524,184.674412 L543.410734,52.1899515 C544.059344,50.078175 542.873213,47.8404396 540.761436,47.1918296 C540.380918,47.0749574 539.985086,47.0155393 539.587024,47.0155393 L500.789687,47.0155393 C498.978012,47.0155393 497.392536,48.2331786 496.925114,49.9835159 L479.758709,114.265808 C479.616217,114.799394 479.068146,115.116438 478.53456,114.973946 C478.200911,114.884846 477.936847,114.629901 477.836082,114.299588 L458.017303,49.3328585 C457.503885,47.6498526 455.950944,46.5 454.191368,46.5 L419.802333,46.5 C418.045766,46.5 416.494742,47.6459914 415.978782,49.3250718 L396.176619,113.766952 C396.014396,114.294874 395.454922,114.591331 394.927,114.429108 C394.595866,114.327355 394.340981,114.061474 394.253297,113.72634 L377.580699,50.0030584 C377.120225,48.2431076 375.530153,47.0155393 373.71096,47.0155393 L334.393967,47.0155393 C332.184828,47.0155393 330.393967,48.8064003 330.393967,51.0155393 C330.393967,51.4090901 330.452046,51.8004866 330.566327,52.1770793 L370.770217,184.66154 C371.2818,186.347367 372.836116,187.5 374.597856,187.5 L410.56794,187.5 C412.307555,187.5 413.847715,186.375646 414.377751,184.718744 Z M609.892857,190.5 C644.002101,190.5 667,174.450355 667,143.64539 L667,143.12766 C667,118.664894 649.208929,108.460426 625.494477,101.002777 L623.904868,100.509543 C623.37216,100.346404 622.836658,100.184495 622.29849,100.02369 L620.676125,99.5444603 L619.038552,99.0710951 L617.386555,98.6028369 L613.001051,97.2603787 L611.189694,96.694176 L609.88794,96.27927 L608.635445,95.8713519 L607.432756,95.4691926 L606.280417,95.0715629 L605.540433,94.808386 L604.823231,94.5463117 L604.128973,94.2849759 L603.45782,94.0240145 L602.809933,93.7630631 L602.185475,93.5017577 L601.584607,93.239734 C601.486437,93.1959833 601.389256,93.1521875 601.293069,93.108339 L600.727889,92.844555 C600.543485,92.7563758 600.36308,92.6679252 600.186702,92.5791423 L599.66967,92.3117367 C599.58552,92.2669828 599.502384,92.2221307 599.420263,92.1771727 L598.939768,91.9060948 C598.783687,91.8152718 598.631699,91.723965 598.483832,91.6321135 L598.052617,91.3548645 C595.819012,89.8668424 594.647059,88.2238632 594.647059,86.177305 L594.647059,85.6595745 C594.647059,81.5177305 598.523109,78.6702128 606.016807,78.6702128 C616.381853,78.6702128 630.794334,82.9501422 644.429889,90.2492222 L645.170746,90.6470084 L645.278629,90.6877084 L645.428516,90.7318551 L645.61432,90.7746621 C645.681564,90.788176 645.75378,90.8006688 645.829952,90.8113428 L646.069325,90.8371103 C646.858502,90.8963762 647.913206,90.7194935 648.363501,89.6224742 L649.482426,86.2332564 L650.41522,83.3635462 L652.066003,78.2026376 L653.805034,72.6715009 L655.229292,68.0824946 L657.906292,59.3602096 C658.332293,57.9717378 657.777631,57.2285724 657.347441,56.8859969 L657.223223,56.7949973 L657.113105,56.7265648 L657.065405,56.7003523 C642.103147,48.8120377 624.172333,44.5 606.533613,44.5 C574.233193,44.5 550.460084,61.0673759 550.460084,90.8368794 L550.460084,91.3546099 C550.460084,115.11844 566.32928,125.416099 588.07008,132.422028 L589.614346,132.91123 L591.177336,133.390292 C591.701366,133.548378 592.228386,133.704907 592.758266,133.86001 L594.356357,134.32118 L595.970827,134.774596 L597.600894,135.221053 L599.245776,135.661348 C599.521115,135.734261 599.797038,135.80695 600.073529,135.879433 L603.575041,136.868735 L605.906341,137.539846 L607.668301,138.06027 L608.929112,138.443108 L609.740577,138.69553 L610.913911,139.070971 L611.666742,139.319726 L612.395944,139.567722 L613.101414,139.815365 L613.783052,140.063058 L614.440756,140.311206 C614.548374,140.352624 614.65499,140.394078 614.760602,140.435577 L615.382218,140.685167 C615.483808,140.726876 615.58439,140.768646 615.683962,140.810486 L616.269261,141.062428 L616.830223,141.316444 L617.366747,141.572938 L617.878732,141.832315 C621.126662,143.528516 622.813025,145.433083 622.813025,148.046099 L622.813025,148.56383 C622.813025,153.48227 618.678571,156.070922 610.151261,156.070922 C596.440715,156.070922 580.178478,151.190806 564.881159,141.650754 L564.141733,141.185503 C564.093732,141.155032 564.040729,141.123143 563.983488,141.090874 L563.79981,140.993962 L563.595278,140.900988 C562.919404,140.619369 561.998701,140.490551 561.487311,141.403508 L551.779214,170.769329 L551.450065,171.738253 C550.79398,173.603357 552.142953,174.923294 552.801936,175.310151 C570.051776,185.436717 589.878719,190.5 609.892857,190.5 Z M740.083086,182.5 L740.083086,139.826518 C740.083086,139.577805 740.175768,139.338018 740.343042,139.15396 L757.55884,120.210705 C757.930284,119.80199 758.562728,119.771776 758.971443,120.143219 C759.02977,120.196228 759.081626,120.255946 759.125931,120.32113 L802.916375,184.748531 C803.661045,185.844139 804.899841,186.5 806.224563,186.5 L856.418355,186.5 C858.627494,186.5 860.418355,184.709139 860.418355,182.5 C860.418355,181.694156 860.174957,180.907101 859.720045,180.241939 L793.703389,83.7137554 C793.445031,83.3359897 793.476098,82.831043 793.778816,82.4877974 L855.815462,12.1457707 C857.276681,10.488926 857.118095,7.96123597 855.46125,6.50001714 C854.730545,5.8555868 853.78976,5.5 852.81548,5.5 L804.406558,5.5 C803.233698,5.5 802.119934,6.01475249 801.35994,6.90806657 L741.844741,76.8635966 C741.486869,77.2842468 740.855753,77.3351391 740.435103,76.9772678 C740.211774,76.7872693 740.083086,76.5088283 740.083086,76.2156133 L740.083086,9.5 C740.083086,7.290861 738.292225,5.5 736.083086,5.5 L694,5.5 C691.790861,5.5 690,7.290861 690,9.5 L690,182.5 C690,184.709139 691.790861,186.5 694,186.5 L736.083086,186.5 C738.292225,186.5 740.083086,184.709139 740.083086,182.5 Z M928,182.5 L928,75.0824946 C928,72.8733556 926.209139,71.0824946 924,71.0824946 L883,71.0824946 C880.790861,71.0824946 879,72.8733556 879,75.0824946 L879,182.5 C879,184.709139 880.790861,186.5 883,186.5 L924,186.5 C926.209139,186.5 928,184.709139 928,182.5 Z M1013.35092,189.5 C1025.71919,189.5 1036.40257,186.764504 1044.83085,182.622854 L1045.44285,182.317168 L1045.60937,182.227026 L1045.78895,182.119754 C1046.52796,181.653073 1047.48285,180.715298 1047.48285,178.586712 L1047.48285,145.854246 C1047.48285,144.165121 1046.13184,143.992466 1045.13243,144.162007 L1044.90881,144.206672 C1044.87284,144.21495 1044.83758,144.223601 1044.80314,144.232558 L1044.60696,144.289433 C1044.54533,144.309258 1044.48771,144.329772 1044.43489,144.35044 L1044.35935,144.38149 C1039.37124,146.413468 1034.2066,147.648041 1028.86544,147.648041 C1019.8153,147.648041 1015.41953,143.514514 1015.41953,133.697388 L1015.41953,87.1618287 C1015.41953,86.609544 1015.86724,86.1618287 1016.41953,86.1618287 L1044,86.1618287 C1046.20914,86.1618287 1048,84.3709677 1048,82.1618287 L1048,50.8933237 C1048,48.6841847 1046.20914,46.8933237 1044,46.8933237 L1016.41953,46.8933237 C1015.86724,46.8933237 1015.41953,46.4456084 1015.41953,45.8933237 L1015.41953,15.5 C1015.41953,13.290861 1013.62866,11.5 1011.41953,11.5 L970.548813,11.5 C968.339674,11.5 966.548813,13.290861 966.548813,15.5 L966.548813,45.8933237 C966.548813,46.4456084 966.101097,46.8933237 965.548813,46.8933237 L954,46.8933237 C951.790861,46.8933237 950,48.6841847 950,50.8933237 L950,82.1618287 C950,84.3709677 951.790861,86.1618287 954,86.1618287 L965.548813,86.1618287 C966.101097,86.1618287 966.548813,86.609544 966.548813,87.1618287 L966.548813,143.256168 C966.548813,176.582729 983.873351,189.5 1013.35092,189.5 Z"></path></g><g transform="translate(0.000000, 0.116667)"><g transform="translate(207.496510, 125.867994) rotate(2.000000) translate(-207.496510, -125.867994) translate(4.492344, 7.592994)"><path d="M375.877049,0.215696421 C396.323202,2.72616833 406.051387,24.5382319 405.906977,53.3345184 L406.008536,53.2533299 C372.459299,80.3556122 306.390178,98.8959782 241.480649,63.6383437 L241.54818,63.541494 C251.115204,68.597871 261.22583,72.497547 273.113127,73.9571235 C287.676144,75.7452372 299.377666,67.7418812 309.994197,56.407445 L310.7507,55.5922645 C310.876484,55.4554859 311.002121,55.3182571 311.127612,55.1805889 L311.878849,54.3493941 L311.878849,54.3493941 L312.626754,53.508177 L312.626754,53.508177 L313.371473,52.657461 L313.371473,52.657461 L314.113149,51.7977691 C314.236516,51.6537682 314.359762,51.5094151 314.482891,51.3647207 L315.220272,50.492546 L315.220272,50.492546 L315.95497,49.6127035 L315.95497,49.6127035 L316.84752,48.5301073 C316.995978,48.3488419 317.14429,48.1671732 317.29246,47.9851212 L318.40118,46.6128503 L318.40118,46.6128503 L319.50512,45.2280542 L320.385172,44.1124446 L321.262753,42.9909538 L322.138122,41.8645309 L323.447601,40.1677244 L325.69509,37.2337517 L328.406356,33.6851504 L330.104566,31.4737425 L331.379227,29.8266632 L332.655668,28.1927616 L333.508026,27.1122995 L334.361787,26.0399213 L335.217197,24.9765177 L336.074499,23.9229795 L336.93394,22.8801977 L337.623197,22.0543153 L337.623197,22.0543153 L338.314104,21.2363432 L338.314104,21.2363432 L339.006787,20.4267375 L339.006787,20.4267375 L339.701372,19.6259542 C339.817302,19.4932508 339.933316,19.3609341 340.049417,19.2290135 L340.747089,18.442319 C340.863549,18.3120208 340.980101,18.1821378 341.096748,18.0526793 L341.79779,17.2810999 C342.148901,16.897934 342.500914,16.5187606 342.853898,16.1438363 L343.561183,15.3997292 C343.915494,15.0305844 344.270824,14.6658598 344.627243,14.305812 L345.341555,13.5920278 C354.408432,4.63167253 364.204592,-1.21750098 375.877049,0.215696421 Z" fill="#AEBFFF"></path><path d="M161.770583,170.547738 L161.84041,170.624548 C153.212104,166.551895 144.24466,163.480101 134.263015,162.254509 C123.659479,160.952559 114.466007,165.368171 105.981333,172.605536 L105.312951,173.182717 C104.979483,173.474186 104.64709,173.769932 104.315731,174.069779 L103.654375,174.674886 L103.654375,174.674886 L102.995697,175.29061 C102.447892,175.808048 101.902795,176.336216 101.360208,176.874288 L100.710294,177.524675 L100.710294,177.524675 L100.062712,178.184255 L100.062712,178.184255 L99.4173845,178.852709 C99.3100136,178.96484 99.2027335,179.077327 99.0955426,179.190165 L98.4534543,179.871338 C98.3466136,179.985549 98.2398589,180.100097 98.1331886,180.214975 L97.3726713,181.041061 C97.1196294,181.318236 96.8670443,181.597193 96.6148944,181.877844 L95.8597287,182.72479 C95.7340782,182.866765 95.608531,183.009141 95.4830846,183.151907 L94.731593,184.013097 L93.9823892,184.883113 L93.2353436,185.761423 L92.490327,186.647492 L92.1185391,187.093269 L92.1185391,187.093269 L91.2024752,188.201264 L90.7454158,188.758923 L89.8330904,189.88094 L89.3777634,190.445045 L88.4686288,191.578821 L87.5613172,192.719182 L86.2032351,194.439867 L84.3965671,196.747775 L80.3024344,202.005615 L78.949396,203.735743 L77.5946857,205.456843 L76.6902108,206.597551 L75.330888,208.296064 L74.4225774,209.418574 L73.5123064,210.532044 L72.5998317,211.63547 L71.6849099,212.727847 L70.9694154,213.571583 L70.2521684,214.407509 L69.5330533,215.235146 L68.8119548,216.054019 L68.0887571,216.863649 L67.3633448,217.663559 L66.6356025,218.453273 L66.2708214,218.844158 L66.2708214,218.844158 L65.5393672,219.617683 L64.9302762,220.25108 L64.9302762,220.25108 L64.3193151,220.876359 L64.3193151,220.876359 L63.7064176,221.493246 C63.3994738,221.799546 63.0917791,222.102597 62.7832963,222.402246 L62.1652691,222.996961 L62.1652691,222.996961 L61.5450744,223.58233 C61.4415243,223.679098 61.3378812,223.775465 61.2341436,223.871425 L60.6105738,224.442264 C60.1940904,224.81951 59.776052,225.190072 59.3563703,225.553584 L58.7256045,226.09352 C58.6202678,226.182613 58.5148256,226.271254 58.4092767,226.359438 L57.7746899,226.883002 C49.826056,233.357779 41.2610451,237.194553 31.4990938,235.995936 C11.228267,233.506992 1.10292483,212.127979 0.591081538,183.756083 L1.73976389e-12,184.300757 C38.7599925,148.081061 104.696743,143.264562 161.770583,170.547738 Z" fill="#3358CC"></path><path d="M256.074321,212.727064 C238.613411,210.309671 224.262278,204.984739 211.508193,198.646571 L210.353089,198.067635 C209.969492,197.873761 209.58732,197.67901 209.206531,197.483433 L208.068267,196.894281 L206.656715,196.151362 L206.656715,196.151362 L205.257235,195.401821 L204.146011,194.797834 L202.767017,194.037929 L202.767017,194.037929 L201.398713,193.27313 L200.311436,192.658184 L199.230432,192.040818 L197.620136,191.110923 L195.492675,189.865545 L195.492675,189.865545 L193.794915,188.859895 L192.109418,187.85298 L189.601863,186.343128 L183.828996,182.845666 L182.194942,181.858897 L180.15912,180.636809 L178.128868,179.429767 C172.720463,176.23334 167.349519,173.224902 161.840312,170.624502 L161.770583,170.547738 C105.267481,143.537393 40.0778412,147.987941 1.17091676,183.223588 L0.591068889,183.755382 C-0.61981987,116.613766 52.0067573,10.3111735 151.420544,22.5176516 C168.836212,24.6560268 182.794248,29.6614615 194.993697,35.7655587 L196.081529,36.3150842 C196.442603,36.499207 196.802155,36.6842617 197.160231,36.8702014 L198.230072,37.4306279 L198.761755,37.7127441 L198.761755,37.7127441 L199.818815,38.2806057 L200.867694,38.8530711 L200.867694,38.8530711 L201.908661,39.4298582 L202.426263,39.7197842 L202.426263,39.7197842 L203.712135,40.4487857 L203.712135,40.4487857 L204.986811,41.1833272 L205.998847,41.7745786 L207.004328,42.3687406 L208.003526,42.9655309 L208.996711,43.5646672 L209.984154,44.1658674 L210.966127,44.7688492 L211.942901,45.3733304 L213.533633,46.3667862 L214.324406,46.8643523 L215.897513,47.8603834 L217.460363,48.8565771 L224.398284,53.3081228 L225.926073,54.2829853 L227.45137,55.2499283 L229.356307,56.4455762 L231.261549,57.6244787 C234.424385,59.565348 237.59812,61.4270346 240.830719,63.1596166 L242.045797,63.8031855 C306.164051,98.3871368 371.221738,80.6570654 404.994721,54.0619123 L405.906976,53.3346033 C405.571936,120.134827 352.110084,224.518773 256.074321,212.727064 Z" fill="#577FFB"></path></g></g></g></g></svg></div></span></a></div></div></div><style data-emotion="css 1hq7ll">.css-1hq7ll{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1hq7ll{-webkit-order:3;-ms-flex-order:3;order:3;padding:0 8px;margin-top:16px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 1024px){.css-1hq7ll{-webkit-order:2;-ms-flex-order:2;order:2;padding:0 12px;margin-top:24px;-webkit-flex-basis:41.66666666666667%;-ms-flex-preferred-size:41.66666666666667%;flex-basis:41.66666666666667%;max-width:41.66666666666667%;}}</style><div class="css-1hq7ll"><style data-emotion="css 4b375e">.css-4b375e{height:100%;}</style><style data-emotion="css qxsyaw">.css-qxsyaw{height:100%;}@media screen{.css-qxsyaw{display:none;}}@media screen and (min-width: 480px){.css-qxsyaw{display:none;}}@media screen and (min-width: 768px){.css-qxsyaw{display:none;}}@media screen and (min-width: 1024px){.css-qxsyaw{display:block;}}@media screen and (min-width: 1440px){.css-qxsyaw{display:block;}}</style><div class="css-qxsyaw"><style data-emotion="css r0pew1">.css-r0pew1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;margin-left:calc(-40px/2);margin-right:calc(-40px/2);}</style><div class="css-r0pew1"><style data-emotion="css 1xqatdf">.css-1xqatdf{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-left:calc(40px/2);margin-right:calc(40px/2);}</style><div class="css-1xqatdf"><style data-emotion="css uofeth">.css-uofeth{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;margin-left:calc(-40px/2);margin-right:calc(-40px/2);}</style><div class="css-uofeth"><div class="css-1xqatdf"><style data-emotion="css zqdlhl">.css-zqdlhl{padding:4px;}</style><div class="css-zqdlhl"><style data-emotion="css sta6l3">.css-sta6l3{display:inline-block;color:#535353;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-sta6l3{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-sta6l3{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-sta6l3:hover:not(:disabled){color:#535353;-webkit-text-decoration:none;text-decoration:none;}.css-sta6l3:active:not(:disabled){color:#0A0A0A;-webkit-text-decoration:none;text-decoration:none;}</style><a href="/about/introduction/" class="css-sta6l3"><span class="css-17x5lw"><style data-emotion="css 15qd7nt">.css-15qd7nt{font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;color:#535353;box-sizing:border-box;}.css-15qd7nt::before{content:'';margin-bottom:-0.403em;display:block;}.css-15qd7nt::after{content:'';margin-top:-0.4em;display:block;}</style><div class="css-15qd7nt">About</div></span></a></div></div><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/getting-started/overview/" class="css-sta6l3"><span class="css-17x5lw"><div class="css-15qd7nt">Guides</div></span></a></div></div><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/theme/overview/" class="css-sta6l3"><span class="css-17x5lw"><div class="css-15qd7nt">Theme</div></span></a></div></div><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/components/overview/" class="css-sta6l3"><span class="css-17x5lw"><style data-emotion="css 14mo9on">.css-14mo9on{font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;color:#0A0A0A;box-sizing:border-box;}.css-14mo9on::before{content:'';margin-bottom:-0.403em;display:block;}.css-14mo9on::after{content:'';margin-top:-0.4em;display:block;}</style><div aria-current="true" class="css-14mo9on">Components</div></span></a></div></div></div></div></div></div><div class="css-1xvxlxw"><style data-emotion="css v6l5fq">.css-v6l5fq{box-sizing:border-box;position:relative;overflow:hidden;height:100%;}</style><div class="css-v6l5fq"><style data-emotion="css 6uqogc">.css-6uqogc{box-sizing:border-box;height:100%;overflow-x:auto;overflow-y:auto;scroll-behavior:smooth;}.css-6uqogc::-webkit-scrollbar{display:none;}.css-6uqogc{-ms-overflow-style:none;scrollbar-width:none;}</style><div tabindex="0" data-testid="scroll-container" class="css-6uqogc"><style data-emotion="css 1jd1r41">.css-1jd1r41{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:space-around;-ms-flex-pack:space-around;-webkit-justify-content:space-around;justify-content:space-around;margin-left:calc(-40px/2);margin-right:calc(-40px/2);}</style><div class="css-1jd1r41"><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/about/introduction/" class="css-sta6l3"><span class="css-17x5lw"><div class="css-15qd7nt">About</div></span></a></div></div><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/getting-started/overview/" class="css-sta6l3"><span class="css-17x5lw"><div class="css-15qd7nt">Guides</div></span></a></div></div><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/theme/overview/" class="css-sta6l3"><span class="css-17x5lw"><div class="css-15qd7nt">Theme</div></span></a></div></div><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/components/overview/" class="css-sta6l3"><span class="css-17x5lw"><div aria-current="true" class="css-14mo9on">Components</div></span></a></div></div></div></div></div></div></div><style data-emotion="css 1q4q9om">.css-1q4q9om{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1q4q9om{-webkit-order:2;-ms-flex-order:2;order:2;padding:0 8px;margin-top:16px;margin-left:41.66666666666667%;-webkit-flex-basis:8.333333333333334%;-ms-flex-preferred-size:8.333333333333334%;flex-basis:8.333333333333334%;max-width:8.333333333333334%;}}@media screen and (min-width: 1024px){.css-1q4q9om{-webkit-order:3;-ms-flex-order:3;order:3;padding:0 12px;margin-top:24px;margin-left:0;}}</style><div class="css-1q4q9om"><style data-emotion="css vyizc4">.css-vyizc4{margin:0;cursor:pointer;}@media screen and (prefers-reduced-motion: no-preference){.css-vyizc4{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-vyizc4{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><style data-emotion="css 13nqpes">.css-13nqpes{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;width:48px;height:48px;padding:12px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#F4F4F4;border-radius:50%;margin:0;cursor:pointer;}.css-13nqpes svg{width:24px;height:24px;}.css-13nqpes:hover:not(:disabled){background-color:#CCCCCC;}.css-13nqpes:active:not(:disabled){background-color:#CCCCCC;}@media screen and (prefers-reduced-motion: no-preference){.css-13nqpes{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-13nqpes{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><button data-testid="theme-switch-button" type="button" title="Enable Dark Theme" aria-label="Enable Dark Theme" aria-pressed="false" class="css-13nqpes"><style data-emotion="css bptyib">.css-bptyib{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-left:calc(-8px/2);margin-right:calc(-8px/2);}</style><div class="css-bptyib"><style data-emotion="css 1yztr03">.css-1yztr03{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-left:calc(8px/2);margin-right:calc(8px/2);}</style><div class="css-1yztr03"><style data-emotion="css 1sb5vzf">.css-1sb5vzf{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1sb5vzf{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1sb5vzf{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1sb5vzf.css-1sb5vzf{width:24px;height:24px;}</style><svg class="css-1sb5vzf" viewBox="0 0 17 17" fill="currentColor" role="img" xmlns="http://www.w3.org/2000/svg"><title>Dark icon</title><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7349 0C12.9152 0 13.0614 0.146193 13.0614 0.326531C13.0614 1.76923 14.2309 2.93878 15.6736 2.93878C15.854 2.93878 16.0002 3.08497 16.0002 3.26531V3.59184C16.0002 3.77217 15.854 3.91837 15.6736 3.91837C14.2309 3.91837 13.0614 5.08791 13.0614 6.53061C13.0614 6.71095 12.9152 6.85714 12.7349 6.85714H12.4083C12.228 6.85714 12.0818 6.71095 12.0818 6.53061C12.0818 5.08791 10.9123 3.91837 9.46956 3.91837C9.28922 3.91837 9.14303 3.77217 9.14303 3.59184V3.26531C9.14303 3.08497 9.28922 2.93878 9.46956 2.93878C10.9123 2.93878 12.0818 1.76923 12.0818 0.326531C12.0818 0.146193 12.228 0 12.4083 0H12.7349ZM14.8384 9.78689C15.2381 9.50799 15.8414 9.80867 15.7022 10.2758C14.7157 13.5862 11.6485 16 8.01747 16C3.58955 16 0 12.4105 0 7.98253C0 4.35151 2.41376 1.28426 5.72424 0.29782C6.19133 0.158637 6.49201 0.761872 6.21311 1.16157C5.51277 2.16524 5.10203 3.38598 5.10203 4.70265C5.10203 8.12423 7.87577 10.898 11.2973 10.898C12.614 10.898 13.8348 10.4872 14.8384 9.78689Z" fill="#577FFB"></path></svg></div></div></button></div></div></div></header><style data-emotion="css 6xqfiz">.css-6xqfiz{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-top:64px;}@media screen and (min-width: 1024px){.css-6xqfiz{padding-left:276px;padding-top:80px;}}</style><div class="css-6xqfiz"><style data-emotion="css 1ad339w">.css-1ad339w{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;background-color:#FFFFFF;overflow:hidden;}@media screen and (max-width: 1023px){.css-1ad339w{padding-top:48px;}}@media screen and (min-width: 1024px){.css-1ad339w{padding-top:12px;}}</style><main class="css-1ad339w"><style data-emotion="css 1jsu24h">.css-1jsu24h{padding-top:64px;padding-bottom:64px;}</style><div class="css-1jsu24h"><style data-emotion="css 8atxkm">.css-8atxkm{width:100%;max-width:1920px;margin:0 auto;}</style><div class="css-8atxkm"><style data-emotion="css 1jls4h1">.css-1jls4h1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1jls4h1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1jls4h1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1jls4h1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1jls4h1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1jls4h1{margin:-0px 12px 0 12px;}}</style><div class="css-1jls4h1"><style data-emotion="css 1uhwsex">.css-1uhwsex{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1uhwsex{padding:0 8px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 1024px){.css-1uhwsex{padding:0 12px;}}</style><div class="css-1uhwsex"><style data-emotion="css 2r06oq">@media screen and (max-width: 767px){.css-2r06oq{margin-bottom:0;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-2r06oq{margin-bottom:12px;}}@media screen and (min-width: 1024px){.css-2r06oq{margin-bottom:40px;}}</style><div class="css-2r06oq"></div><style data-emotion="css 1ndfc0u">.css-1ndfc0u{margin-top:-24px;padding-top:24px;}</style><section id="introduction" data-toc-indexed="Introduction" class="css-1ndfc0u"><div class="css-8atxkm"><style data-emotion="css 16g593b">.css-16g593b{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-16g593b{margin:-0px -8px 0 -8px;}}@media screen and (min-width: 480px){.css-16g593b{margin:-0px -8px 0 -8px;}}@media screen and (min-width: 768px){.css-16g593b{margin:-0px -8px 0 -8px;}}@media screen and (min-width: 1024px){.css-16g593b{margin:-0px -12px 0 -12px;}}@media screen and (min-width: 1440px){.css-16g593b{margin:-0px -12px 0 -12px;}}</style><div class="css-16g593b"><style data-emotion="css 12v76db">.css-12v76db{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-12v76db{padding:0 8px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-12v76db{margin-left:8.333333333333334%;-webkit-flex-basis:83.33333333333334%;-ms-flex-preferred-size:83.33333333333334%;flex-basis:83.33333333333334%;max-width:83.33333333333334%;}}@media screen and (min-width: 1024px){.css-12v76db{padding:0 12px;}}@media screen and (min-width: 1440px){.css-12v76db{-webkit-flex-basis:66.66666666666667%;-ms-flex-preferred-size:66.66666666666667%;flex-basis:66.66666666666667%;max-width:66.66666666666667%;}}</style><div class="css-12v76db"><style data-emotion="css c42g5g">@media screen and (max-width: 767px){.css-c42g5g{margin-bottom:32px;}}@media screen and (min-width: 768px){.css-c42g5g{margin-bottom:40px;}}</style><div class="css-c42g5g"><style data-emotion="css 24uh7l">.css-24uh7l{margin:0;color:#577FFB;}.css-24uh7l svg{fill:#577FFB;}@media screen and (max-width: 767px){.css-24uh7l{font-family:"Poppins",sans-serif;font-size:18px;line-height:20.25px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-24uh7l::before{content:'';margin-bottom:-0.2155em;display:block;}.css-24uh7l::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 768px){.css-24uh7l{font-family:"Poppins",sans-serif;font-size:22px;line-height:24.75px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-24uh7l::before{content:'';margin-bottom:-0.2155em;display:block;}.css-24uh7l::after{content:'';margin-top:-0.2125em;display:block;}}</style><p class="css-24uh7l">Navigation</p></div><style data-emotion="css 177d1no">@media screen and (max-width: 767px){.css-177d1no{margin-bottom:24px;}}@media screen and (min-width: 768px){.css-177d1no{margin-bottom:40px;}}</style><div class="css-177d1no"><style data-emotion="css 1xpja04">.css-1xpja04{margin:0;color:#0A0A0A;}.css-1xpja04 svg{fill:#0A0A0A;}@media screen and (max-width: 767px){.css-1xpja04{font-family:"Poppins",sans-serif;font-size:32px;line-height:36px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1xpja04::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1xpja04::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1xpja04{font-family:"Poppins",sans-serif;font-size:36px;line-height:40.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1xpja04::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1xpja04::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1024px){.css-1xpja04{font-family:"Poppins",sans-serif;font-size:40px;line-height:45px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1xpja04::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1xpja04::after{content:'';margin-top:-0.2125em;display:block;}}</style><h1 class="css-1xpja04">Menu</h1></div></div><style data-emotion="css 15fgmbf">.css-15fgmbf{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-15fgmbf{padding:0 8px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-15fgmbf{margin-left:8.333333333333334%;-webkit-flex-basis:66.66666666666667%;-ms-flex-preferred-size:66.66666666666667%;flex-basis:66.66666666666667%;max-width:66.66666666666667%;}}@media screen and (min-width: 1024px){.css-15fgmbf{padding:0 12px;-webkit-flex-basis:83.33333333333334%;-ms-flex-preferred-size:83.33333333333334%;flex-basis:83.33333333333334%;max-width:83.33333333333334%;}}@media screen and (min-width: 1440px){.css-15fgmbf{-webkit-flex-basis:66.66666666666667%;-ms-flex-preferred-size:66.66666666666667%;flex-basis:66.66666666666667%;max-width:66.66666666666667%;}}</style><div class="css-15fgmbf"><style data-emotion="css 1a1fasq">@media screen and (max-width: 767px){.css-1a1fasq{margin-bottom:40px;}}@media screen and (min-width: 768px){.css-1a1fasq{margin-bottom:48px;}}</style><div class="css-1a1fasq"><style data-emotion="css 6jeh1s">.css-6jeh1s{margin:0;color:#2E2E2E;}.css-6jeh1s svg{fill:#2E2E2E;}@media screen and (max-width: 767px){.css-6jeh1s{font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-6jeh1s::before{content:'';margin-bottom:-0.403em;display:block;}.css-6jeh1s::after{content:'';margin-top:-0.4em;display:block;}}@media screen and (min-width: 768px){.css-6jeh1s{font-family:"Poppins",sans-serif;font-size:20px;line-height:30px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-6jeh1s::before{content:'';margin-bottom:-0.403em;display:block;}.css-6jeh1s::after{content:'';margin-top:-0.4em;display:block;}}</style><p class="css-6jeh1s">A Menu displays a list of navigational items. They are displayed either at the top of a screen, or at the side where space allows.</p></div></div><div class="css-12v76db"><style data-emotion="css 1ixemgk">.css-1ixemgk{border-radius:12px;overflow:hidden;}@media screen and (max-width: 767px){.css-1ixemgk{margin-bottom:0;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1ixemgk{margin-bottom:12px;}}@media screen and (min-width: 1024px){.css-1ixemgk{margin-bottom:4px;}}</style><div class="css-1ixemgk"><style data-emotion="css xcdytv">.css-xcdytv{width:100%;height:auto;}</style><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div></div><div class="css-12v76db"><style data-emotion="css 38y4ob">.css-38y4ob{margin-bottom:32px;}</style><div class="css-38y4ob"></div><style data-emotion="css mvfmea">@media screen and (max-width: 767px){.css-mvfmea{margin-bottom:48px;}}@media screen and (min-width: 768px){.css-mvfmea{margin-bottom:24px;}}</style><div class="css-mvfmea"><style data-emotion="css 1nlep1q">@media screen{.css-1nlep1q{display:none;}}@media screen and (min-width: 480px){.css-1nlep1q{display:none;}}@media screen and (min-width: 768px){.css-1nlep1q{display:block;}}@media screen and (min-width: 1024px){.css-1nlep1q{display:block;}}@media screen and (min-width: 1440px){.css-1nlep1q{display:block;}}</style><div class="css-1nlep1q"><style data-emotion="css 1bq9n3y">.css-1bq9n3y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}</style><div class="css-1bq9n3y"><style data-emotion="css 14f0ndj">.css-14f0ndj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}</style><div class="css-14f0ndj"><style data-emotion="css x5nivz">.css-x5nivz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;margin-top:calc(-16px/2);margin-bottom:calc(-16px/2);}</style><div class="css-x5nivz"><style data-emotion="css zodxql">.css-zodxql{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-top:calc(16px/2);margin-bottom:calc(16px/2);}</style><div class="css-zodxql"><style data-emotion="css ts9mdp">.css-ts9mdp{font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-ts9mdp::before{content:'';margin-bottom:-0.403em;display:block;}.css-ts9mdp::after{content:'';margin-top:-0.4em;display:block;}</style><section class="css-ts9mdp"><style data-emotion="css 5gd387">.css-5gd387{display:inline;font:inherit;margin:0;color:#0A0A0A;}.css-5gd387 svg{fill:#0A0A0A;}</style><h1 class="nk-headline-heading css-5gd387">Status</h1></section></div><div class="css-zodxql"><style data-emotion="css 1u8h2f4">.css-1u8h2f4{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:24px;padding:4px 8px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;color:#FFFFFF;background-color:#577FFB;border-radius:8px;white-space:nowrap;}.css-1u8h2f4 svg{width:16px;height:16px;}.css-1u8h2f4 svg{fill:#FFFFFF;}</style><div data-testid="flag" class="css-1u8h2f4"><style data-emotion="css m556v">.css-m556v{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-left:calc(-4px/2);margin-right:calc(-4px/2);}</style><div class="css-m556v"><style data-emotion="css 14dqn90">.css-14dqn90{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-left:calc(4px/2);margin-right:calc(4px/2);}</style><div class="css-14dqn90"><div class="css-zqdlhl"><style data-emotion="css fdydp7">.css-fdydp7{margin:0;font-family:"Poppins",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-fdydp7::before{content:'';margin-bottom:-0.403em;display:block;}.css-fdydp7::after{content:'';margin-top:-0.4em;display:block;}</style><p class="css-fdydp7">Supported</p></div></div></div></div></div></div><style data-emotion="css sbdy65">.css-sbdy65{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}</style><div class="css-sbdy65"><style data-emotion="css x33mki">@media screen and (min-width: 768px){.css-x33mki{margin-right:32px;}}</style><div class="css-x33mki"></div><style data-emotion="css 1iuisv4">.css-1iuisv4{border-style:solid;border-color:#E4E4E4;border-width:1px;border-width:0px;margin:0;border-left-width:1px;display:inline-block;height:100%;}</style><hr data-testid="divider" aria-hidden="true" class="css-1iuisv4"/><div class="css-x33mki"></div></div><style data-emotion="css 6pevaf">.css-6pevaf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;margin-top:calc(-24px/2);margin-bottom:calc(-24px/2);}</style><div class="css-6pevaf"><style data-emotion="css 4niat4">.css-4niat4{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-top:calc(24px/2);margin-bottom:calc(24px/2);}</style><div class="css-4niat4"><section class="css-ts9mdp"><h1 class="nk-headline-heading css-5gd387">Introduced</h1></section></div><div class="css-4niat4"><style data-emotion="css g09sk7">.css-g09sk7{display:inline-block;color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}@media screen and (prefers-reduced-motion: no-preference){.css-g09sk7{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-g09sk7{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-g09sk7 svg{fill:#577FFB;}.css-g09sk7:hover:not(:disabled){color:#3358CC;-webkit-text-decoration:underline;text-decoration:underline;}.css-g09sk7:hover:not(:disabled) svg{fill:#3358CC;}.css-g09sk7:active:not(:disabled){color:#213A82;-webkit-text-decoration:underline;text-decoration:underline;}.css-g09sk7:active:not(:disabled) svg{fill:#213A82;}.css-g09sk7:visited:not(:disabled){color:#5E44E4;-webkit-text-decoration:underline;text-decoration:underline;}.css-g09sk7:visited:not(:disabled) svg{fill:#5E44E4;}.css-g09sk7:visited:hover:not(:disabled){color:#5E44E4;-webkit-text-decoration:underline;text-decoration:underline;}.css-g09sk7:visited:hover:not(:disabled) svg{fill:#5E44E4;}</style><a href="https://github.com/newscorp-ghfb/ncu-newskit/releases/tag/v3.3.0" target="_blank" class="css-g09sk7"><span class="css-17x5lw"><style data-emotion="css 13sihnu">.css-13sihnu{margin:0;font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-13sihnu::before{content:'';margin-bottom:-0.403em;display:block;}.css-13sihnu::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-13sihnu">v3.3.0</span></span></a></div></div></div><style data-emotion="css qd6fs9">.css-qd6fs9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;margin-left:calc(-16px/2);margin-right:calc(-16px/2);}</style><div class="css-qd6fs9"><style data-emotion="css 13p2hek">.css-13p2hek{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-left:calc(16px/2);margin-right:calc(16px/2);-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}</style><div class="css-13p2hek"><style data-emotion="css bqs04">.css-bqs04{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:44px;width:100%;padding:8px 12px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:transparent;border-style:solid;border-color:#535353;border-width:1px;border-radius:8px;color:#2E2E2E;margin:0;cursor:pointer;}.css-bqs04 svg{width:16px;height:16px;}.css-bqs04 svg{fill:#2E2E2E;}.css-bqs04:hover:not(:disabled){background-color:#F4F4F4;border-color:#2E2E2E;}.css-bqs04:active:not(:disabled){background-color:#CCCCCC;border-color:#0A0A0A;}.css-bqs04:disabled{border-color:#F4F4F4;color:#C0C0C0;}.css-bqs04:disabled svg{fill:#C0C0C0;}@media screen and (prefers-reduced-motion: no-preference){.css-bqs04{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-bqs04{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><a data-testid="buttonLink" href="https://github.com/newscorp-ghfb/newskit/tree/main/src/menu" target="_blank" class="css-bqs04"><div class="css-bptyib"><div class="css-1yztr03"><style data-emotion="css e6cuxb">.css-e6cuxb{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-e6cuxb{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-e6cuxb{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><svg class="css-e6cuxb" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="nonzero" d="M11.9990792,2 C6.47773105,2 2,6.47565999 2,11.9970521 C2,16.4137976 4.86503576,20.1603908 8.83876117,21.4822847 C9.33908346,21.5743385 9.5214095,21.2656512 9.5214095,21.000536 C9.5214095,20.7636506 9.512815,20.1346157 9.50790386,19.3006075 C6.72635747,19.904481 6.13947635,17.9603029 6.13947635,17.9603029 C5.68458209,16.8053335 5.02894503,16.4978735 5.02894503,16.4978735 C4.12099819,15.878044 5.09770097,15.8903179 5.09770097,15.8903179 C6.10141502,15.9608925 6.62936247,16.9207077 6.62936247,16.9207077 C7.52134811,18.4481885 8.97013414,18.0069436 9.53982627,17.7510338 C9.63068234,17.1054292 9.88913104,16.6647979 10.174591,16.415025 C7.95414224,16.1627974 5.6195095,15.3048551 5.6195095,11.4741861 C5.6195095,10.3830406 6.00933116,9.49011794 6.64900703,8.79173579 C6.54587311,8.53889444 6.20270727,7.52200584 6.74722981,6.14610707 C6.74722981,6.14610707 7.5864207,5.87730972 9.4968538,7.17097368 C10.2943,6.94881697 11.150066,6.8383523 12.0003069,6.83405645 C12.849934,6.8383523 13.7050861,6.94881697 14.5037601,7.17097368 C16.4129654,5.87730972 17.2509285,6.14610707 17.2509285,6.14610707 C17.7966788,7.52200584 17.453513,8.53889444 17.350993,8.79173579 C17.9918966,9.49011794 18.3786488,10.3830406 18.3786488,11.4741861 C18.3786488,15.3146742 16.0403327,16.1597289 13.8131312,16.407047 C14.1716443,16.7157344 14.4914822,17.3257448 14.4914822,18.2585575 C14.4914822,19.5945663 14.4792044,20.6728241 14.4792044,21.000536 C14.4792044,21.2681059 14.6596888,21.5792481 15.1667639,21.481671 C19.1374198,20.1567087 22,16.4125702 22,11.9970521 C22,6.47565999 17.5222689,2 11.9990792,2"></path></svg></div><div class="css-1yztr03"><style data-emotion="css mir38c">.css-mir38c{margin:0;font-family:"Poppins",sans-serif;font-size:12px;line-height:18px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;}.css-mir38c::before{content:'';margin-bottom:-0.403em;display:block;}.css-mir38c::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-mir38c">View code</span></div></div></a></div><style data-emotion="css 1jnyopt">.css-1jnyopt{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-left:calc(16px/2);margin-right:calc(16px/2);}</style><div class="css-1jnyopt"></div></div></div><style data-emotion="css 16in0m0">.css-16in0m0{margin-bottom:24px;}</style><div class="css-16in0m0"></div><style data-emotion="css 1a12fxg">.css-1a12fxg{border-style:solid;border-color:#E4E4E4;border-width:1px;border-width:0px;margin:0;border-top-width:1px;width:100%;}</style><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div><div class="css-1k3e0au"><div class="css-6pevaf"><style data-emotion="css 1782q00">.css-1782q00{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-top:calc(24px/2);margin-bottom:calc(24px/2);-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}</style><div class="css-1782q00"><style data-emotion="css 1divpvu">.css-1divpvu{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1divpvu{padding:0 8px;-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;}}@media screen and (min-width: 1024px){.css-1divpvu{padding:0 12px;}}</style><div class="css-1divpvu"><div class="css-x5nivz"><div class="css-zodxql"><section class="css-ts9mdp"><h1 class="nk-headline-heading css-5gd387">Status</h1></section></div><div class="css-zodxql"><div data-testid="flag" class="css-1u8h2f4"><div class="css-m556v"><div class="css-14dqn90"><div class="css-zqdlhl"><p class="css-fdydp7">Supported</p></div></div></div></div></div></div></div><div class="css-1divpvu"><div class="css-14f0ndj"><hr data-testid="divider" aria-hidden="true" class="css-1iuisv4"/><style data-emotion="css w6ajbs">.css-w6ajbs{margin-right:32px;}</style><div class="css-w6ajbs"></div><style data-emotion="css 18zlc2m">.css-18zlc2m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-around;-ms-flex-pack:space-around;-webkit-justify-content:space-around;justify-content:space-around;margin-top:calc(-8px/2);margin-bottom:calc(-8px/2);}.css-18zlc2m:before,.css-18zlc2m:after{content:'';display:block;}</style><div class="css-18zlc2m"></div><div class="css-6pevaf"><div class="css-4niat4"><section class="css-ts9mdp"><h1 class="nk-headline-heading css-5gd387">Introduced</h1></section></div><div class="css-4niat4"><a href="https://github.com/newscorp-ghfb/ncu-newskit/releases/tag/v3.3.0" target="_blank" class="css-g09sk7"><span class="css-17x5lw"><span class="css-13sihnu">v3.3.0</span></span></a></div></div></div></div></div><div class="css-1782q00"><div class="css-8atxkm"><style data-emotion="css 1ji12ea">.css-1ji12ea{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1ji12ea{margin:-16px -8px 0 -8px;}}@media screen and (min-width: 480px){.css-1ji12ea{margin:-16px -8px 0 -8px;}}@media screen and (min-width: 768px){.css-1ji12ea{margin:-16px -8px 0 -8px;}}@media screen and (min-width: 1024px){.css-1ji12ea{margin:-24px -12px 0 -12px;}}@media screen and (min-width: 1440px){.css-1ji12ea{margin:-24px -12px 0 -12px;}}</style><div class="css-1ji12ea"><style data-emotion="css 6gys8z">.css-6gys8z{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-6gys8z{padding:0 8px;margin-top:16px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 1024px){.css-6gys8z{padding:0 12px;margin-top:24px;}}</style><div class="css-6gys8z"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><div class="css-16in0m0"></div><a data-testid="buttonLink" href="https://github.com/newscorp-ghfb/newskit/tree/main/src/menu" target="_blank" class="css-bqs04"><div class="css-bptyib"><div class="css-1yztr03"><svg class="css-e6cuxb" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="nonzero" d="M11.9990792,2 C6.47773105,2 2,6.47565999 2,11.9970521 C2,16.4137976 4.86503576,20.1603908 8.83876117,21.4822847 C9.33908346,21.5743385 9.5214095,21.2656512 9.5214095,21.000536 C9.5214095,20.7636506 9.512815,20.1346157 9.50790386,19.3006075 C6.72635747,19.904481 6.13947635,17.9603029 6.13947635,17.9603029 C5.68458209,16.8053335 5.02894503,16.4978735 5.02894503,16.4978735 C4.12099819,15.878044 5.09770097,15.8903179 5.09770097,15.8903179 C6.10141502,15.9608925 6.62936247,16.9207077 6.62936247,16.9207077 C7.52134811,18.4481885 8.97013414,18.0069436 9.53982627,17.7510338 C9.63068234,17.1054292 9.88913104,16.6647979 10.174591,16.415025 C7.95414224,16.1627974 5.6195095,15.3048551 5.6195095,11.4741861 C5.6195095,10.3830406 6.00933116,9.49011794 6.64900703,8.79173579 C6.54587311,8.53889444 6.20270727,7.52200584 6.74722981,6.14610707 C6.74722981,6.14610707 7.5864207,5.87730972 9.4968538,7.17097368 C10.2943,6.94881697 11.150066,6.8383523 12.0003069,6.83405645 C12.849934,6.8383523 13.7050861,6.94881697 14.5037601,7.17097368 C16.4129654,5.87730972 17.2509285,6.14610707 17.2509285,6.14610707 C17.7966788,7.52200584 17.453513,8.53889444 17.350993,8.79173579 C17.9918966,9.49011794 18.3786488,10.3830406 18.3786488,11.4741861 C18.3786488,15.3146742 16.0403327,16.1597289 13.8131312,16.407047 C14.1716443,16.7157344 14.4914822,17.3257448 14.4914822,18.2585575 C14.4914822,19.5945663 14.4792044,20.6728241 14.4792044,21.000536 C14.4792044,21.2681059 14.6596888,21.5792481 15.1667639,21.481671 C19.1374198,20.1567087 22,16.4125702 22,11.9970521 C22,6.47565999 17.5222689,2 11.9990792,2"></path></svg></div><div class="css-1yztr03"><span class="css-mir38c">View code</span></div></div></a></div><div class="css-6gys8z"><div class="css-16in0m0"></div><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div></div></div></div></div></div><style data-emotion="css 1jgu70a">@media screen and (max-width: 767px){.css-1jgu70a{margin-bottom:0;}}@media screen and (min-width: 768px){.css-1jgu70a{margin-bottom:80px;}}</style><div class="css-1jgu70a"></div></div></div></div></section></div><div class="css-1uhwsex"><section id="interactive-demo" data-toc-indexed="Interactive Demo" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><style data-emotion="css 1lwsjcx">@media screen and (max-width: 767px){.css-1lwsjcx{margin-bottom:24px;}}@media screen and (min-width: 768px){.css-1lwsjcx{margin-bottom:32px;}}</style><div class="css-1lwsjcx"><style data-emotion="css 16vfhq">.css-16vfhq{padding:0;background-color:transparent;}</style><style data-emotion="css klpn0c">.css-klpn0c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;padding:0;background-color:transparent;}</style><div class="css-klpn0c"><style data-emotion="css w6gvpm">.css-w6gvpm{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}</style><style data-emotion="css dzecoh">.css-dzecoh{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}</style><div class="css-dzecoh"><style data-emotion="css vj7jmi">@media screen and (max-width: 767px){.css-vj7jmi{font-family:"Poppins",sans-serif;font-size:24px;line-height:27px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-vj7jmi::before{content:'';margin-bottom:-0.2155em;display:block;}.css-vj7jmi::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 768px){.css-vj7jmi{font-family:"Poppins",sans-serif;font-size:28px;line-height:31.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-vj7jmi::before{content:'';margin-bottom:-0.2155em;display:block;}.css-vj7jmi::after{content:'';margin-top:-0.2125em;display:block;}}</style><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Interactive Demo</h2></section></div></div></div><style data-emotion="css 1trj2hr">@media screen and (max-width: 1023px){.css-1trj2hr{margin-bottom:48px;}}@media screen and (min-width: 1024px){.css-1trj2hr{margin-bottom:80px;}}</style><div class="css-1trj2hr"><style data-emotion="css 1npcurr">.css-1npcurr{margin:0;color:#2E2E2E;font-family:"Poppins",sans-serif;font-size:20px;line-height:30px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1npcurr svg{fill:#2E2E2E;}.css-1npcurr::before{content:'';margin-bottom:-0.403em;display:block;}.css-1npcurr::after{content:'';margin-top:-0.4em;display:block;}</style><p class="css-1npcurr">This demo allows you to preview the Menu component, its variations, and configuration options.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-16in0m0"><style data-emotion="css 1pr6u80">.css-1pr6u80{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-shadow:0 3px 4px 2px #FFFFFF;background-color:#FFFFFF;}</style><div class="css-1pr6u80"><style data-emotion="css 145p4eu">.css-145p4eu{color:#2E2E2E;background-color:#FFFFFF;border:solid 1px;border-radius:12px 12px 0px 0px;border-color:#EBEBEB;padding:40px;min-height:280px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}</style><div data-testid="playground-element" class="css-145p4eu"><style data-emotion="css 1wc0ai4">.css-1wc0ai4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-1wc0ai4>nav{width:500px;}</style><div class="css-1wc0ai4"><style data-emotion="css pn6sws">.css-pn6sws{box-sizing:border-box;width:100%;}.css-pn6sws >ul{box-sizing:border-box;list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}.css-pn6sws li:last-of-type{margin-right:0;}</style><nav role="navigation" data-testid="menu-container" aria-label="menu" class="css-pn6sws"><ul role="list"><style data-emotion="css edy074">.css-edy074{box-sizing:border-box;margin-right:8px;}.css-edy074 >ul{box-sizing:border-box;list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><li class="nk-menu-group css-edy074"><ul><style data-emotion="css 14eejl6">.css-14eejl6{box-sizing:border-box;margin-right:8px;}</style><li class="nk-menu-item css-14eejl6"><style data-emotion="css 19wq1j1">.css-19wq1j1{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;text-align:center;}</style><style data-emotion="css t4shar">.css-t4shar{margin:0;cursor:pointer;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;text-align:center;}@media screen and (prefers-reduced-motion: no-preference){.css-t4shar{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-t4shar{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><style data-emotion="css 3ykm1i">.css-3ykm1i{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:48px;width:100%;padding:12px 16px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:transparent;border-style:solid;border-color:transparent;border-width:0 0 2px 0;color:#535353;margin:0;cursor:pointer;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;text-align:center;}.css-3ykm1i svg{width:24px;height:24px;}.css-3ykm1i svg{fill:#535353;}.css-3ykm1i:hover:not(:disabled){border-color:#577FFB;color:#2E2E2E;}.css-3ykm1i:hover:not(:disabled) svg{fill:#2E2E2E;}.css-3ykm1i:active:not(:disabled){border-color:#3358CC;color:#0A0A0A;}.css-3ykm1i:active:not(:disabled) svg{fill:#0A0A0A;}.css-3ykm1i:selected:hover:not(:disabled){border-color:#577FFB;color:#2E2E2E;}.css-3ykm1i:selected:hover:not(:disabled) svg{fill:#2E2E2E;}.css-3ykm1i:disabled{color:#C0C0C0;}.css-3ykm1i:disabled svg{fill:#C0C0C0;}@media screen and (prefers-reduced-motion: no-preference){.css-3ykm1i{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-3ykm1i{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><a data-testid="buttonLink" href="http://newskit.co.uk" class="css-3ykm1i"><div class="css-bptyib"><div class="css-1yztr03"><style data-emotion="css 4zs4vc">.css-4zs4vc{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;}.css-4zs4vc::before{content:'';margin-bottom:-0.403em;display:block;}.css-4zs4vc::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-4zs4vc">Group 1-item 1</span></div></div></a></li><li class="nk-menu-item css-14eejl6"><a data-testid="buttonLink" href="http://newskit.co.uk" class="css-3ykm1i"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Group 1-item 2</span></div></div></a></li><li class="nk-menu-item css-14eejl6"><a data-testid="buttonLink" href="http://newskit.co.uk" class="css-3ykm1i"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Group 1-item 3</span></div></div></a></li></ul></li><style data-emotion="css 1v5tfiw">.css-1v5tfiw{box-sizing:border-box;}.nk-menu-group+.css-1v5tfiw{margin-right:24px;}.nk-menu-item+.css-1v5tfiw{margin-right:8px;}</style><li role="separator" aria-hidden="true" class="css-1v5tfiw"><hr data-testid="divider" aria-hidden="true" class="css-1iuisv4"/></li><li class="nk-menu-group css-edy074"><ul><li class="nk-menu-item css-14eejl6"><a data-testid="buttonLink" href="http://newskit.co.uk" class="css-3ykm1i"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Group 2-item 1</span></div></div></a></li><li class="nk-menu-item css-14eejl6"><a data-testid="buttonLink" href="http://newskit.co.uk" class="css-3ykm1i"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Group 2-item 2</span></div></div></a></li><li class="nk-menu-item css-14eejl6"><a data-testid="buttonLink" href="http://newskit.co.uk" class="css-3ykm1i"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Group 2-item 3</span></div></div></a></li></ul></li><li role="separator" aria-hidden="true" class="css-1v5tfiw"><hr data-testid="divider" aria-hidden="true" class="css-1iuisv4"/></li></ul></nav></div></div><style data-emotion="css pc7kvg">.css-pc7kvg{color:#2E2E2E;border:solid 1px;border-radius:0px 0px 0px 0px;border-color:#EBEBEB;padding:40px;max-height:450px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;-webkit-align-items:left;-webkit-box-align:left;-ms-flex-align:left;align-items:left;overflow:scroll;}</style><div class="css-pc7kvg"><style data-emotion="css 1i24b5q">.css-1i24b5q{margin-bottom:16px;margin-right:8px;width:100%;}</style><div class="css-1i24b5q"><style data-emotion="css 13s85fp">.css-13s85fp{display:inline;position:relative;}</style><div class="css-13s85fp"><style data-emotion="css 1hx0p65">.css-1hx0p65{border:none;margin:0;padding:0;margin-bottom:24px;}</style><fieldset class="css-1hx0p65"><style data-emotion="css fgzbl">.css-fgzbl{display:block;margin:12px 0px;font-family:"Poppins",sans-serif;font-size:14px;line-height:1.5;font-weight:500;letter-spacing:0;color:#2E2E2E;}</style><legend class="css-fgzbl">Size</legend><style data-emotion="css e4fcmn">.css-e4fcmn{display:inline;position:absolute;opacity:0;z-index:-1;}</style><input type="radio" id="multichoice-knob-nk-324-MenuItemSize.Small-small" data-testid="small" name="nk-325Size" class="css-e4fcmn"/><style data-emotion="css 1rsasmr">.css-1rsasmr{display:inline-block;font-family:"DM Sans",sans-serif;font-size:12px;line-height:1.5;font-weight:400;letter-spacing:0;padding:8px 16px;background-color:#F4F4F4;color:#535353;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.css-1rsasmr:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px;}.css-1rsasmr:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;}input:checked+.css-1rsasmr{background-color:#577FFB;color:#F4F4F4;}input:focus+.css-1rsasmr{outline:none;background-color:#213A82;}.css-1rsasmr:hover{background-color:#F4F4F4;}</style><label for="multichoice-knob-nk-324-MenuItemSize.Small-small" class="css-1rsasmr">MenuItemSize.Small</label><input type="radio" id="multichoice-knob-nk-326-MenuItemSize.Medium-medium" data-testid="medium" name="nk-327Size" class="css-e4fcmn" checked=""/><label for="multichoice-knob-nk-326-MenuItemSize.Medium-medium" class="css-1rsasmr">MenuItemSize.Medium</label><input type="radio" id="multichoice-knob-nk-328-MenuItemSize.Large-large" data-testid="large" name="nk-329Size" class="css-e4fcmn"/><label for="multichoice-knob-nk-328-MenuItemSize.Large-large" class="css-1rsasmr">MenuItemSize.Large</label></fieldset></div></div><div class="css-1i24b5q"><div class="css-13s85fp"><fieldset class="css-1hx0p65"><legend class="css-fgzbl">vertical</legend><input type="radio" id="multichoice-knob-nk-330-True-true" data-testid="true" name="nk-331vertical" class="css-e4fcmn"/><label for="multichoice-knob-nk-330-True-true" class="css-1rsasmr">True</label><input type="radio" id="multichoice-knob-nk-332-False-false" data-testid="false" name="nk-333vertical" class="css-e4fcmn" checked=""/><label for="multichoice-knob-nk-332-False-false" class="css-1rsasmr">False</label></fieldset></div></div><div class="css-1i24b5q"><div class="css-13s85fp"><fieldset class="css-1hx0p65"><legend class="css-fgzbl">Align</legend><input type="radio" id="multichoice-knob-nk-334-MenuItemAlign.Center-center" data-testid="center" name="nk-335Align" class="css-e4fcmn" checked=""/><label for="multichoice-knob-nk-334-MenuItemAlign.Center-center" class="css-1rsasmr">MenuItemAlign.Center</label><input type="radio" id="multichoice-knob-nk-336-MenuItemAlign.Start-start" data-testid="start" name="nk-337Align" class="css-e4fcmn"/><label for="multichoice-knob-nk-336-MenuItemAlign.Start-start" class="css-1rsasmr">MenuItemAlign.Start</label><input type="radio" id="multichoice-knob-nk-338-MenuItemAlign.End-end" data-testid="end" name="nk-339Align" class="css-e4fcmn"/><label for="multichoice-knob-nk-338-MenuItemAlign.End-end" class="css-1rsasmr">MenuItemAlign.End</label></fieldset></div></div><div class="css-1i24b5q"><div class="css-13s85fp"><fieldset class="css-1hx0p65"><legend class="css-fgzbl">Space Inline</legend><input type="radio" id="multichoice-knob-nk-340-Default-[object Object]" data-testid="[object Object]" name="nk-341Space Inline" class="css-e4fcmn" checked=""/><label for="multichoice-knob-nk-340-Default-[object Object]" class="css-1rsasmr">Default</label><input type="radio" id="multichoice-knob-nk-342-space020-[object Object]" data-testid="[object Object]" name="nk-343Space Inline" class="css-e4fcmn"/><label for="multichoice-knob-nk-342-space020-[object Object]" class="css-1rsasmr">space020</label></fieldset></div></div></div><style data-emotion="css gyeoj4">.css-gyeoj4{color:#2E2E2E;border:solid 1px;border-radius:0px 0px 12px 12px;border-color:#EBEBEB;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}</style><div class="css-gyeoj4"><style data-emotion="css 19o76y6">.css-19o76y6{font-family:'DM Mono',courier;font-weight:400;font-size:16px;line-height:1.5;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:space-between;-webkit-box-align:space-between;-ms-flex-align:space-between;align-items:space-between;}</style><div class="css-19o76y6"><style data-emotion="css 1x1qn11">.css-1x1qn11{padding:24px;padding-top:16px;}</style><div class="css-1x1qn11"><style data-emotion="css 18qkk85">.css-18qkk85{border:solid 1px;border-color:#E4E4E4;border-radius:8px;background-color:#F4F4F4;}</style><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">1</span><span class="token" style="color:#577FFB">import</span><span> React </span><span class="token" style="color:#577FFB">from</span><span> </span><span class="token" style="color:#0A782A">&#x27;react&#x27;</span><span class="token" style="color:#535353">;</span><span>
+            })();</script><div id="__next" data-reactroot=""><style data-emotion="css 1wzcknb">.css-1wzcknb{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;width:100%;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}</style><div class="css-1wzcknb"><style data-emotion="css 1npm8fs">.css-1npm8fs{width:276px;padding-left:24px;padding-right:24px;position:fixed;overflow:auto;bottom:0;top:0;left:0;z-index:3;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 300ms;transition:transform 300ms;margin-top:64px;background-color:#F4F4F4;border-style:solid;border-color:#E4E4E4;border-width:0 1px 0 0;}@media screen and (min-width: 1024px){.css-1npm8fs{margin-top:80px;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);overflow:hidden;}.css-1npm8fs:hover{overflow:auto;}}@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2){.css-1npm8fs{overflow:auto;}}</style><div data-testid="sidebar" role="complementary" class="css-1npm8fs"><style data-emotion="css 1975ixv">.css-1975ixv{padding:48px;}</style><div class="css-1975ixv"><style data-emotion="css 1xvxlxw">@media screen{.css-1xvxlxw{display:block;}}@media screen and (min-width: 480px){.css-1xvxlxw{display:block;}}@media screen and (min-width: 768px){.css-1xvxlxw{display:block;}}@media screen and (min-width: 1024px){.css-1xvxlxw{display:none;}}@media screen and (min-width: 1440px){.css-1xvxlxw{display:none;}}</style><div class="css-1xvxlxw"><style data-emotion="css uinsfl">.css-uinsfl{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div class="css-uinsfl"><style data-emotion="css su8d3y">.css-su8d3y{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}</style><div tabindex="0" data-testid="close-icon" class="css-su8d3y"><style data-emotion="css 1cpsn4a">.css-1cpsn4a{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1cpsn4a{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1cpsn4a{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1cpsn4a.css-1cpsn4a{width:16px;height:16px;fill:#2E2E2E;}@media screen and (prefers-reduced-motion: no-preference){.css-1cpsn4a.css-1cpsn4a{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1cpsn4a.css-1cpsn4a{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><style data-emotion="css h4sfgt-EmotionIconBase">.css-h4sfgt-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-h4sfgt-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-h4sfgt-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-h4sfgt-EmotionIconBase.css-h4sfgt-EmotionIconBase{width:16px;height:16px;fill:#2E2E2E;}@media screen and (prefers-reduced-motion: no-preference){.css-h4sfgt-EmotionIconBase.css-h4sfgt-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-h4sfgt-EmotionIconBase.css-h4sfgt-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-h4sfgt-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg></div></div></div></div><style data-emotion="css kpgnf7">.css-kpgnf7{font-family:"DM Sans",sans-serif;font-size:16px;line-height:1.5;font-weight:400;letter-spacing:0;}</style><nav role="navigation" aria-label="Sidebar" class="css-kpgnf7"><style data-emotion="css 1m479iu">.css-1m479iu{list-style-type:none;margin:0px;padding:0;}.css-1m479iu:last-child{margin-bottom:24px;}</style><ul role="list" class="css-1m479iu"><style data-emotion="css exhu38">.css-exhu38{margin-bottom:24px;}</style><li class="css-exhu38"><div class="css-exhu38"><div><style data-emotion="css az6lpi">.css-az6lpi{display:inline-block;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-az6lpi{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-az6lpi{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-az6lpi:hover:not(:disabled){-webkit-text-decoration:none;text-decoration:none;}</style><a href="/components/overview/" class="css-az6lpi"><style data-emotion="css 17x5lw">.css-17x5lw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}</style><span class="css-17x5lw"><style data-emotion="css t1lyqx">.css-t1lyqx{font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;background-color:transparent;color:#535353;box-sizing:border-box;cursor:'pointer';min-width:230px;padding:12px;margin:4px 0;text-overflow:ellipsis;}.css-t1lyqx::before{content:'';margin-bottom:-0.403em;display:block;}.css-t1lyqx::after{content:'';margin-top:-0.4em;display:block;}.css-t1lyqx:hover:not(:disabled){background-color:#E0E7FF;border-radius:8px;color:#0A0A0A;}.css-t1lyqx:active:not(:disabled){background-color:#AEBFFF;border-radius:8px;color:#0A0A0A;}</style><div data-testid="/components/overview" class="css-t1lyqx">Overview</div></span></a></div><style data-emotion="css x36bp3">.css-x36bp3{font-family:"Poppins",sans-serif;font-size:14px;line-height:1.5;font-weight:500;letter-spacing:0;background-color:transparent;color:#0A0A0A;min-height:32px;margin-top:20px;}</style><div id="/components/action-and-inputs" class="css-x36bp3">Actions &amp; Inputs</div><div><a href="/components/button/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/button" class="css-t1lyqx">Button</div></span></a></div><div><a href="/components/checkbox/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/checkbox" class="css-t1lyqx">Checkbox</div></span></a></div><div><a href="/components/form/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/form" class="css-t1lyqx">Form</div></span></a></div><div><a href="/components/radio-button/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/radio-button" class="css-t1lyqx">Radio Button</div></span></a></div><div><a href="/components/select/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/select" class="css-t1lyqx">Select</div></span></a></div><div><a href="/components/share-bar/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/share-bar" class="css-t1lyqx">Share Bar</div></span></a></div><div><a href="/components/slider/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/slider" class="css-t1lyqx">Slider</div></span></a></div><div><a href="/components/text-field/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/text-field" class="css-t1lyqx">Text Field</div></span></a></div><div><a href="/components/text-input/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/text-input" class="css-t1lyqx">Text Input</div></span></a></div><div id="/components/feedback-and-status" class="css-x36bp3">Feedback &amp; Status</div><div><a href="/components/banner/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/banner" class="css-t1lyqx">Banner</div></span></a></div><div><a href="/components/flag/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/flag" class="css-t1lyqx">Flag</div></span></a></div><div><a href="/components/progress-indicator/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/progress-indicator" class="css-t1lyqx">Progress Indicator</div></span></a></div><div><a href="/components/toast/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/toast" class="css-t1lyqx">Toast</div></span></a></div><div><a href="/components/inline-message/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/inline-message" class="css-t1lyqx">Inline Message</div></span></a></div><div id="/components/layout" class="css-x36bp3">Layout</div><div><a href="/components/aspect-ratio/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/aspect-ratio" class="css-t1lyqx">Aspect Ratio</div></span></a></div><div><a href="/components/block/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/block" class="css-t1lyqx">Block</div></span></a></div><div><a href="/components/card/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/card" class="css-t1lyqx">Card</div></span></a></div><div><a href="/components/divider/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/divider" class="css-t1lyqx">Divider</div></span></a></div><div><a href="/components/drawer/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/drawer" class="css-t1lyqx">Drawer</div></span></a></div><div><a href="/components/fieldset/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/fieldset" class="css-t1lyqx">Fieldset</div></span></a></div><div><a href="/components/grid/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/grid" class="css-t1lyqx">Grid</div></span></a></div><div><a href="/components/grid-layout/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/grid-layout" class="css-t1lyqx">Grid Layout</div></span></a></div><div><a href="/components/modal/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/modal" class="css-t1lyqx">Modal</div></span></a></div><div><a href="/components/stack/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/stack" class="css-t1lyqx">Stack</div></span></a></div><div><a href="/components/structured-list/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/structured-list" class="css-t1lyqx">Structured List</div></span></a></div><div><a href="/components/visibility/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/visibility" class="css-t1lyqx">Visibility</div></span></a></div><div id="/components/media" class="css-x36bp3">Media</div><div><a href="/components/audio-player/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/audio-player" class="css-t1lyqx">Audio Player</div></span></a></div><div><a href="/components/icons/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/icons" class="css-t1lyqx">Icons</div></span></a></div><div><a href="/components/image/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/image" class="css-t1lyqx">Image</div></span></a></div><div><a href="/components/volume-control/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/volume-control" class="css-t1lyqx">Volume Control</div></span></a></div><div id="/components/navigation" class="css-x36bp3">Navigation</div><div><a href="/components/link/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/link" class="css-t1lyqx">Link</div></span></a></div><div><a href="/components/menu/" class="css-az6lpi"><span class="css-17x5lw"><style data-emotion="css 5ft680">.css-5ft680{font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;background-color:transparent;color:#0A0A0A;box-sizing:border-box;cursor:'pointer';min-width:230px;padding:12px;margin:4px 0;text-overflow:ellipsis;}.css-5ft680::before{content:'';margin-bottom:-0.403em;display:block;}.css-5ft680::after{content:'';margin-top:-0.4em;display:block;}</style><div data-testid="/components/menu" class="css-5ft680">Menu</div></span></a></div><div><a href="/components/scroll/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/scroll" class="css-t1lyqx">Scroll</div></span></a></div><div><a href="/components/tabs/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/tabs" class="css-t1lyqx">Tabs</div></span></a></div><div><a href="/components/tag/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/tag" class="css-t1lyqx">Tag</div></span></a></div><div><a href="/components/title-bar/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/title-bar" class="css-t1lyqx">Title Bar</div></span></a></div><div id="/components/text" class="css-x36bp3">Text</div><div><a href="/components/byline/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/byline" class="css-t1lyqx">Byline</div></span></a></div><div><a href="/components/caption/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/caption" class="css-t1lyqx">Caption</div></span></a></div><div><a href="/components/date-time/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/date-time" class="css-t1lyqx">Date Time</div></span></a></div><div><a href="/components/headline/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/headline" class="css-t1lyqx">Headline</div></span></a></div><div><a href="/components/ordered-list/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/ordered-list" class="css-t1lyqx">Ordered List</div></span></a></div><div><a href="/components/standfirst/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/standfirst" class="css-t1lyqx">Standfirst</div></span></a></div><div><a href="/components/text-block/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/text-block" class="css-t1lyqx">Text Block</div></span></a></div><div><a href="/components/unordered-list/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/unordered-list" class="css-t1lyqx">Unordered List</div></span></a></div><div id="/components/third-party" class="css-x36bp3">Third Party Integrations</div><div><a href="/components/consent/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/consent" class="css-t1lyqx">Consent</div></span></a></div><div><a href="/components/consent-settings-link/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/consent-settings-link" class="css-t1lyqx">Consent Settings Link</div></span></a></div><div><a href="/components/experimentation-web/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/experimentation-web" class="css-t1lyqx">Experimentation Web</div></span></a></div><div><a href="/components/tealium/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/tealium" class="css-t1lyqx">Tealium</div></span></a></div><div id="/utils" class="css-x36bp3">Utilities</div><div><a href="/components/utils/emotion/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/utils/emotion" class="css-t1lyqx">Emotion</div></span></a></div><div><a href="/components/utils/custom-to-newskit-icon/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/utils/custom-to-newskit-icon" class="css-t1lyqx">customToNewsKitIcon</div></span></a></div><div><a href="/components/utils/get-css-from-theme/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/utils/get-css-from-theme" class="css-t1lyqx">getCssFromTheme</div></span></a></div><div><a href="/components/utils/get-from-theme/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/utils/get-from-theme" class="css-t1lyqx">getFromTheme</div></span></a></div><div><a href="/components/utils/get-defaults/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/utils/get-defaults" class="css-t1lyqx">getComponentDefaults</div></span></a></div><div><a href="/components/utils/hooks/" class="css-az6lpi"><span class="css-17x5lw"><div data-testid="/components/utils/hooks" class="css-t1lyqx">Hooks</div></span></a></div></div></li></ul></nav></div><style data-emotion="css 1dzjn3i">.css-1dzjn3i{background-color:rgba(0, 0, 0, 0.8);position:fixed;overflow:auto;bottom:0;top:0;left:0;right:100%;opacity:0;visibility:hidden;-webkit-transition:opacity 0.6s,right 0.3s;transition:opacity 0.6s,right 0.3s;z-index:2;}@media screen and (min-width: 1024px){.css-1dzjn3i{display:none;}}</style><div data-testid="overlay" class="css-1dzjn3i"></div><style data-emotion="css 1kjizz3">.css-1kjizz3{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;position:fixed;top:0;right:0;left:0;z-index:4;background-color:#FFFFFF;font-family:"Poppins",sans-serif;font-size:14px;line-height:1.5;font-weight:500;letter-spacing:0;padding-top:8px;padding-bottom:8px;box-shadow:0 4px 8px 0 rgba(10,10,10,0.08);}@media screen and (min-width: 1024px){.css-1kjizz3{padding-top:12px;padding-bottom:12px;box-shadow:0 8px 16px 0 rgba(10,10,10,0.08);height:80px;}}</style><header data-testid="header-navigation" class="css-1kjizz3"><style data-emotion="css x51be0">.css-x51be0{position:-webkit-sticky;position:sticky;}</style><style data-emotion="css dre6gm">.css-dre6gm{width:100%;max-width:9999px;margin:0 auto;}</style><div class="css-dre6gm"><style data-emotion="css 18z1uw5">.css-18z1uw5{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:-webkit-sticky;position:sticky;}@media screen{.css-18z1uw5{margin:-16px 8px 0 8px;}}@media screen and (min-width: 480px){.css-18z1uw5{margin:-16px 8px 0 8px;}}@media screen and (min-width: 768px){.css-18z1uw5{margin:-16px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-18z1uw5{margin:-24px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-18z1uw5{margin:-24px 12px 0 12px;}}</style><div class="css-18z1uw5"><style data-emotion="css 4yea8k">.css-4yea8k{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-4yea8k{-webkit-order:1;-ms-flex-order:1;order:1;padding:0 8px;margin-top:16px;-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;}}@media screen and (min-width: 1024px){.css-4yea8k{padding:0 12px;margin-top:24px;}}</style><div class="css-4yea8k"><div class="css-17x5lw"><style data-emotion="css 1k3e0au">@media screen{.css-1k3e0au{display:block;}}@media screen and (min-width: 480px){.css-1k3e0au{display:block;}}@media screen and (min-width: 768px){.css-1k3e0au{display:none;}}@media screen and (min-width: 1024px){.css-1k3e0au{display:none;}}@media screen and (min-width: 1440px){.css-1k3e0au{display:none;}}</style><div class="css-1k3e0au"><div data-testid="logo-container" class="css-17x5lw"><style data-emotion="css 1tjzrtp">.css-1tjzrtp{font-size:0;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;margin-right:16px;}</style><div tabindex="0" data-testid="mobile-menu-icon" class="css-1tjzrtp"><style data-emotion="css 1ypz2ua">.css-1ypz2ua{color:#577FFB;fill:#577FFB;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1ypz2ua{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1ypz2ua{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1ypz2ua.css-1ypz2ua{width:32px;height:32px;color:#577FFB;fill:#577FFB;}@media screen and (prefers-reduced-motion: no-preference){.css-1ypz2ua.css-1ypz2ua{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1ypz2ua.css-1ypz2ua{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><style data-emotion="css 17xb90z-EmotionIconBase">.css-17xb90z-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;color:#577FFB;fill:#577FFB;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-17xb90z-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-17xb90z-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-17xb90z-EmotionIconBase.css-17xb90z-EmotionIconBase{width:32px;height:32px;color:#577FFB;fill:#577FFB;}@media screen and (prefers-reduced-motion: no-preference){.css-17xb90z-EmotionIconBase.css-17xb90z-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-17xb90z-EmotionIconBase.css-17xb90z-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-17xb90z-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></div><style data-emotion="css 1fjt7l2">.css-1fjt7l2{display:inline-block;color:#2E2E2E;}@media screen and (prefers-reduced-motion: no-preference){.css-1fjt7l2{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1fjt7l2{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1fjt7l2 svg{fill:#2E2E2E;}</style><a href="/" class="css-1fjt7l2"><span class="css-17x5lw"><style data-emotion="css nr1bh9">.css-nr1bh9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:64px;height:40px;overflow:hidden;}</style><div class="css-nr1bh9"><style data-emotion="css 1qvdy2v">.css-1qvdy2v{display:inline-block;fill:#2E2E2E;color:#2E2E2E;width:48px;height:32px;}</style><svg viewBox="0 0 587 400" class="css-1qvdy2v"><title>Newskit Logo</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M542.931651,29.2896728 C572.492354,32.9192707 586.5572,64.4547843 586.348415,106.08797 L586.495247,105.970589 C537.990326,145.154611 442.468706,171.95996 348.623603,120.985066 L348.721238,120.845043 C362.553081,128.155467 377.170854,133.793553 394.357307,135.903784 C415.412272,138.489009 432.330134,126.917892 447.679336,110.530755 L448.773075,109.352181 C448.954931,109.154429 449.136575,108.956026 449.318008,108.756987 L450.404133,107.55526 L450.404133,107.55526 L451.485443,106.339042 L451.485443,106.339042 L452.562145,105.109091 L452.562145,105.109091 L453.634447,103.866163 C453.812809,103.657969 453.990997,103.449266 454.169014,103.240069 L455.235107,101.979094 L455.235107,101.979094 L456.29732,100.707032 L456.29732,100.707032 L457.587754,99.1418332 C457.802393,98.8797626 458.016819,98.6171092 458.231042,98.3539014 L459.83401,96.3698952 L459.83401,96.3698952 L461.430067,94.3677804 L462.702432,92.7548508 L463.971223,91.1334185 L465.236818,89.5048552 L467.13004,87.0516409 L470.379422,82.8097527 L474.299324,77.6792448 L476.754567,74.4820285 L478.597452,72.100709 L480.442909,69.7384417 L481.675233,68.1763279 L482.909587,66.6259015 L484.146323,65.0884505 L485.385797,63.5652628 L486.628361,62.0576264 L487.624877,60.8635796 L487.624877,60.8635796 L488.623779,59.6809694 L488.623779,59.6809694 L489.625249,58.510455 L489.625249,58.510455 L490.629468,57.3526961 C490.797077,57.1608358 490.964809,56.9695345 491.132666,56.7788059 L492.141348,55.6414163 C492.309724,55.4530334 492.478233,55.2652506 492.646879,55.0780818 L493.660434,53.9625454 C494.168065,53.4085705 494.676998,52.8603679 495.187337,52.3183087 L496.209917,51.2424913 C496.722174,50.708788 497.235905,50.1814753 497.751209,49.6609242 L498.783949,48.6289471 C511.892687,35.6742166 526.055811,27.2175802 542.931651,29.2896728 Z" fill="#AEBFFF"></path><path d="M233.380135,275.552866 L233.481089,275.663916 C221.00643,269.775743 208.041451,265.334595 193.610157,263.562655 C178.279744,261.680317 164.987976,268.064335 152.720979,278.527996 L151.754642,279.362473 C151.27252,279.783874 150.791953,280.21146 150.312878,280.644973 L149.356702,281.519826 L149.356702,281.519826 L148.404395,282.410029 C147.612388,283.158133 146.824297,283.921749 146.039833,284.699684 L145.100198,285.640004 L145.100198,285.640004 L144.163935,286.593612 L144.163935,286.593612 L143.230932,287.560052 C143.075697,287.722169 142.920593,287.884802 142.765618,288.047941 L141.837298,289.032769 C141.68283,289.197894 141.528485,289.363505 141.374263,289.529594 L140.27472,290.723935 C139.908877,291.124669 139.543693,291.527981 139.179139,291.933742 L138.087333,293.158242 C137.90567,293.363507 137.724156,293.569352 137.542788,293.775761 L136.456294,295.020854 L135.373107,296.278709 L134.293042,297.548555 L133.215909,298.829619 L132.678385,299.474116 L132.678385,299.474116 L131.353955,301.076035 L130.693146,301.88229 L129.374121,303.504482 L128.715817,304.320056 L127.401406,305.959251 L126.08963,307.607965 L124.126138,310.095703 L121.514088,313.432437 L115.59486,321.034134 L113.63866,323.535524 L111.680042,326.02386 L110.372368,327.673078 L108.407082,330.128759 L107.093862,331.751664 L105.777807,333.3615 L104.458567,334.956815 L103.135788,336.536155 L102.101338,337.756016 L101.064355,338.964583 L100.02467,340.161167 L98.982118,341.345078 L97.936531,342.515628 L96.8877422,343.672125 L95.8355846,344.813881 L95.3081902,345.379015 L95.3081902,345.379015 L94.2506661,346.497364 L93.3700527,347.413119 L93.3700527,347.413119 L92.4867353,348.317137 L92.4867353,348.317137 L91.6006185,349.209022 C91.1568443,349.651865 90.7119845,350.090012 90.2659853,350.523239 L89.372452,351.383068 L89.372452,351.383068 L88.475785,352.229385 C88.326074,352.36929 88.1762285,352.508615 88.0262465,352.647353 L87.1246998,353.472662 C86.5225551,354.018078 85.9181622,354.55383 85.3113935,355.07939 L84.3994429,355.86002 C84.2471489,355.98883 84.0947024,356.116986 83.9421015,356.24448 L83.0246266,357.00144 C71.5326258,366.362564 59.1494776,371.909706 45.035813,370.176766 C15.7285936,366.578292 1.08954462,335.668876 0.349530223,294.649268 L-0.505045496,295.436748 C55.5334979,243.070922 150.863739,236.107309 233.380135,275.552866 Z" fill="#3358CC"></path><path d="M369.722888,336.535023 C344.478199,333.039998 323.729573,325.3413 305.289933,316.177684 L303.619902,315.340669 C303.065305,315.060369 302.512767,314.778801 301.962228,314.496039 L300.316545,313.644253 L298.275747,312.570154 L298.275747,312.570154 L296.252403,311.486479 L294.645814,310.613246 L292.652088,309.514587 L292.652088,309.514587 L290.673817,308.408855 L289.101849,307.519775 L287.538952,306.627197 L285.210813,305.282771 L282.134966,303.482225 L282.134966,303.482225 L279.680373,302.028273 L277.243511,300.572493 L273.61813,298.389574 L265.271816,293.333002 L262.909329,291.906348 L259.965971,290.139474 L257.030668,288.394353 C249.211286,283.773014 241.446067,279.423464 233.480948,275.66385 L233.380135,275.552866 C151.688903,236.501765 57.4388213,242.936291 1.18784621,293.879395 L0.349511934,294.648254 C-1.40117061,197.576039 74.685447,43.8855432 218.416223,61.5334634 C243.595502,64.6250902 263.775794,71.8618633 281.413553,80.6870641 L282.986322,81.4815588 C283.508357,81.7477604 284.028191,82.0153094 284.54589,82.2841378 L286.092649,83.0943931 L286.861347,83.5022718 L286.861347,83.5022718 L288.389627,84.3232765 L289.906078,85.1509374 L289.906078,85.1509374 L291.411091,85.9848465 L292.159431,86.4040166 L292.159431,86.4040166 L294.018523,87.4579947 L294.018523,87.4579947 L295.861428,88.5199823 L297.324613,89.3748037 L298.778321,90.233833 L300.222943,91.0966623 L301.658873,91.9628835 L303.086502,92.8320886 L304.506222,93.7038695 L305.918425,94.5778183 L308.21828,96.01414 L309.361566,96.7335126 L311.635937,98.1735576 L313.895479,99.6138377 L323.926209,106.049807 L326.13506,107.459247 L328.340309,108.857237 L331.094434,110.585885 L333.849002,112.290322 C338.421777,115.096398 343.010309,117.787993 347.683946,120.292931 L349.440685,121.223392 C442.141776,171.224285 536.201082,145.590447 585.029491,107.139624 L586.348414,106.088092 C585.864018,202.666729 508.569775,353.583277 369.722888,336.535023 Z" fill="#577FFB"></path></g></svg></div></span></a></div></div><style data-emotion="css n86qze">@media screen{.css-n86qze{display:none;}}@media screen and (min-width: 480px){.css-n86qze{display:none;}}@media screen and (min-width: 768px){.css-n86qze{display:block;}}@media screen and (min-width: 1024px){.css-n86qze{display:none;}}@media screen and (min-width: 1440px){.css-n86qze{display:none;}}</style><div class="css-n86qze"><div data-testid="logo-container" class="css-17x5lw"><div tabindex="0" data-testid="mobile-menu-icon" class="css-1tjzrtp"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-17xb90z-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></div><a href="/" class="css-1fjt7l2"><span class="css-17x5lw"><style data-emotion="css 3s8hd2">.css-3s8hd2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:52px;overflow:hidden;}</style><div class="css-3s8hd2"><style data-emotion="css kbqybq">.css-kbqybq{display:inline-block;width:183px;height:40px;}</style><svg viewBox="0 0 1587 347" class="css-kbqybq"><title>Newskit Logo</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-5.000000, 47.000000)"><style data-emotion="css 1epbdp2">.css-1epbdp2{fill:#162740;color:#162740;}</style><g transform="translate(508.073657, 26.125170)" class="css-1epbdp2"><path d="M49.6701967,183.5 L49.6701967,88.2085714 L126.078764,185.96333 C126.836849,186.933201 127.99928,187.5 129.230272,187.5 L167,187.5 C169.209139,187.5 171,185.709139 171,183.5 L171,10.5 C171,8.290861 169.209139,6.5 167,6.5 L125.329803,6.5 C123.120664,6.5 121.329803,8.290861 121.329803,10.5 L121.329803,102.171429 L48.025595,8.04230221 C47.2677022,7.06910032 46.1031929,6.5 44.8696924,6.5 L4,6.5 C1.790861,6.5 0,8.290861 0,10.5 L0,183.5 C0,185.709139 1.790861,187.5 4,187.5 L45.6701967,187.5 C47.8793357,187.5 49.6701967,185.709139 49.6701967,183.5 Z M903,55 C918.187831,55 930.5,42.6878306 930.5,27.5 C930.5,12.3121694 918.187831,0 903,0 C887.812169,0 875.5,12.3121694 875.5,27.5 C875.5,42.6878306 887.812169,55 903,55 Z M263.027523,190.5 C289.304083,190.5 308.121364,180.273822 321.470735,164.67486 C322.185034,163.840189 322.721045,161.426603 321.327744,160.275568 L299.153134,141.956652 C297.457714,140.556029 294.757606,141.251542 293.943758,141.981606 C284.811066,150.174114 276.283121,153.871025 265.355963,153.871025 C250.091743,153.871025 238.966972,146.132509 235.086239,130.913428 L323.782339,130.913428 C325.435321,130.913428 329,129.596531 329,126.880598 L329,120.853357 C329,79.8392226 306.750459,44.5 258.629358,44.5 C217.234862,44.5 188,76.7438163 188,117.5 L188,118.015901 C188,161.09364 219.045872,190.5 263.027523,190.5 Z M284,105.5 L235,105.5 C237.592593,90.1938776 246.407407,80.5 259.37037,80.5 C272.851852,80.5 282.185185,90.1938776 284,105.5 Z M414.377751,184.718744 L435.778461,117.819827 C435.946735,117.293802 436.509575,117.003787 437.0356,117.17206 C437.345716,117.271265 437.588117,117.515238 437.685316,117.825988 L458.600819,184.6941 C459.122984,186.363495 460.669273,187.5 462.418426,187.5 L498.895815,187.5 C500.65258,187.5 502.203732,186.353753 502.719524,184.674412 L543.410734,52.1899515 C544.059344,50.078175 542.873213,47.8404396 540.761436,47.1918296 C540.380918,47.0749574 539.985086,47.0155393 539.587024,47.0155393 L500.789687,47.0155393 C498.978012,47.0155393 497.392536,48.2331786 496.925114,49.9835159 L479.758709,114.265808 C479.616217,114.799394 479.068146,115.116438 478.53456,114.973946 C478.200911,114.884846 477.936847,114.629901 477.836082,114.299588 L458.017303,49.3328585 C457.503885,47.6498526 455.950944,46.5 454.191368,46.5 L419.802333,46.5 C418.045766,46.5 416.494742,47.6459914 415.978782,49.3250718 L396.176619,113.766952 C396.014396,114.294874 395.454922,114.591331 394.927,114.429108 C394.595866,114.327355 394.340981,114.061474 394.253297,113.72634 L377.580699,50.0030584 C377.120225,48.2431076 375.530153,47.0155393 373.71096,47.0155393 L334.393967,47.0155393 C332.184828,47.0155393 330.393967,48.8064003 330.393967,51.0155393 C330.393967,51.4090901 330.452046,51.8004866 330.566327,52.1770793 L370.770217,184.66154 C371.2818,186.347367 372.836116,187.5 374.597856,187.5 L410.56794,187.5 C412.307555,187.5 413.847715,186.375646 414.377751,184.718744 Z M609.892857,190.5 C644.002101,190.5 667,174.450355 667,143.64539 L667,143.12766 C667,118.664894 649.208929,108.460426 625.494477,101.002777 L623.904868,100.509543 C623.37216,100.346404 622.836658,100.184495 622.29849,100.02369 L620.676125,99.5444603 L619.038552,99.0710951 L617.386555,98.6028369 L613.001051,97.2603787 L611.189694,96.694176 L609.88794,96.27927 L608.635445,95.8713519 L607.432756,95.4691926 L606.280417,95.0715629 L605.540433,94.808386 L604.823231,94.5463117 L604.128973,94.2849759 L603.45782,94.0240145 L602.809933,93.7630631 L602.185475,93.5017577 L601.584607,93.239734 C601.486437,93.1959833 601.389256,93.1521875 601.293069,93.108339 L600.727889,92.844555 C600.543485,92.7563758 600.36308,92.6679252 600.186702,92.5791423 L599.66967,92.3117367 C599.58552,92.2669828 599.502384,92.2221307 599.420263,92.1771727 L598.939768,91.9060948 C598.783687,91.8152718 598.631699,91.723965 598.483832,91.6321135 L598.052617,91.3548645 C595.819012,89.8668424 594.647059,88.2238632 594.647059,86.177305 L594.647059,85.6595745 C594.647059,81.5177305 598.523109,78.6702128 606.016807,78.6702128 C616.381853,78.6702128 630.794334,82.9501422 644.429889,90.2492222 L645.170746,90.6470084 L645.278629,90.6877084 L645.428516,90.7318551 L645.61432,90.7746621 C645.681564,90.788176 645.75378,90.8006688 645.829952,90.8113428 L646.069325,90.8371103 C646.858502,90.8963762 647.913206,90.7194935 648.363501,89.6224742 L649.482426,86.2332564 L650.41522,83.3635462 L652.066003,78.2026376 L653.805034,72.6715009 L655.229292,68.0824946 L657.906292,59.3602096 C658.332293,57.9717378 657.777631,57.2285724 657.347441,56.8859969 L657.223223,56.7949973 L657.113105,56.7265648 L657.065405,56.7003523 C642.103147,48.8120377 624.172333,44.5 606.533613,44.5 C574.233193,44.5 550.460084,61.0673759 550.460084,90.8368794 L550.460084,91.3546099 C550.460084,115.11844 566.32928,125.416099 588.07008,132.422028 L589.614346,132.91123 L591.177336,133.390292 C591.701366,133.548378 592.228386,133.704907 592.758266,133.86001 L594.356357,134.32118 L595.970827,134.774596 L597.600894,135.221053 L599.245776,135.661348 C599.521115,135.734261 599.797038,135.80695 600.073529,135.879433 L603.575041,136.868735 L605.906341,137.539846 L607.668301,138.06027 L608.929112,138.443108 L609.740577,138.69553 L610.913911,139.070971 L611.666742,139.319726 L612.395944,139.567722 L613.101414,139.815365 L613.783052,140.063058 L614.440756,140.311206 C614.548374,140.352624 614.65499,140.394078 614.760602,140.435577 L615.382218,140.685167 C615.483808,140.726876 615.58439,140.768646 615.683962,140.810486 L616.269261,141.062428 L616.830223,141.316444 L617.366747,141.572938 L617.878732,141.832315 C621.126662,143.528516 622.813025,145.433083 622.813025,148.046099 L622.813025,148.56383 C622.813025,153.48227 618.678571,156.070922 610.151261,156.070922 C596.440715,156.070922 580.178478,151.190806 564.881159,141.650754 L564.141733,141.185503 C564.093732,141.155032 564.040729,141.123143 563.983488,141.090874 L563.79981,140.993962 L563.595278,140.900988 C562.919404,140.619369 561.998701,140.490551 561.487311,141.403508 L551.779214,170.769329 L551.450065,171.738253 C550.79398,173.603357 552.142953,174.923294 552.801936,175.310151 C570.051776,185.436717 589.878719,190.5 609.892857,190.5 Z M740.083086,182.5 L740.083086,139.826518 C740.083086,139.577805 740.175768,139.338018 740.343042,139.15396 L757.55884,120.210705 C757.930284,119.80199 758.562728,119.771776 758.971443,120.143219 C759.02977,120.196228 759.081626,120.255946 759.125931,120.32113 L802.916375,184.748531 C803.661045,185.844139 804.899841,186.5 806.224563,186.5 L856.418355,186.5 C858.627494,186.5 860.418355,184.709139 860.418355,182.5 C860.418355,181.694156 860.174957,180.907101 859.720045,180.241939 L793.703389,83.7137554 C793.445031,83.3359897 793.476098,82.831043 793.778816,82.4877974 L855.815462,12.1457707 C857.276681,10.488926 857.118095,7.96123597 855.46125,6.50001714 C854.730545,5.8555868 853.78976,5.5 852.81548,5.5 L804.406558,5.5 C803.233698,5.5 802.119934,6.01475249 801.35994,6.90806657 L741.844741,76.8635966 C741.486869,77.2842468 740.855753,77.3351391 740.435103,76.9772678 C740.211774,76.7872693 740.083086,76.5088283 740.083086,76.2156133 L740.083086,9.5 C740.083086,7.290861 738.292225,5.5 736.083086,5.5 L694,5.5 C691.790861,5.5 690,7.290861 690,9.5 L690,182.5 C690,184.709139 691.790861,186.5 694,186.5 L736.083086,186.5 C738.292225,186.5 740.083086,184.709139 740.083086,182.5 Z M928,182.5 L928,75.0824946 C928,72.8733556 926.209139,71.0824946 924,71.0824946 L883,71.0824946 C880.790861,71.0824946 879,72.8733556 879,75.0824946 L879,182.5 C879,184.709139 880.790861,186.5 883,186.5 L924,186.5 C926.209139,186.5 928,184.709139 928,182.5 Z M1013.35092,189.5 C1025.71919,189.5 1036.40257,186.764504 1044.83085,182.622854 L1045.44285,182.317168 L1045.60937,182.227026 L1045.78895,182.119754 C1046.52796,181.653073 1047.48285,180.715298 1047.48285,178.586712 L1047.48285,145.854246 C1047.48285,144.165121 1046.13184,143.992466 1045.13243,144.162007 L1044.90881,144.206672 C1044.87284,144.21495 1044.83758,144.223601 1044.80314,144.232558 L1044.60696,144.289433 C1044.54533,144.309258 1044.48771,144.329772 1044.43489,144.35044 L1044.35935,144.38149 C1039.37124,146.413468 1034.2066,147.648041 1028.86544,147.648041 C1019.8153,147.648041 1015.41953,143.514514 1015.41953,133.697388 L1015.41953,87.1618287 C1015.41953,86.609544 1015.86724,86.1618287 1016.41953,86.1618287 L1044,86.1618287 C1046.20914,86.1618287 1048,84.3709677 1048,82.1618287 L1048,50.8933237 C1048,48.6841847 1046.20914,46.8933237 1044,46.8933237 L1016.41953,46.8933237 C1015.86724,46.8933237 1015.41953,46.4456084 1015.41953,45.8933237 L1015.41953,15.5 C1015.41953,13.290861 1013.62866,11.5 1011.41953,11.5 L970.548813,11.5 C968.339674,11.5 966.548813,13.290861 966.548813,15.5 L966.548813,45.8933237 C966.548813,46.4456084 966.101097,46.8933237 965.548813,46.8933237 L954,46.8933237 C951.790861,46.8933237 950,48.6841847 950,50.8933237 L950,82.1618287 C950,84.3709677 951.790861,86.1618287 954,86.1618287 L965.548813,86.1618287 C966.101097,86.1618287 966.548813,86.609544 966.548813,87.1618287 L966.548813,143.256168 C966.548813,176.582729 983.873351,189.5 1013.35092,189.5 Z"></path></g><g transform="translate(0.000000, 0.116667)"><g transform="translate(207.496510, 125.867994) rotate(2.000000) translate(-207.496510, -125.867994) translate(4.492344, 7.592994)"><path d="M375.877049,0.215696421 C396.323202,2.72616833 406.051387,24.5382319 405.906977,53.3345184 L406.008536,53.2533299 C372.459299,80.3556122 306.390178,98.8959782 241.480649,63.6383437 L241.54818,63.541494 C251.115204,68.597871 261.22583,72.497547 273.113127,73.9571235 C287.676144,75.7452372 299.377666,67.7418812 309.994197,56.407445 L310.7507,55.5922645 C310.876484,55.4554859 311.002121,55.3182571 311.127612,55.1805889 L311.878849,54.3493941 L311.878849,54.3493941 L312.626754,53.508177 L312.626754,53.508177 L313.371473,52.657461 L313.371473,52.657461 L314.113149,51.7977691 C314.236516,51.6537682 314.359762,51.5094151 314.482891,51.3647207 L315.220272,50.492546 L315.220272,50.492546 L315.95497,49.6127035 L315.95497,49.6127035 L316.84752,48.5301073 C316.995978,48.3488419 317.14429,48.1671732 317.29246,47.9851212 L318.40118,46.6128503 L318.40118,46.6128503 L319.50512,45.2280542 L320.385172,44.1124446 L321.262753,42.9909538 L322.138122,41.8645309 L323.447601,40.1677244 L325.69509,37.2337517 L328.406356,33.6851504 L330.104566,31.4737425 L331.379227,29.8266632 L332.655668,28.1927616 L333.508026,27.1122995 L334.361787,26.0399213 L335.217197,24.9765177 L336.074499,23.9229795 L336.93394,22.8801977 L337.623197,22.0543153 L337.623197,22.0543153 L338.314104,21.2363432 L338.314104,21.2363432 L339.006787,20.4267375 L339.006787,20.4267375 L339.701372,19.6259542 C339.817302,19.4932508 339.933316,19.3609341 340.049417,19.2290135 L340.747089,18.442319 C340.863549,18.3120208 340.980101,18.1821378 341.096748,18.0526793 L341.79779,17.2810999 C342.148901,16.897934 342.500914,16.5187606 342.853898,16.1438363 L343.561183,15.3997292 C343.915494,15.0305844 344.270824,14.6658598 344.627243,14.305812 L345.341555,13.5920278 C354.408432,4.63167253 364.204592,-1.21750098 375.877049,0.215696421 Z" fill="#AEBFFF"></path><path d="M161.770583,170.547738 L161.84041,170.624548 C153.212104,166.551895 144.24466,163.480101 134.263015,162.254509 C123.659479,160.952559 114.466007,165.368171 105.981333,172.605536 L105.312951,173.182717 C104.979483,173.474186 104.64709,173.769932 104.315731,174.069779 L103.654375,174.674886 L103.654375,174.674886 L102.995697,175.29061 C102.447892,175.808048 101.902795,176.336216 101.360208,176.874288 L100.710294,177.524675 L100.710294,177.524675 L100.062712,178.184255 L100.062712,178.184255 L99.4173845,178.852709 C99.3100136,178.96484 99.2027335,179.077327 99.0955426,179.190165 L98.4534543,179.871338 C98.3466136,179.985549 98.2398589,180.100097 98.1331886,180.214975 L97.3726713,181.041061 C97.1196294,181.318236 96.8670443,181.597193 96.6148944,181.877844 L95.8597287,182.72479 C95.7340782,182.866765 95.608531,183.009141 95.4830846,183.151907 L94.731593,184.013097 L93.9823892,184.883113 L93.2353436,185.761423 L92.490327,186.647492 L92.1185391,187.093269 L92.1185391,187.093269 L91.2024752,188.201264 L90.7454158,188.758923 L89.8330904,189.88094 L89.3777634,190.445045 L88.4686288,191.578821 L87.5613172,192.719182 L86.2032351,194.439867 L84.3965671,196.747775 L80.3024344,202.005615 L78.949396,203.735743 L77.5946857,205.456843 L76.6902108,206.597551 L75.330888,208.296064 L74.4225774,209.418574 L73.5123064,210.532044 L72.5998317,211.63547 L71.6849099,212.727847 L70.9694154,213.571583 L70.2521684,214.407509 L69.5330533,215.235146 L68.8119548,216.054019 L68.0887571,216.863649 L67.3633448,217.663559 L66.6356025,218.453273 L66.2708214,218.844158 L66.2708214,218.844158 L65.5393672,219.617683 L64.9302762,220.25108 L64.9302762,220.25108 L64.3193151,220.876359 L64.3193151,220.876359 L63.7064176,221.493246 C63.3994738,221.799546 63.0917791,222.102597 62.7832963,222.402246 L62.1652691,222.996961 L62.1652691,222.996961 L61.5450744,223.58233 C61.4415243,223.679098 61.3378812,223.775465 61.2341436,223.871425 L60.6105738,224.442264 C60.1940904,224.81951 59.776052,225.190072 59.3563703,225.553584 L58.7256045,226.09352 C58.6202678,226.182613 58.5148256,226.271254 58.4092767,226.359438 L57.7746899,226.883002 C49.826056,233.357779 41.2610451,237.194553 31.4990938,235.995936 C11.228267,233.506992 1.10292483,212.127979 0.591081538,183.756083 L1.73976389e-12,184.300757 C38.7599925,148.081061 104.696743,143.264562 161.770583,170.547738 Z" fill="#3358CC"></path><path d="M256.074321,212.727064 C238.613411,210.309671 224.262278,204.984739 211.508193,198.646571 L210.353089,198.067635 C209.969492,197.873761 209.58732,197.67901 209.206531,197.483433 L208.068267,196.894281 L206.656715,196.151362 L206.656715,196.151362 L205.257235,195.401821 L204.146011,194.797834 L202.767017,194.037929 L202.767017,194.037929 L201.398713,193.27313 L200.311436,192.658184 L199.230432,192.040818 L197.620136,191.110923 L195.492675,189.865545 L195.492675,189.865545 L193.794915,188.859895 L192.109418,187.85298 L189.601863,186.343128 L183.828996,182.845666 L182.194942,181.858897 L180.15912,180.636809 L178.128868,179.429767 C172.720463,176.23334 167.349519,173.224902 161.840312,170.624502 L161.770583,170.547738 C105.267481,143.537393 40.0778412,147.987941 1.17091676,183.223588 L0.591068889,183.755382 C-0.61981987,116.613766 52.0067573,10.3111735 151.420544,22.5176516 C168.836212,24.6560268 182.794248,29.6614615 194.993697,35.7655587 L196.081529,36.3150842 C196.442603,36.499207 196.802155,36.6842617 197.160231,36.8702014 L198.230072,37.4306279 L198.761755,37.7127441 L198.761755,37.7127441 L199.818815,38.2806057 L200.867694,38.8530711 L200.867694,38.8530711 L201.908661,39.4298582 L202.426263,39.7197842 L202.426263,39.7197842 L203.712135,40.4487857 L203.712135,40.4487857 L204.986811,41.1833272 L205.998847,41.7745786 L207.004328,42.3687406 L208.003526,42.9655309 L208.996711,43.5646672 L209.984154,44.1658674 L210.966127,44.7688492 L211.942901,45.3733304 L213.533633,46.3667862 L214.324406,46.8643523 L215.897513,47.8603834 L217.460363,48.8565771 L224.398284,53.3081228 L225.926073,54.2829853 L227.45137,55.2499283 L229.356307,56.4455762 L231.261549,57.6244787 C234.424385,59.565348 237.59812,61.4270346 240.830719,63.1596166 L242.045797,63.8031855 C306.164051,98.3871368 371.221738,80.6570654 404.994721,54.0619123 L405.906976,53.3346033 C405.571936,120.134827 352.110084,224.518773 256.074321,212.727064 Z" fill="#577FFB"></path></g></g></g></g></svg></div></span></a></div></div><style data-emotion="css 1tiut6d">@media screen{.css-1tiut6d{display:none;}}@media screen and (min-width: 480px){.css-1tiut6d{display:none;}}@media screen and (min-width: 768px){.css-1tiut6d{display:none;}}@media screen and (min-width: 1024px){.css-1tiut6d{display:block;}}@media screen and (min-width: 1440px){.css-1tiut6d{display:block;}}</style><div class="css-1tiut6d"><a href="/" class="css-1fjt7l2"><span class="css-17x5lw"><div class="css-3s8hd2"><svg viewBox="0 0 1587 347" class="css-kbqybq"><title>Newskit Logo</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-5.000000, 47.000000)"><g transform="translate(508.073657, 26.125170)" class="css-1epbdp2"><path d="M49.6701967,183.5 L49.6701967,88.2085714 L126.078764,185.96333 C126.836849,186.933201 127.99928,187.5 129.230272,187.5 L167,187.5 C169.209139,187.5 171,185.709139 171,183.5 L171,10.5 C171,8.290861 169.209139,6.5 167,6.5 L125.329803,6.5 C123.120664,6.5 121.329803,8.290861 121.329803,10.5 L121.329803,102.171429 L48.025595,8.04230221 C47.2677022,7.06910032 46.1031929,6.5 44.8696924,6.5 L4,6.5 C1.790861,6.5 0,8.290861 0,10.5 L0,183.5 C0,185.709139 1.790861,187.5 4,187.5 L45.6701967,187.5 C47.8793357,187.5 49.6701967,185.709139 49.6701967,183.5 Z M903,55 C918.187831,55 930.5,42.6878306 930.5,27.5 C930.5,12.3121694 918.187831,0 903,0 C887.812169,0 875.5,12.3121694 875.5,27.5 C875.5,42.6878306 887.812169,55 903,55 Z M263.027523,190.5 C289.304083,190.5 308.121364,180.273822 321.470735,164.67486 C322.185034,163.840189 322.721045,161.426603 321.327744,160.275568 L299.153134,141.956652 C297.457714,140.556029 294.757606,141.251542 293.943758,141.981606 C284.811066,150.174114 276.283121,153.871025 265.355963,153.871025 C250.091743,153.871025 238.966972,146.132509 235.086239,130.913428 L323.782339,130.913428 C325.435321,130.913428 329,129.596531 329,126.880598 L329,120.853357 C329,79.8392226 306.750459,44.5 258.629358,44.5 C217.234862,44.5 188,76.7438163 188,117.5 L188,118.015901 C188,161.09364 219.045872,190.5 263.027523,190.5 Z M284,105.5 L235,105.5 C237.592593,90.1938776 246.407407,80.5 259.37037,80.5 C272.851852,80.5 282.185185,90.1938776 284,105.5 Z M414.377751,184.718744 L435.778461,117.819827 C435.946735,117.293802 436.509575,117.003787 437.0356,117.17206 C437.345716,117.271265 437.588117,117.515238 437.685316,117.825988 L458.600819,184.6941 C459.122984,186.363495 460.669273,187.5 462.418426,187.5 L498.895815,187.5 C500.65258,187.5 502.203732,186.353753 502.719524,184.674412 L543.410734,52.1899515 C544.059344,50.078175 542.873213,47.8404396 540.761436,47.1918296 C540.380918,47.0749574 539.985086,47.0155393 539.587024,47.0155393 L500.789687,47.0155393 C498.978012,47.0155393 497.392536,48.2331786 496.925114,49.9835159 L479.758709,114.265808 C479.616217,114.799394 479.068146,115.116438 478.53456,114.973946 C478.200911,114.884846 477.936847,114.629901 477.836082,114.299588 L458.017303,49.3328585 C457.503885,47.6498526 455.950944,46.5 454.191368,46.5 L419.802333,46.5 C418.045766,46.5 416.494742,47.6459914 415.978782,49.3250718 L396.176619,113.766952 C396.014396,114.294874 395.454922,114.591331 394.927,114.429108 C394.595866,114.327355 394.340981,114.061474 394.253297,113.72634 L377.580699,50.0030584 C377.120225,48.2431076 375.530153,47.0155393 373.71096,47.0155393 L334.393967,47.0155393 C332.184828,47.0155393 330.393967,48.8064003 330.393967,51.0155393 C330.393967,51.4090901 330.452046,51.8004866 330.566327,52.1770793 L370.770217,184.66154 C371.2818,186.347367 372.836116,187.5 374.597856,187.5 L410.56794,187.5 C412.307555,187.5 413.847715,186.375646 414.377751,184.718744 Z M609.892857,190.5 C644.002101,190.5 667,174.450355 667,143.64539 L667,143.12766 C667,118.664894 649.208929,108.460426 625.494477,101.002777 L623.904868,100.509543 C623.37216,100.346404 622.836658,100.184495 622.29849,100.02369 L620.676125,99.5444603 L619.038552,99.0710951 L617.386555,98.6028369 L613.001051,97.2603787 L611.189694,96.694176 L609.88794,96.27927 L608.635445,95.8713519 L607.432756,95.4691926 L606.280417,95.0715629 L605.540433,94.808386 L604.823231,94.5463117 L604.128973,94.2849759 L603.45782,94.0240145 L602.809933,93.7630631 L602.185475,93.5017577 L601.584607,93.239734 C601.486437,93.1959833 601.389256,93.1521875 601.293069,93.108339 L600.727889,92.844555 C600.543485,92.7563758 600.36308,92.6679252 600.186702,92.5791423 L599.66967,92.3117367 C599.58552,92.2669828 599.502384,92.2221307 599.420263,92.1771727 L598.939768,91.9060948 C598.783687,91.8152718 598.631699,91.723965 598.483832,91.6321135 L598.052617,91.3548645 C595.819012,89.8668424 594.647059,88.2238632 594.647059,86.177305 L594.647059,85.6595745 C594.647059,81.5177305 598.523109,78.6702128 606.016807,78.6702128 C616.381853,78.6702128 630.794334,82.9501422 644.429889,90.2492222 L645.170746,90.6470084 L645.278629,90.6877084 L645.428516,90.7318551 L645.61432,90.7746621 C645.681564,90.788176 645.75378,90.8006688 645.829952,90.8113428 L646.069325,90.8371103 C646.858502,90.8963762 647.913206,90.7194935 648.363501,89.6224742 L649.482426,86.2332564 L650.41522,83.3635462 L652.066003,78.2026376 L653.805034,72.6715009 L655.229292,68.0824946 L657.906292,59.3602096 C658.332293,57.9717378 657.777631,57.2285724 657.347441,56.8859969 L657.223223,56.7949973 L657.113105,56.7265648 L657.065405,56.7003523 C642.103147,48.8120377 624.172333,44.5 606.533613,44.5 C574.233193,44.5 550.460084,61.0673759 550.460084,90.8368794 L550.460084,91.3546099 C550.460084,115.11844 566.32928,125.416099 588.07008,132.422028 L589.614346,132.91123 L591.177336,133.390292 C591.701366,133.548378 592.228386,133.704907 592.758266,133.86001 L594.356357,134.32118 L595.970827,134.774596 L597.600894,135.221053 L599.245776,135.661348 C599.521115,135.734261 599.797038,135.80695 600.073529,135.879433 L603.575041,136.868735 L605.906341,137.539846 L607.668301,138.06027 L608.929112,138.443108 L609.740577,138.69553 L610.913911,139.070971 L611.666742,139.319726 L612.395944,139.567722 L613.101414,139.815365 L613.783052,140.063058 L614.440756,140.311206 C614.548374,140.352624 614.65499,140.394078 614.760602,140.435577 L615.382218,140.685167 C615.483808,140.726876 615.58439,140.768646 615.683962,140.810486 L616.269261,141.062428 L616.830223,141.316444 L617.366747,141.572938 L617.878732,141.832315 C621.126662,143.528516 622.813025,145.433083 622.813025,148.046099 L622.813025,148.56383 C622.813025,153.48227 618.678571,156.070922 610.151261,156.070922 C596.440715,156.070922 580.178478,151.190806 564.881159,141.650754 L564.141733,141.185503 C564.093732,141.155032 564.040729,141.123143 563.983488,141.090874 L563.79981,140.993962 L563.595278,140.900988 C562.919404,140.619369 561.998701,140.490551 561.487311,141.403508 L551.779214,170.769329 L551.450065,171.738253 C550.79398,173.603357 552.142953,174.923294 552.801936,175.310151 C570.051776,185.436717 589.878719,190.5 609.892857,190.5 Z M740.083086,182.5 L740.083086,139.826518 C740.083086,139.577805 740.175768,139.338018 740.343042,139.15396 L757.55884,120.210705 C757.930284,119.80199 758.562728,119.771776 758.971443,120.143219 C759.02977,120.196228 759.081626,120.255946 759.125931,120.32113 L802.916375,184.748531 C803.661045,185.844139 804.899841,186.5 806.224563,186.5 L856.418355,186.5 C858.627494,186.5 860.418355,184.709139 860.418355,182.5 C860.418355,181.694156 860.174957,180.907101 859.720045,180.241939 L793.703389,83.7137554 C793.445031,83.3359897 793.476098,82.831043 793.778816,82.4877974 L855.815462,12.1457707 C857.276681,10.488926 857.118095,7.96123597 855.46125,6.50001714 C854.730545,5.8555868 853.78976,5.5 852.81548,5.5 L804.406558,5.5 C803.233698,5.5 802.119934,6.01475249 801.35994,6.90806657 L741.844741,76.8635966 C741.486869,77.2842468 740.855753,77.3351391 740.435103,76.9772678 C740.211774,76.7872693 740.083086,76.5088283 740.083086,76.2156133 L740.083086,9.5 C740.083086,7.290861 738.292225,5.5 736.083086,5.5 L694,5.5 C691.790861,5.5 690,7.290861 690,9.5 L690,182.5 C690,184.709139 691.790861,186.5 694,186.5 L736.083086,186.5 C738.292225,186.5 740.083086,184.709139 740.083086,182.5 Z M928,182.5 L928,75.0824946 C928,72.8733556 926.209139,71.0824946 924,71.0824946 L883,71.0824946 C880.790861,71.0824946 879,72.8733556 879,75.0824946 L879,182.5 C879,184.709139 880.790861,186.5 883,186.5 L924,186.5 C926.209139,186.5 928,184.709139 928,182.5 Z M1013.35092,189.5 C1025.71919,189.5 1036.40257,186.764504 1044.83085,182.622854 L1045.44285,182.317168 L1045.60937,182.227026 L1045.78895,182.119754 C1046.52796,181.653073 1047.48285,180.715298 1047.48285,178.586712 L1047.48285,145.854246 C1047.48285,144.165121 1046.13184,143.992466 1045.13243,144.162007 L1044.90881,144.206672 C1044.87284,144.21495 1044.83758,144.223601 1044.80314,144.232558 L1044.60696,144.289433 C1044.54533,144.309258 1044.48771,144.329772 1044.43489,144.35044 L1044.35935,144.38149 C1039.37124,146.413468 1034.2066,147.648041 1028.86544,147.648041 C1019.8153,147.648041 1015.41953,143.514514 1015.41953,133.697388 L1015.41953,87.1618287 C1015.41953,86.609544 1015.86724,86.1618287 1016.41953,86.1618287 L1044,86.1618287 C1046.20914,86.1618287 1048,84.3709677 1048,82.1618287 L1048,50.8933237 C1048,48.6841847 1046.20914,46.8933237 1044,46.8933237 L1016.41953,46.8933237 C1015.86724,46.8933237 1015.41953,46.4456084 1015.41953,45.8933237 L1015.41953,15.5 C1015.41953,13.290861 1013.62866,11.5 1011.41953,11.5 L970.548813,11.5 C968.339674,11.5 966.548813,13.290861 966.548813,15.5 L966.548813,45.8933237 C966.548813,46.4456084 966.101097,46.8933237 965.548813,46.8933237 L954,46.8933237 C951.790861,46.8933237 950,48.6841847 950,50.8933237 L950,82.1618287 C950,84.3709677 951.790861,86.1618287 954,86.1618287 L965.548813,86.1618287 C966.101097,86.1618287 966.548813,86.609544 966.548813,87.1618287 L966.548813,143.256168 C966.548813,176.582729 983.873351,189.5 1013.35092,189.5 Z"></path></g><g transform="translate(0.000000, 0.116667)"><g transform="translate(207.496510, 125.867994) rotate(2.000000) translate(-207.496510, -125.867994) translate(4.492344, 7.592994)"><path d="M375.877049,0.215696421 C396.323202,2.72616833 406.051387,24.5382319 405.906977,53.3345184 L406.008536,53.2533299 C372.459299,80.3556122 306.390178,98.8959782 241.480649,63.6383437 L241.54818,63.541494 C251.115204,68.597871 261.22583,72.497547 273.113127,73.9571235 C287.676144,75.7452372 299.377666,67.7418812 309.994197,56.407445 L310.7507,55.5922645 C310.876484,55.4554859 311.002121,55.3182571 311.127612,55.1805889 L311.878849,54.3493941 L311.878849,54.3493941 L312.626754,53.508177 L312.626754,53.508177 L313.371473,52.657461 L313.371473,52.657461 L314.113149,51.7977691 C314.236516,51.6537682 314.359762,51.5094151 314.482891,51.3647207 L315.220272,50.492546 L315.220272,50.492546 L315.95497,49.6127035 L315.95497,49.6127035 L316.84752,48.5301073 C316.995978,48.3488419 317.14429,48.1671732 317.29246,47.9851212 L318.40118,46.6128503 L318.40118,46.6128503 L319.50512,45.2280542 L320.385172,44.1124446 L321.262753,42.9909538 L322.138122,41.8645309 L323.447601,40.1677244 L325.69509,37.2337517 L328.406356,33.6851504 L330.104566,31.4737425 L331.379227,29.8266632 L332.655668,28.1927616 L333.508026,27.1122995 L334.361787,26.0399213 L335.217197,24.9765177 L336.074499,23.9229795 L336.93394,22.8801977 L337.623197,22.0543153 L337.623197,22.0543153 L338.314104,21.2363432 L338.314104,21.2363432 L339.006787,20.4267375 L339.006787,20.4267375 L339.701372,19.6259542 C339.817302,19.4932508 339.933316,19.3609341 340.049417,19.2290135 L340.747089,18.442319 C340.863549,18.3120208 340.980101,18.1821378 341.096748,18.0526793 L341.79779,17.2810999 C342.148901,16.897934 342.500914,16.5187606 342.853898,16.1438363 L343.561183,15.3997292 C343.915494,15.0305844 344.270824,14.6658598 344.627243,14.305812 L345.341555,13.5920278 C354.408432,4.63167253 364.204592,-1.21750098 375.877049,0.215696421 Z" fill="#AEBFFF"></path><path d="M161.770583,170.547738 L161.84041,170.624548 C153.212104,166.551895 144.24466,163.480101 134.263015,162.254509 C123.659479,160.952559 114.466007,165.368171 105.981333,172.605536 L105.312951,173.182717 C104.979483,173.474186 104.64709,173.769932 104.315731,174.069779 L103.654375,174.674886 L103.654375,174.674886 L102.995697,175.29061 C102.447892,175.808048 101.902795,176.336216 101.360208,176.874288 L100.710294,177.524675 L100.710294,177.524675 L100.062712,178.184255 L100.062712,178.184255 L99.4173845,178.852709 C99.3100136,178.96484 99.2027335,179.077327 99.0955426,179.190165 L98.4534543,179.871338 C98.3466136,179.985549 98.2398589,180.100097 98.1331886,180.214975 L97.3726713,181.041061 C97.1196294,181.318236 96.8670443,181.597193 96.6148944,181.877844 L95.8597287,182.72479 C95.7340782,182.866765 95.608531,183.009141 95.4830846,183.151907 L94.731593,184.013097 L93.9823892,184.883113 L93.2353436,185.761423 L92.490327,186.647492 L92.1185391,187.093269 L92.1185391,187.093269 L91.2024752,188.201264 L90.7454158,188.758923 L89.8330904,189.88094 L89.3777634,190.445045 L88.4686288,191.578821 L87.5613172,192.719182 L86.2032351,194.439867 L84.3965671,196.747775 L80.3024344,202.005615 L78.949396,203.735743 L77.5946857,205.456843 L76.6902108,206.597551 L75.330888,208.296064 L74.4225774,209.418574 L73.5123064,210.532044 L72.5998317,211.63547 L71.6849099,212.727847 L70.9694154,213.571583 L70.2521684,214.407509 L69.5330533,215.235146 L68.8119548,216.054019 L68.0887571,216.863649 L67.3633448,217.663559 L66.6356025,218.453273 L66.2708214,218.844158 L66.2708214,218.844158 L65.5393672,219.617683 L64.9302762,220.25108 L64.9302762,220.25108 L64.3193151,220.876359 L64.3193151,220.876359 L63.7064176,221.493246 C63.3994738,221.799546 63.0917791,222.102597 62.7832963,222.402246 L62.1652691,222.996961 L62.1652691,222.996961 L61.5450744,223.58233 C61.4415243,223.679098 61.3378812,223.775465 61.2341436,223.871425 L60.6105738,224.442264 C60.1940904,224.81951 59.776052,225.190072 59.3563703,225.553584 L58.7256045,226.09352 C58.6202678,226.182613 58.5148256,226.271254 58.4092767,226.359438 L57.7746899,226.883002 C49.826056,233.357779 41.2610451,237.194553 31.4990938,235.995936 C11.228267,233.506992 1.10292483,212.127979 0.591081538,183.756083 L1.73976389e-12,184.300757 C38.7599925,148.081061 104.696743,143.264562 161.770583,170.547738 Z" fill="#3358CC"></path><path d="M256.074321,212.727064 C238.613411,210.309671 224.262278,204.984739 211.508193,198.646571 L210.353089,198.067635 C209.969492,197.873761 209.58732,197.67901 209.206531,197.483433 L208.068267,196.894281 L206.656715,196.151362 L206.656715,196.151362 L205.257235,195.401821 L204.146011,194.797834 L202.767017,194.037929 L202.767017,194.037929 L201.398713,193.27313 L200.311436,192.658184 L199.230432,192.040818 L197.620136,191.110923 L195.492675,189.865545 L195.492675,189.865545 L193.794915,188.859895 L192.109418,187.85298 L189.601863,186.343128 L183.828996,182.845666 L182.194942,181.858897 L180.15912,180.636809 L178.128868,179.429767 C172.720463,176.23334 167.349519,173.224902 161.840312,170.624502 L161.770583,170.547738 C105.267481,143.537393 40.0778412,147.987941 1.17091676,183.223588 L0.591068889,183.755382 C-0.61981987,116.613766 52.0067573,10.3111735 151.420544,22.5176516 C168.836212,24.6560268 182.794248,29.6614615 194.993697,35.7655587 L196.081529,36.3150842 C196.442603,36.499207 196.802155,36.6842617 197.160231,36.8702014 L198.230072,37.4306279 L198.761755,37.7127441 L198.761755,37.7127441 L199.818815,38.2806057 L200.867694,38.8530711 L200.867694,38.8530711 L201.908661,39.4298582 L202.426263,39.7197842 L202.426263,39.7197842 L203.712135,40.4487857 L203.712135,40.4487857 L204.986811,41.1833272 L205.998847,41.7745786 L207.004328,42.3687406 L208.003526,42.9655309 L208.996711,43.5646672 L209.984154,44.1658674 L210.966127,44.7688492 L211.942901,45.3733304 L213.533633,46.3667862 L214.324406,46.8643523 L215.897513,47.8603834 L217.460363,48.8565771 L224.398284,53.3081228 L225.926073,54.2829853 L227.45137,55.2499283 L229.356307,56.4455762 L231.261549,57.6244787 C234.424385,59.565348 237.59812,61.4270346 240.830719,63.1596166 L242.045797,63.8031855 C306.164051,98.3871368 371.221738,80.6570654 404.994721,54.0619123 L405.906976,53.3346033 C405.571936,120.134827 352.110084,224.518773 256.074321,212.727064 Z" fill="#577FFB"></path></g></g></g></g></svg></div></span></a></div></div></div><style data-emotion="css 1hq7ll">.css-1hq7ll{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1hq7ll{-webkit-order:3;-ms-flex-order:3;order:3;padding:0 8px;margin-top:16px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 1024px){.css-1hq7ll{-webkit-order:2;-ms-flex-order:2;order:2;padding:0 12px;margin-top:24px;-webkit-flex-basis:41.66666666666667%;-ms-flex-preferred-size:41.66666666666667%;flex-basis:41.66666666666667%;max-width:41.66666666666667%;}}</style><div class="css-1hq7ll"><style data-emotion="css 4b375e">.css-4b375e{height:100%;}</style><style data-emotion="css qxsyaw">.css-qxsyaw{height:100%;}@media screen{.css-qxsyaw{display:none;}}@media screen and (min-width: 480px){.css-qxsyaw{display:none;}}@media screen and (min-width: 768px){.css-qxsyaw{display:none;}}@media screen and (min-width: 1024px){.css-qxsyaw{display:block;}}@media screen and (min-width: 1440px){.css-qxsyaw{display:block;}}</style><div class="css-qxsyaw"><style data-emotion="css r0pew1">.css-r0pew1{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;margin-left:calc(-40px/2);margin-right:calc(-40px/2);}</style><div class="css-r0pew1"><style data-emotion="css 1xqatdf">.css-1xqatdf{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-left:calc(40px/2);margin-right:calc(40px/2);}</style><div class="css-1xqatdf"><style data-emotion="css uofeth">.css-uofeth{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;margin-left:calc(-40px/2);margin-right:calc(-40px/2);}</style><div class="css-uofeth"><div class="css-1xqatdf"><style data-emotion="css zqdlhl">.css-zqdlhl{padding:4px;}</style><div class="css-zqdlhl"><style data-emotion="css sta6l3">.css-sta6l3{display:inline-block;color:#535353;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-sta6l3{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-sta6l3{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-sta6l3:hover:not(:disabled){color:#535353;-webkit-text-decoration:none;text-decoration:none;}.css-sta6l3:active:not(:disabled){color:#0A0A0A;-webkit-text-decoration:none;text-decoration:none;}</style><a href="/about/introduction/" class="css-sta6l3"><span class="css-17x5lw"><style data-emotion="css 15qd7nt">.css-15qd7nt{font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;color:#535353;box-sizing:border-box;}.css-15qd7nt::before{content:'';margin-bottom:-0.403em;display:block;}.css-15qd7nt::after{content:'';margin-top:-0.4em;display:block;}</style><div class="css-15qd7nt">About</div></span></a></div></div><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/getting-started/overview/" class="css-sta6l3"><span class="css-17x5lw"><div class="css-15qd7nt">Guides</div></span></a></div></div><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/theme/overview/" class="css-sta6l3"><span class="css-17x5lw"><div class="css-15qd7nt">Theme</div></span></a></div></div><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/components/overview/" class="css-sta6l3"><span class="css-17x5lw"><style data-emotion="css 14mo9on">.css-14mo9on{font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;color:#0A0A0A;box-sizing:border-box;}.css-14mo9on::before{content:'';margin-bottom:-0.403em;display:block;}.css-14mo9on::after{content:'';margin-top:-0.4em;display:block;}</style><div aria-current="true" class="css-14mo9on">Components</div></span></a></div></div></div></div></div></div><div class="css-1xvxlxw"><style data-emotion="css v6l5fq">.css-v6l5fq{box-sizing:border-box;position:relative;overflow:hidden;height:100%;}</style><div class="css-v6l5fq"><style data-emotion="css 6uqogc">.css-6uqogc{box-sizing:border-box;height:100%;overflow-x:auto;overflow-y:auto;scroll-behavior:smooth;}.css-6uqogc::-webkit-scrollbar{display:none;}.css-6uqogc{-ms-overflow-style:none;scrollbar-width:none;}</style><div tabindex="0" data-testid="scroll-container" class="css-6uqogc"><style data-emotion="css 1jd1r41">.css-1jd1r41{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:space-around;-ms-flex-pack:space-around;-webkit-justify-content:space-around;justify-content:space-around;margin-left:calc(-40px/2);margin-right:calc(-40px/2);}</style><div class="css-1jd1r41"><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/about/introduction/" class="css-sta6l3"><span class="css-17x5lw"><div class="css-15qd7nt">About</div></span></a></div></div><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/getting-started/overview/" class="css-sta6l3"><span class="css-17x5lw"><div class="css-15qd7nt">Guides</div></span></a></div></div><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/theme/overview/" class="css-sta6l3"><span class="css-17x5lw"><div class="css-15qd7nt">Theme</div></span></a></div></div><div class="css-1xqatdf"><div class="css-zqdlhl"><a href="/components/overview/" class="css-sta6l3"><span class="css-17x5lw"><div aria-current="true" class="css-14mo9on">Components</div></span></a></div></div></div></div></div></div></div><style data-emotion="css 1q4q9om">.css-1q4q9om{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1q4q9om{-webkit-order:2;-ms-flex-order:2;order:2;padding:0 8px;margin-top:16px;margin-left:41.66666666666667%;-webkit-flex-basis:8.333333333333334%;-ms-flex-preferred-size:8.333333333333334%;flex-basis:8.333333333333334%;max-width:8.333333333333334%;}}@media screen and (min-width: 1024px){.css-1q4q9om{-webkit-order:3;-ms-flex-order:3;order:3;padding:0 12px;margin-top:24px;margin-left:0;}}</style><div class="css-1q4q9om"><style data-emotion="css vyizc4">.css-vyizc4{margin:0;cursor:pointer;}@media screen and (prefers-reduced-motion: no-preference){.css-vyizc4{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-vyizc4{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><style data-emotion="css 13nqpes">.css-13nqpes{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;width:48px;height:48px;padding:12px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#F4F4F4;border-radius:50%;margin:0;cursor:pointer;}.css-13nqpes svg{width:24px;height:24px;}.css-13nqpes:hover:not(:disabled){background-color:#CCCCCC;}.css-13nqpes:active:not(:disabled){background-color:#CCCCCC;}@media screen and (prefers-reduced-motion: no-preference){.css-13nqpes{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-13nqpes{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><button data-testid="theme-switch-button" type="button" title="Enable Dark Theme" aria-label="Enable Dark Theme" aria-pressed="false" class="css-13nqpes"><style data-emotion="css bptyib">.css-bptyib{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-left:calc(-8px/2);margin-right:calc(-8px/2);}</style><div class="css-bptyib"><style data-emotion="css 1yztr03">.css-1yztr03{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-left:calc(8px/2);margin-right:calc(8px/2);}</style><div class="css-1yztr03"><style data-emotion="css 1sb5vzf">.css-1sb5vzf{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1sb5vzf{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1sb5vzf{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1sb5vzf.css-1sb5vzf{width:24px;height:24px;}</style><svg class="css-1sb5vzf" viewBox="0 0 17 17" fill="currentColor" role="img" xmlns="http://www.w3.org/2000/svg"><title>Dark icon</title><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7349 0C12.9152 0 13.0614 0.146193 13.0614 0.326531C13.0614 1.76923 14.2309 2.93878 15.6736 2.93878C15.854 2.93878 16.0002 3.08497 16.0002 3.26531V3.59184C16.0002 3.77217 15.854 3.91837 15.6736 3.91837C14.2309 3.91837 13.0614 5.08791 13.0614 6.53061C13.0614 6.71095 12.9152 6.85714 12.7349 6.85714H12.4083C12.228 6.85714 12.0818 6.71095 12.0818 6.53061C12.0818 5.08791 10.9123 3.91837 9.46956 3.91837C9.28922 3.91837 9.14303 3.77217 9.14303 3.59184V3.26531C9.14303 3.08497 9.28922 2.93878 9.46956 2.93878C10.9123 2.93878 12.0818 1.76923 12.0818 0.326531C12.0818 0.146193 12.228 0 12.4083 0H12.7349ZM14.8384 9.78689C15.2381 9.50799 15.8414 9.80867 15.7022 10.2758C14.7157 13.5862 11.6485 16 8.01747 16C3.58955 16 0 12.4105 0 7.98253C0 4.35151 2.41376 1.28426 5.72424 0.29782C6.19133 0.158637 6.49201 0.761872 6.21311 1.16157C5.51277 2.16524 5.10203 3.38598 5.10203 4.70265C5.10203 8.12423 7.87577 10.898 11.2973 10.898C12.614 10.898 13.8348 10.4872 14.8384 9.78689Z" fill="#577FFB"></path></svg></div></div></button></div></div></div></header><style data-emotion="css 6xqfiz">.css-6xqfiz{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding-top:64px;}@media screen and (min-width: 1024px){.css-6xqfiz{padding-left:276px;padding-top:80px;}}</style><div class="css-6xqfiz"><style data-emotion="css 1ad339w">.css-1ad339w{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;background-color:#FFFFFF;overflow:hidden;}@media screen and (max-width: 1023px){.css-1ad339w{padding-top:48px;}}@media screen and (min-width: 1024px){.css-1ad339w{padding-top:12px;}}</style><main class="css-1ad339w"><style data-emotion="css 1jsu24h">.css-1jsu24h{padding-top:64px;padding-bottom:64px;}</style><div class="css-1jsu24h"><style data-emotion="css 8atxkm">.css-8atxkm{width:100%;max-width:1920px;margin:0 auto;}</style><div class="css-8atxkm"><style data-emotion="css 1jls4h1">.css-1jls4h1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1jls4h1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1jls4h1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1jls4h1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1jls4h1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1jls4h1{margin:-0px 12px 0 12px;}}</style><div class="css-1jls4h1"><style data-emotion="css 1uhwsex">.css-1uhwsex{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1uhwsex{padding:0 8px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 1024px){.css-1uhwsex{padding:0 12px;}}</style><div class="css-1uhwsex"><style data-emotion="css 2r06oq">@media screen and (max-width: 767px){.css-2r06oq{margin-bottom:0;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-2r06oq{margin-bottom:12px;}}@media screen and (min-width: 1024px){.css-2r06oq{margin-bottom:40px;}}</style><div class="css-2r06oq"></div><style data-emotion="css 1ndfc0u">.css-1ndfc0u{margin-top:-24px;padding-top:24px;}</style><section id="introduction" data-toc-indexed="Introduction" class="css-1ndfc0u"><div class="css-8atxkm"><style data-emotion="css 16g593b">.css-16g593b{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-16g593b{margin:-0px -8px 0 -8px;}}@media screen and (min-width: 480px){.css-16g593b{margin:-0px -8px 0 -8px;}}@media screen and (min-width: 768px){.css-16g593b{margin:-0px -8px 0 -8px;}}@media screen and (min-width: 1024px){.css-16g593b{margin:-0px -12px 0 -12px;}}@media screen and (min-width: 1440px){.css-16g593b{margin:-0px -12px 0 -12px;}}</style><div class="css-16g593b"><style data-emotion="css 12v76db">.css-12v76db{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-12v76db{padding:0 8px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-12v76db{margin-left:8.333333333333334%;-webkit-flex-basis:83.33333333333334%;-ms-flex-preferred-size:83.33333333333334%;flex-basis:83.33333333333334%;max-width:83.33333333333334%;}}@media screen and (min-width: 1024px){.css-12v76db{padding:0 12px;}}@media screen and (min-width: 1440px){.css-12v76db{-webkit-flex-basis:66.66666666666667%;-ms-flex-preferred-size:66.66666666666667%;flex-basis:66.66666666666667%;max-width:66.66666666666667%;}}</style><div class="css-12v76db"><style data-emotion="css c42g5g">@media screen and (max-width: 767px){.css-c42g5g{margin-bottom:32px;}}@media screen and (min-width: 768px){.css-c42g5g{margin-bottom:40px;}}</style><div class="css-c42g5g"><style data-emotion="css 24uh7l">.css-24uh7l{margin:0;color:#577FFB;}.css-24uh7l svg{fill:#577FFB;}@media screen and (max-width: 767px){.css-24uh7l{font-family:"Poppins",sans-serif;font-size:18px;line-height:20.25px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-24uh7l::before{content:'';margin-bottom:-0.2155em;display:block;}.css-24uh7l::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 768px){.css-24uh7l{font-family:"Poppins",sans-serif;font-size:22px;line-height:24.75px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-24uh7l::before{content:'';margin-bottom:-0.2155em;display:block;}.css-24uh7l::after{content:'';margin-top:-0.2125em;display:block;}}</style><p class="css-24uh7l">Navigation</p></div><style data-emotion="css 177d1no">@media screen and (max-width: 767px){.css-177d1no{margin-bottom:24px;}}@media screen and (min-width: 768px){.css-177d1no{margin-bottom:40px;}}</style><div class="css-177d1no"><style data-emotion="css 1xpja04">.css-1xpja04{margin:0;color:#0A0A0A;}.css-1xpja04 svg{fill:#0A0A0A;}@media screen and (max-width: 767px){.css-1xpja04{font-family:"Poppins",sans-serif;font-size:32px;line-height:36px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1xpja04::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1xpja04::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1xpja04{font-family:"Poppins",sans-serif;font-size:36px;line-height:40.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1xpja04::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1xpja04::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1024px){.css-1xpja04{font-family:"Poppins",sans-serif;font-size:40px;line-height:45px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1xpja04::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1xpja04::after{content:'';margin-top:-0.2125em;display:block;}}</style><h1 class="css-1xpja04">Menu</h1></div></div><style data-emotion="css 15fgmbf">.css-15fgmbf{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-15fgmbf{padding:0 8px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-15fgmbf{margin-left:8.333333333333334%;-webkit-flex-basis:66.66666666666667%;-ms-flex-preferred-size:66.66666666666667%;flex-basis:66.66666666666667%;max-width:66.66666666666667%;}}@media screen and (min-width: 1024px){.css-15fgmbf{padding:0 12px;-webkit-flex-basis:83.33333333333334%;-ms-flex-preferred-size:83.33333333333334%;flex-basis:83.33333333333334%;max-width:83.33333333333334%;}}@media screen and (min-width: 1440px){.css-15fgmbf{-webkit-flex-basis:66.66666666666667%;-ms-flex-preferred-size:66.66666666666667%;flex-basis:66.66666666666667%;max-width:66.66666666666667%;}}</style><div class="css-15fgmbf"><style data-emotion="css 1a1fasq">@media screen and (max-width: 767px){.css-1a1fasq{margin-bottom:40px;}}@media screen and (min-width: 768px){.css-1a1fasq{margin-bottom:48px;}}</style><div class="css-1a1fasq"><style data-emotion="css 6jeh1s">.css-6jeh1s{margin:0;color:#2E2E2E;}.css-6jeh1s svg{fill:#2E2E2E;}@media screen and (max-width: 767px){.css-6jeh1s{font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-6jeh1s::before{content:'';margin-bottom:-0.403em;display:block;}.css-6jeh1s::after{content:'';margin-top:-0.4em;display:block;}}@media screen and (min-width: 768px){.css-6jeh1s{font-family:"Poppins",sans-serif;font-size:20px;line-height:30px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-6jeh1s::before{content:'';margin-bottom:-0.403em;display:block;}.css-6jeh1s::after{content:'';margin-top:-0.4em;display:block;}}</style><p class="css-6jeh1s">A Menu displays a list of navigational items. They are displayed either at the top of a screen, or at the side where space allows.</p></div></div><div class="css-12v76db"><style data-emotion="css 1ixemgk">.css-1ixemgk{border-radius:12px;overflow:hidden;}@media screen and (max-width: 767px){.css-1ixemgk{margin-bottom:0;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1ixemgk{margin-bottom:12px;}}@media screen and (min-width: 1024px){.css-1ixemgk{margin-bottom:4px;}}</style><div class="css-1ixemgk"><style data-emotion="css xcdytv">.css-xcdytv{width:100%;height:auto;}</style><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div></div><div class="css-12v76db"><style data-emotion="css 38y4ob">.css-38y4ob{margin-bottom:32px;}</style><div class="css-38y4ob"></div><style data-emotion="css mvfmea">@media screen and (max-width: 767px){.css-mvfmea{margin-bottom:48px;}}@media screen and (min-width: 768px){.css-mvfmea{margin-bottom:24px;}}</style><div class="css-mvfmea"><style data-emotion="css 1nlep1q">@media screen{.css-1nlep1q{display:none;}}@media screen and (min-width: 480px){.css-1nlep1q{display:none;}}@media screen and (min-width: 768px){.css-1nlep1q{display:block;}}@media screen and (min-width: 1024px){.css-1nlep1q{display:block;}}@media screen and (min-width: 1440px){.css-1nlep1q{display:block;}}</style><div class="css-1nlep1q"><style data-emotion="css 1bq9n3y">.css-1bq9n3y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}</style><div class="css-1bq9n3y"><style data-emotion="css 14f0ndj">.css-14f0ndj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}</style><div class="css-14f0ndj"><style data-emotion="css x5nivz">.css-x5nivz{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;margin-top:calc(-16px/2);margin-bottom:calc(-16px/2);}</style><div class="css-x5nivz"><style data-emotion="css zodxql">.css-zodxql{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-top:calc(16px/2);margin-bottom:calc(16px/2);}</style><div class="css-zodxql"><style data-emotion="css ts9mdp">.css-ts9mdp{font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-ts9mdp::before{content:'';margin-bottom:-0.403em;display:block;}.css-ts9mdp::after{content:'';margin-top:-0.4em;display:block;}</style><section class="css-ts9mdp"><style data-emotion="css 5gd387">.css-5gd387{display:inline;font:inherit;margin:0;color:#0A0A0A;}.css-5gd387 svg{fill:#0A0A0A;}</style><h1 class="nk-headline-heading css-5gd387">Status</h1></section></div><div class="css-zodxql"><style data-emotion="css 1u8h2f4">.css-1u8h2f4{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:24px;padding:4px 8px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;color:#FFFFFF;background-color:#577FFB;border-radius:8px;white-space:nowrap;}.css-1u8h2f4 svg{width:16px;height:16px;}.css-1u8h2f4 svg{fill:#FFFFFF;}</style><div data-testid="flag" class="css-1u8h2f4"><style data-emotion="css m556v">.css-m556v{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-left:calc(-4px/2);margin-right:calc(-4px/2);}</style><div class="css-m556v"><style data-emotion="css 14dqn90">.css-14dqn90{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-left:calc(4px/2);margin-right:calc(4px/2);}</style><div class="css-14dqn90"><div class="css-zqdlhl"><style data-emotion="css fdydp7">.css-fdydp7{margin:0;font-family:"Poppins",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-fdydp7::before{content:'';margin-bottom:-0.403em;display:block;}.css-fdydp7::after{content:'';margin-top:-0.4em;display:block;}</style><p class="css-fdydp7">Supported</p></div></div></div></div></div></div><style data-emotion="css sbdy65">.css-sbdy65{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}</style><div class="css-sbdy65"><style data-emotion="css x33mki">@media screen and (min-width: 768px){.css-x33mki{margin-right:32px;}}</style><div class="css-x33mki"></div><style data-emotion="css 1iuisv4">.css-1iuisv4{border-style:solid;border-color:#E4E4E4;border-width:1px;border-width:0px;margin:0;border-left-width:1px;display:inline-block;height:100%;}</style><hr data-testid="divider" aria-hidden="true" class="css-1iuisv4"/><div class="css-x33mki"></div></div><style data-emotion="css 6pevaf">.css-6pevaf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;margin-top:calc(-24px/2);margin-bottom:calc(-24px/2);}</style><div class="css-6pevaf"><style data-emotion="css 4niat4">.css-4niat4{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-top:calc(24px/2);margin-bottom:calc(24px/2);}</style><div class="css-4niat4"><section class="css-ts9mdp"><h1 class="nk-headline-heading css-5gd387">Introduced</h1></section></div><div class="css-4niat4"><style data-emotion="css g09sk7">.css-g09sk7{display:inline-block;color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}@media screen and (prefers-reduced-motion: no-preference){.css-g09sk7{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-g09sk7{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-g09sk7 svg{fill:#577FFB;}.css-g09sk7:hover:not(:disabled){color:#3358CC;-webkit-text-decoration:underline;text-decoration:underline;}.css-g09sk7:hover:not(:disabled) svg{fill:#3358CC;}.css-g09sk7:active:not(:disabled){color:#213A82;-webkit-text-decoration:underline;text-decoration:underline;}.css-g09sk7:active:not(:disabled) svg{fill:#213A82;}.css-g09sk7:visited:not(:disabled){color:#5E44E4;-webkit-text-decoration:underline;text-decoration:underline;}.css-g09sk7:visited:not(:disabled) svg{fill:#5E44E4;}.css-g09sk7:visited:hover:not(:disabled){color:#5E44E4;-webkit-text-decoration:underline;text-decoration:underline;}.css-g09sk7:visited:hover:not(:disabled) svg{fill:#5E44E4;}</style><a href="https://github.com/newscorp-ghfb/ncu-newskit/releases/tag/v3.3.0" target="_blank" class="css-g09sk7"><span class="css-17x5lw"><style data-emotion="css 13sihnu">.css-13sihnu{margin:0;font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-13sihnu::before{content:'';margin-bottom:-0.403em;display:block;}.css-13sihnu::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-13sihnu">v3.3.0</span></span></a></div></div></div><style data-emotion="css qd6fs9">.css-qd6fs9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;margin-left:calc(-16px/2);margin-right:calc(-16px/2);}</style><div class="css-qd6fs9"><style data-emotion="css 13p2hek">.css-13p2hek{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-left:calc(16px/2);margin-right:calc(16px/2);-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}</style><div class="css-13p2hek"><style data-emotion="css bqs04">.css-bqs04{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:44px;width:100%;padding:8px 12px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:transparent;border-style:solid;border-color:#535353;border-width:1px;border-radius:8px;color:#2E2E2E;margin:0;cursor:pointer;}.css-bqs04 svg{width:16px;height:16px;}.css-bqs04 svg{fill:#2E2E2E;}.css-bqs04:hover:not(:disabled){background-color:#F4F4F4;border-color:#2E2E2E;}.css-bqs04:active:not(:disabled){background-color:#CCCCCC;border-color:#0A0A0A;}.css-bqs04:disabled{border-color:#F4F4F4;color:#C0C0C0;}.css-bqs04:disabled svg{fill:#C0C0C0;}@media screen and (prefers-reduced-motion: no-preference){.css-bqs04{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-bqs04{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><a data-testid="buttonLink" href="https://github.com/newscorp-ghfb/newskit/tree/main/src/menu" target="_blank" class="css-bqs04"><div class="css-bptyib"><div class="css-1yztr03"><style data-emotion="css e6cuxb">.css-e6cuxb{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-e6cuxb{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-e6cuxb{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><svg class="css-e6cuxb" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="nonzero" d="M11.9990792,2 C6.47773105,2 2,6.47565999 2,11.9970521 C2,16.4137976 4.86503576,20.1603908 8.83876117,21.4822847 C9.33908346,21.5743385 9.5214095,21.2656512 9.5214095,21.000536 C9.5214095,20.7636506 9.512815,20.1346157 9.50790386,19.3006075 C6.72635747,19.904481 6.13947635,17.9603029 6.13947635,17.9603029 C5.68458209,16.8053335 5.02894503,16.4978735 5.02894503,16.4978735 C4.12099819,15.878044 5.09770097,15.8903179 5.09770097,15.8903179 C6.10141502,15.9608925 6.62936247,16.9207077 6.62936247,16.9207077 C7.52134811,18.4481885 8.97013414,18.0069436 9.53982627,17.7510338 C9.63068234,17.1054292 9.88913104,16.6647979 10.174591,16.415025 C7.95414224,16.1627974 5.6195095,15.3048551 5.6195095,11.4741861 C5.6195095,10.3830406 6.00933116,9.49011794 6.64900703,8.79173579 C6.54587311,8.53889444 6.20270727,7.52200584 6.74722981,6.14610707 C6.74722981,6.14610707 7.5864207,5.87730972 9.4968538,7.17097368 C10.2943,6.94881697 11.150066,6.8383523 12.0003069,6.83405645 C12.849934,6.8383523 13.7050861,6.94881697 14.5037601,7.17097368 C16.4129654,5.87730972 17.2509285,6.14610707 17.2509285,6.14610707 C17.7966788,7.52200584 17.453513,8.53889444 17.350993,8.79173579 C17.9918966,9.49011794 18.3786488,10.3830406 18.3786488,11.4741861 C18.3786488,15.3146742 16.0403327,16.1597289 13.8131312,16.407047 C14.1716443,16.7157344 14.4914822,17.3257448 14.4914822,18.2585575 C14.4914822,19.5945663 14.4792044,20.6728241 14.4792044,21.000536 C14.4792044,21.2681059 14.6596888,21.5792481 15.1667639,21.481671 C19.1374198,20.1567087 22,16.4125702 22,11.9970521 C22,6.47565999 17.5222689,2 11.9990792,2"></path></svg></div><div class="css-1yztr03"><style data-emotion="css mir38c">.css-mir38c{margin:0;font-family:"Poppins",sans-serif;font-size:12px;line-height:18px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;}.css-mir38c::before{content:'';margin-bottom:-0.403em;display:block;}.css-mir38c::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-mir38c">View code</span></div></div></a></div><style data-emotion="css 1jnyopt">.css-1jnyopt{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-left:calc(16px/2);margin-right:calc(16px/2);}</style><div class="css-1jnyopt"></div></div></div><style data-emotion="css 16in0m0">.css-16in0m0{margin-bottom:24px;}</style><div class="css-16in0m0"></div><style data-emotion="css 1a12fxg">.css-1a12fxg{border-style:solid;border-color:#E4E4E4;border-width:1px;border-width:0px;margin:0;border-top-width:1px;width:100%;}</style><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div><div class="css-1k3e0au"><div class="css-6pevaf"><style data-emotion="css 1782q00">.css-1782q00{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;margin-top:calc(24px/2);margin-bottom:calc(24px/2);-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}</style><div class="css-1782q00"><style data-emotion="css 1divpvu">.css-1divpvu{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1divpvu{padding:0 8px;-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;}}@media screen and (min-width: 1024px){.css-1divpvu{padding:0 12px;}}</style><div class="css-1divpvu"><div class="css-x5nivz"><div class="css-zodxql"><section class="css-ts9mdp"><h1 class="nk-headline-heading css-5gd387">Status</h1></section></div><div class="css-zodxql"><div data-testid="flag" class="css-1u8h2f4"><div class="css-m556v"><div class="css-14dqn90"><div class="css-zqdlhl"><p class="css-fdydp7">Supported</p></div></div></div></div></div></div></div><div class="css-1divpvu"><div class="css-14f0ndj"><hr data-testid="divider" aria-hidden="true" class="css-1iuisv4"/><style data-emotion="css w6ajbs">.css-w6ajbs{margin-right:32px;}</style><div class="css-w6ajbs"></div><style data-emotion="css 18zlc2m">.css-18zlc2m{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-around;-ms-flex-pack:space-around;-webkit-justify-content:space-around;justify-content:space-around;margin-top:calc(-8px/2);margin-bottom:calc(-8px/2);}.css-18zlc2m:before,.css-18zlc2m:after{content:'';display:block;}</style><div class="css-18zlc2m"></div><div class="css-6pevaf"><div class="css-4niat4"><section class="css-ts9mdp"><h1 class="nk-headline-heading css-5gd387">Introduced</h1></section></div><div class="css-4niat4"><a href="https://github.com/newscorp-ghfb/ncu-newskit/releases/tag/v3.3.0" target="_blank" class="css-g09sk7"><span class="css-17x5lw"><span class="css-13sihnu">v3.3.0</span></span></a></div></div></div></div></div><div class="css-1782q00"><div class="css-8atxkm"><style data-emotion="css 1ji12ea">.css-1ji12ea{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1ji12ea{margin:-16px -8px 0 -8px;}}@media screen and (min-width: 480px){.css-1ji12ea{margin:-16px -8px 0 -8px;}}@media screen and (min-width: 768px){.css-1ji12ea{margin:-16px -8px 0 -8px;}}@media screen and (min-width: 1024px){.css-1ji12ea{margin:-24px -12px 0 -12px;}}@media screen and (min-width: 1440px){.css-1ji12ea{margin:-24px -12px 0 -12px;}}</style><div class="css-1ji12ea"><style data-emotion="css 6gys8z">.css-6gys8z{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-6gys8z{padding:0 8px;margin-top:16px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 1024px){.css-6gys8z{padding:0 12px;margin-top:24px;}}</style><div class="css-6gys8z"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><div class="css-16in0m0"></div><a data-testid="buttonLink" href="https://github.com/newscorp-ghfb/newskit/tree/main/src/menu" target="_blank" class="css-bqs04"><div class="css-bptyib"><div class="css-1yztr03"><svg class="css-e6cuxb" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="nonzero" d="M11.9990792,2 C6.47773105,2 2,6.47565999 2,11.9970521 C2,16.4137976 4.86503576,20.1603908 8.83876117,21.4822847 C9.33908346,21.5743385 9.5214095,21.2656512 9.5214095,21.000536 C9.5214095,20.7636506 9.512815,20.1346157 9.50790386,19.3006075 C6.72635747,19.904481 6.13947635,17.9603029 6.13947635,17.9603029 C5.68458209,16.8053335 5.02894503,16.4978735 5.02894503,16.4978735 C4.12099819,15.878044 5.09770097,15.8903179 5.09770097,15.8903179 C6.10141502,15.9608925 6.62936247,16.9207077 6.62936247,16.9207077 C7.52134811,18.4481885 8.97013414,18.0069436 9.53982627,17.7510338 C9.63068234,17.1054292 9.88913104,16.6647979 10.174591,16.415025 C7.95414224,16.1627974 5.6195095,15.3048551 5.6195095,11.4741861 C5.6195095,10.3830406 6.00933116,9.49011794 6.64900703,8.79173579 C6.54587311,8.53889444 6.20270727,7.52200584 6.74722981,6.14610707 C6.74722981,6.14610707 7.5864207,5.87730972 9.4968538,7.17097368 C10.2943,6.94881697 11.150066,6.8383523 12.0003069,6.83405645 C12.849934,6.8383523 13.7050861,6.94881697 14.5037601,7.17097368 C16.4129654,5.87730972 17.2509285,6.14610707 17.2509285,6.14610707 C17.7966788,7.52200584 17.453513,8.53889444 17.350993,8.79173579 C17.9918966,9.49011794 18.3786488,10.3830406 18.3786488,11.4741861 C18.3786488,15.3146742 16.0403327,16.1597289 13.8131312,16.407047 C14.1716443,16.7157344 14.4914822,17.3257448 14.4914822,18.2585575 C14.4914822,19.5945663 14.4792044,20.6728241 14.4792044,21.000536 C14.4792044,21.2681059 14.6596888,21.5792481 15.1667639,21.481671 C19.1374198,20.1567087 22,16.4125702 22,11.9970521 C22,6.47565999 17.5222689,2 11.9990792,2"></path></svg></div><div class="css-1yztr03"><span class="css-mir38c">View code</span></div></div></a></div><div class="css-6gys8z"><div class="css-16in0m0"></div><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div></div></div></div></div></div><style data-emotion="css 1jgu70a">@media screen and (max-width: 767px){.css-1jgu70a{margin-bottom:0;}}@media screen and (min-width: 768px){.css-1jgu70a{margin-bottom:80px;}}</style><div class="css-1jgu70a"></div></div></div></div></section></div><div class="css-1uhwsex"><section id="interactive-demo" data-toc-indexed="Interactive Demo" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><style data-emotion="css 1lwsjcx">@media screen and (max-width: 767px){.css-1lwsjcx{margin-bottom:24px;}}@media screen and (min-width: 768px){.css-1lwsjcx{margin-bottom:32px;}}</style><div class="css-1lwsjcx"><style data-emotion="css 16vfhq">.css-16vfhq{padding:0;background-color:transparent;}</style><style data-emotion="css klpn0c">.css-klpn0c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;padding:0;background-color:transparent;}</style><div class="css-klpn0c"><style data-emotion="css w6gvpm">.css-w6gvpm{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}</style><style data-emotion="css dzecoh">.css-dzecoh{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}</style><div class="css-dzecoh"><style data-emotion="css vj7jmi">@media screen and (max-width: 767px){.css-vj7jmi{font-family:"Poppins",sans-serif;font-size:24px;line-height:27px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-vj7jmi::before{content:'';margin-bottom:-0.2155em;display:block;}.css-vj7jmi::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 768px){.css-vj7jmi{font-family:"Poppins",sans-serif;font-size:28px;line-height:31.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-vj7jmi::before{content:'';margin-bottom:-0.2155em;display:block;}.css-vj7jmi::after{content:'';margin-top:-0.2125em;display:block;}}</style><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Interactive Demo</h2></section></div></div></div><style data-emotion="css 1trj2hr">@media screen and (max-width: 1023px){.css-1trj2hr{margin-bottom:48px;}}@media screen and (min-width: 1024px){.css-1trj2hr{margin-bottom:80px;}}</style><div class="css-1trj2hr"><style data-emotion="css 1npcurr">.css-1npcurr{margin:0;color:#2E2E2E;font-family:"Poppins",sans-serif;font-size:20px;line-height:30px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1npcurr svg{fill:#2E2E2E;}.css-1npcurr::before{content:'';margin-bottom:-0.403em;display:block;}.css-1npcurr::after{content:'';margin-top:-0.4em;display:block;}</style><p class="css-1npcurr">This demo allows you to preview the Menu component, its variations, and configuration options.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-16in0m0"><style data-emotion="css 1pr6u80">.css-1pr6u80{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-shadow:0 3px 4px 2px #FFFFFF;background-color:#FFFFFF;}</style><div class="css-1pr6u80"><style data-emotion="css 145p4eu">.css-145p4eu{color:#2E2E2E;background-color:#FFFFFF;border:solid 1px;border-radius:12px 12px 0px 0px;border-color:#EBEBEB;padding:40px;min-height:280px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}</style><div data-testid="playground-element" class="css-145p4eu"><style data-emotion="css 1wc0ai4">.css-1wc0ai4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.css-1wc0ai4>nav{width:500px;}</style><div class="css-1wc0ai4"><style data-emotion="css pn6sws">.css-pn6sws{box-sizing:border-box;width:100%;}.css-pn6sws >ul{box-sizing:border-box;list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;}.css-pn6sws li:last-of-type{margin-right:0;}</style><nav role="navigation" data-testid="menu-container" aria-label="menu" class="css-pn6sws"><ul role="list"><style data-emotion="css edy074">.css-edy074{box-sizing:border-box;margin-right:8px;}.css-edy074 >ul{box-sizing:border-box;list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><li class="nk-menu-group css-edy074"><ul><style data-emotion="css 14eejl6">.css-14eejl6{box-sizing:border-box;margin-right:8px;}</style><li class="nk-menu-item css-14eejl6"><style data-emotion="css 19wq1j1">.css-19wq1j1{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;text-align:center;}</style><style data-emotion="css t4shar">.css-t4shar{margin:0;cursor:pointer;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;text-align:center;}@media screen and (prefers-reduced-motion: no-preference){.css-t4shar{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-t4shar{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><style data-emotion="css 3ykm1i">.css-3ykm1i{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:48px;width:100%;padding:12px 16px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:transparent;border-style:solid;border-color:transparent;border-width:0 0 2px 0;color:#535353;margin:0;cursor:pointer;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;text-align:center;}.css-3ykm1i svg{width:24px;height:24px;}.css-3ykm1i svg{fill:#535353;}.css-3ykm1i:hover:not(:disabled){border-color:#577FFB;color:#2E2E2E;}.css-3ykm1i:hover:not(:disabled) svg{fill:#2E2E2E;}.css-3ykm1i:active:not(:disabled){border-color:#3358CC;color:#0A0A0A;}.css-3ykm1i:active:not(:disabled) svg{fill:#0A0A0A;}.css-3ykm1i:selected:hover:not(:disabled){border-color:#577FFB;color:#2E2E2E;}.css-3ykm1i:selected:hover:not(:disabled) svg{fill:#2E2E2E;}.css-3ykm1i:disabled{color:#C0C0C0;}.css-3ykm1i:disabled svg{fill:#C0C0C0;}@media screen and (prefers-reduced-motion: no-preference){.css-3ykm1i{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-3ykm1i{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><a data-testid="buttonLink" href="http://newskit.co.uk" class="css-3ykm1i"><div class="css-bptyib"><div class="css-1yztr03"><style data-emotion="css 4zs4vc">.css-4zs4vc{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;}.css-4zs4vc::before{content:'';margin-bottom:-0.403em;display:block;}.css-4zs4vc::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-4zs4vc">Group 1-item 1</span></div></div></a></li><li class="nk-menu-item css-14eejl6"><a data-testid="buttonLink" href="http://newskit.co.uk" class="css-3ykm1i"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Group 1-item 2</span></div></div></a></li><li class="nk-menu-item css-14eejl6"><a data-testid="buttonLink" href="http://newskit.co.uk" class="css-3ykm1i"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Group 1-item 3</span></div></div></a></li></ul></li><style data-emotion="css 1v5tfiw">.css-1v5tfiw{box-sizing:border-box;}.nk-menu-group+.css-1v5tfiw{margin-right:24px;}.nk-menu-item+.css-1v5tfiw{margin-right:8px;}</style><li role="separator" aria-hidden="true" class="css-1v5tfiw"><hr data-testid="divider" aria-hidden="true" class="css-1iuisv4"/></li><li class="nk-menu-group css-edy074"><ul><li class="nk-menu-item css-14eejl6"><a data-testid="buttonLink" href="http://newskit.co.uk" class="css-3ykm1i"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Group 2-item 1</span></div></div></a></li><li class="nk-menu-item css-14eejl6"><a data-testid="buttonLink" href="http://newskit.co.uk" class="css-3ykm1i"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Group 2-item 2</span></div></div></a></li><li class="nk-menu-item css-14eejl6"><a data-testid="buttonLink" href="http://newskit.co.uk" class="css-3ykm1i"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Group 2-item 3</span></div></div></a></li></ul></li><li role="separator" aria-hidden="true" class="css-1v5tfiw"><hr data-testid="divider" aria-hidden="true" class="css-1iuisv4"/></li></ul></nav></div></div><style data-emotion="css pc7kvg">.css-pc7kvg{color:#2E2E2E;border:solid 1px;border-radius:0px 0px 0px 0px;border-color:#EBEBEB;padding:40px;max-height:450px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;-webkit-align-items:left;-webkit-box-align:left;-ms-flex-align:left;align-items:left;overflow:scroll;}</style><div class="css-pc7kvg"><style data-emotion="css 1i24b5q">.css-1i24b5q{margin-bottom:16px;margin-right:8px;width:100%;}</style><div class="css-1i24b5q"><style data-emotion="css 13s85fp">.css-13s85fp{display:inline;position:relative;}</style><div class="css-13s85fp"><style data-emotion="css 1hx0p65">.css-1hx0p65{border:none;margin:0;padding:0;margin-bottom:24px;}</style><fieldset class="css-1hx0p65"><style data-emotion="css fgzbl">.css-fgzbl{display:block;margin:12px 0px;font-family:"Poppins",sans-serif;font-size:14px;line-height:1.5;font-weight:500;letter-spacing:0;color:#2E2E2E;}</style><legend class="css-fgzbl">Size</legend><style data-emotion="css e4fcmn">.css-e4fcmn{display:inline;position:absolute;opacity:0;z-index:-1;}</style><input type="radio" id="multichoice-knob-nk-324-MenuItemSize.Small-small" data-testid="small" name="nk-325Size" class="css-e4fcmn"/><style data-emotion="css 1rsasmr">.css-1rsasmr{display:inline-block;font-family:"DM Sans",sans-serif;font-size:12px;line-height:1.5;font-weight:400;letter-spacing:0;padding:8px 16px;background-color:#F4F4F4;color:#535353;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.css-1rsasmr:first-of-type{border-top-left-radius:8px;border-bottom-left-radius:8px;}.css-1rsasmr:last-of-type{border-top-right-radius:8px;border-bottom-right-radius:8px;}input:checked+.css-1rsasmr{background-color:#577FFB;color:#F4F4F4;}input:focus+.css-1rsasmr{outline:none;background-color:#213A82;}.css-1rsasmr:hover{background-color:#F4F4F4;}</style><label for="multichoice-knob-nk-324-MenuItemSize.Small-small" class="css-1rsasmr">MenuItemSize.Small</label><input type="radio" id="multichoice-knob-nk-326-MenuItemSize.Medium-medium" data-testid="medium" name="nk-327Size" class="css-e4fcmn" checked=""/><label for="multichoice-knob-nk-326-MenuItemSize.Medium-medium" class="css-1rsasmr">MenuItemSize.Medium</label><input type="radio" id="multichoice-knob-nk-328-MenuItemSize.Large-large" data-testid="large" name="nk-329Size" class="css-e4fcmn"/><label for="multichoice-knob-nk-328-MenuItemSize.Large-large" class="css-1rsasmr">MenuItemSize.Large</label></fieldset></div></div><div class="css-1i24b5q"><div class="css-13s85fp"><fieldset class="css-1hx0p65"><legend class="css-fgzbl">vertical</legend><input type="radio" id="multichoice-knob-nk-330-True-true" data-testid="true" name="nk-331vertical" class="css-e4fcmn"/><label for="multichoice-knob-nk-330-True-true" class="css-1rsasmr">True</label><input type="radio" id="multichoice-knob-nk-332-False-false" data-testid="false" name="nk-333vertical" class="css-e4fcmn" checked=""/><label for="multichoice-knob-nk-332-False-false" class="css-1rsasmr">False</label></fieldset></div></div><div class="css-1i24b5q"><div class="css-13s85fp"><fieldset class="css-1hx0p65"><legend class="css-fgzbl">Align</legend><input type="radio" id="multichoice-knob-nk-334-MenuItemAlign.Center-center" data-testid="center" name="nk-335Align" class="css-e4fcmn" checked=""/><label for="multichoice-knob-nk-334-MenuItemAlign.Center-center" class="css-1rsasmr">MenuItemAlign.Center</label><input type="radio" id="multichoice-knob-nk-336-MenuItemAlign.Start-start" data-testid="start" name="nk-337Align" class="css-e4fcmn"/><label for="multichoice-knob-nk-336-MenuItemAlign.Start-start" class="css-1rsasmr">MenuItemAlign.Start</label><input type="radio" id="multichoice-knob-nk-338-MenuItemAlign.End-end" data-testid="end" name="nk-339Align" class="css-e4fcmn"/><label for="multichoice-knob-nk-338-MenuItemAlign.End-end" class="css-1rsasmr">MenuItemAlign.End</label></fieldset></div></div><div class="css-1i24b5q"><div class="css-13s85fp"><fieldset class="css-1hx0p65"><legend class="css-fgzbl">Space Inline</legend><input type="radio" id="multichoice-knob-nk-340-Default-[object Object]" data-testid="[object Object]" name="nk-341Space Inline" class="css-e4fcmn" checked=""/><label for="multichoice-knob-nk-340-Default-[object Object]" class="css-1rsasmr">Default</label><input type="radio" id="multichoice-knob-nk-342-space020-[object Object]" data-testid="[object Object]" name="nk-343Space Inline" class="css-e4fcmn"/><label for="multichoice-knob-nk-342-space020-[object Object]" class="css-1rsasmr">space020</label></fieldset></div></div></div><style data-emotion="css gyeoj4">.css-gyeoj4{color:#2E2E2E;border:solid 1px;border-radius:0px 0px 12px 12px;border-color:#EBEBEB;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:start;justify-content:start;-webkit-align-items:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start;}</style><div class="css-gyeoj4"><style data-emotion="css 19o76y6">.css-19o76y6{font-family:'DM Mono',courier;font-weight:400;font-size:16px;line-height:1.5;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:space-between;-webkit-box-align:space-between;-ms-flex-align:space-between;align-items:space-between;}</style><div class="css-19o76y6"><style data-emotion="css 1x1qn11">.css-1x1qn11{padding:24px;padding-top:16px;}</style><div class="css-1x1qn11"><style data-emotion="css 18qkk85">.css-18qkk85{border:solid 1px;border-color:#E4E4E4;border-radius:8px;background-color:#F4F4F4;}</style><div class="css-18qkk85"><pre data-testid="sample-code" style="color:#535353;background:none;font-family:Consolas, Monaco, &#x27;Andale Mono&#x27;, &#x27;Ubuntu Mono&#x27;, monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative;margin:.5em 0;overflow:auto;padding:0;background-color:#F4F4F4;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:0.5em;margin-left:0.5em;margin-right:0.5em"><code><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">1</span><span class="token" style="color:#577FFB">import</span><span> React </span><span class="token" style="color:#577FFB">from</span><span> </span><span class="token" style="color:#0A782A">&#x27;react&#x27;</span><span class="token" style="color:#535353">;</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">2</span><span></span><span class="token" style="color:#577FFB">import</span><span> </span><span class="token" style="color:#535353">{</span><span> Menu </span><span class="token" style="color:#535353">}</span><span> </span><span class="token" style="color:#577FFB">from</span><span> </span><span class="token" style="color:#0A782A">&#x27;newskit&#x27;</span><span class="token" style="color:#535353">;</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">3</span>
 <span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">4</span><span></span><span class="token" style="color:#577FFB">export</span><span> </span><span class="token" style="color:#577FFB">default</span><span> </span><span class="token" style="color:#535353">(</span><span class="token" style="color:#535353">)</span><span> </span><span class="token" style="color:#577FFB">=&gt;</span><span> </span><span class="token" style="color:#535353">(</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">5</span><span>  </span><span class="token token token" style="color:#535353">&lt;</span><span class="token token token" style="color:#05717D">Menu</span><span class="token" style="color:#05717D"> </span><span class="token token" style="color:#0A782A">size</span><span class="token token token attr-equals" style="color:#535353">=</span><span class="token token token" style="color:#535353">&quot;</span><span class="token token" style="color:#535353">medium</span><span class="token token token" style="color:#535353">&quot;</span><span class="token" style="color:#05717D"> </span><span class="token token" style="color:#0A782A">align</span><span class="token token token attr-equals" style="color:#535353">=</span><span class="token token token" style="color:#535353">&quot;</span><span class="token token" style="color:#535353">center</span><span class="token token token" style="color:#535353">&quot;</span><span class="token" style="color:#05717D"> </span><span class="token token" style="color:#0A782A">overrides</span><span class="token token script language-javascript token script-punctuation" style="color:#535353">=</span><span class="token token script language-javascript token" style="color:#535353">{</span><span class="token token script language-javascript token" style="color:#535353">{</span><span class="token token script language-javascript token" style="color:#535353">}</span><span class="token token script language-javascript token" style="color:#535353">}</span><span class="token" style="color:#05717D"> </span><span class="token token" style="color:#535353">/&gt;</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">6</span><span></span><span class="token" style="color:#535353">)</span><span class="token" style="color:#535353">;</span><span>
 </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2em;padding-right:1em;text-align:right;user-select:none;color:#C0C0C0">7</span>
-</code></pre></div></div><style data-emotion="css adpo59">.css-adpo59{padding:32px;-webkit-align-self:flex-end;-ms-flex-item-align:flex-end;align-self:flex-end;}</style><div class="css-adpo59"><a><style data-emotion="css y5l602">.css-y5l602{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:48px;min-width:80px;padding:12px 16px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#577FFB;border-radius:8px;color:#FFFFFF;margin:0;cursor:pointer;}.css-y5l602 svg{width:24px;height:24px;}.css-y5l602 svg{fill:#FFFFFF;}.css-y5l602:hover:not(:disabled){background-color:#3358CC;}.css-y5l602:active:not(:disabled){background-color:#213A82;}.css-y5l602:disabled{background-color:#F4F4F4;color:#C0C0C0;}.css-y5l602:disabled svg{fill:#C0C0C0;}@media screen and (prefers-reduced-motion: no-preference){.css-y5l602{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-y5l602{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><button data-testid="code-sandbox" type="button" class="css-y5l602"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Edit on CodeSandbox</span></div></div></button></a></div></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><style data-emotion="css 132rcai">@media screen and (max-width: 767px){.css-132rcai{margin-top:64px;}}@media screen and (min-width: 768px){.css-132rcai{margin-top:80px;}}@media screen and (max-width: 767px){.css-132rcai{margin-bottom:40px;}}@media screen and (min-width: 768px){.css-132rcai{margin-bottom:80px;}}</style><style data-emotion="css nmiuug">@media screen and (max-width: 767px){.css-nmiuug{margin-top:64px;}}@media screen and (min-width: 768px){.css-nmiuug{margin-top:80px;}}@media screen and (max-width: 767px){.css-nmiuug{margin-bottom:40px;}}@media screen and (min-width: 768px){.css-nmiuug{margin-bottom:80px;}}</style><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="anatomy" data-toc-indexed="Anatomy" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Anatomy</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">A Menu contains one required element and three optional elements.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-16in0m0"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><style data-emotion="css zvmkh5">.css-zvmkh5{margin-bottom:0;}</style><div class="css-zvmkh5"><style data-emotion="css qijqp5">.css-qijqp5{overflow-x:auto;}</style><div class="css-qijqp5"><style data-emotion="css 880ie2">.css-880ie2{border-collapse:collapse;border-spacing:0;width:100%;}</style><table class="css-880ie2"><thead><tr><style data-emotion="css 1m82fdm">.css-1m82fdm{border-style:solid;border-color:#BBC3C9;border-width:0 0 1px 0;color:#0A0A0A;font-family:"Poppins",sans-serif;font-size:12px;line-height:1.5;font-weight:500;letter-spacing:0;margin-bottom:16px;height:40px;text-align:left;vertical-align:top;width:100px;white-space:nowrap;padding-bottom:16px;}</style><th class="css-1m82fdm">Item</th><style data-emotion="css 8xmm6j">.css-8xmm6j{border-style:solid;border-color:#BBC3C9;border-width:0 0 1px 0;color:#0A0A0A;font-family:"Poppins",sans-serif;font-size:12px;line-height:1.5;font-weight:500;letter-spacing:0;margin-bottom:16px;height:40px;text-align:left;vertical-align:top;min-width:64px;white-space:nowrap;padding-bottom:16px;}</style><th class="css-8xmm6j">Name</th><style data-emotion="css 12ahf2h">.css-12ahf2h{border-style:solid;border-color:#BBC3C9;border-width:0 0 1px 0;color:#0A0A0A;font-family:"Poppins",sans-serif;font-size:12px;line-height:1.5;font-weight:500;letter-spacing:0;margin-bottom:16px;height:40px;text-align:left;vertical-align:top;min-width:100px;white-space:nowrap;padding-bottom:16px;}</style><th class="css-12ahf2h">Description</th><th class="css-12ahf2h">Component</th><th class="css-1m82fdm">Optional</th></tr></thead></table></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="options" data-toc-indexed="Options" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Options</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">A Menu has options that can be used to provide an appropriate experience for different use cases.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-30qa7x"><div class="css-8atxkm"><style data-emotion="css 1cl0omj">.css-1cl0omj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1cl0omj{margin:-48px -8px 0 -8px;}}@media screen and (min-width: 480px){.css-1cl0omj{margin:-48px -8px 0 -8px;}}@media screen and (min-width: 768px){.css-1cl0omj{margin:-48px -8px 0 -8px;}}@media screen and (min-width: 1024px){.css-1cl0omj{margin:-48px -12px 0 -12px;}}@media screen and (min-width: 1440px){.css-1cl0omj{margin:-48px -12px 0 -12px;}}</style><div class="css-1cl0omj"><div class="css-1k3e0au"><style data-emotion="css 4w2qry">.css-4w2qry{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-4w2qry{padding:0 8px;margin-top:48px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 1024px){.css-4w2qry{padding:0 12px;}}</style><div class="css-4w2qry"><style data-emotion="css fb3dw2">.css-fb3dw2{height:100%;}</style><style data-emotion="css 1fosq9y">.css-1fosq9y{transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}</style><style data-emotion="css 1l9c4ty">.css-1l9c4ty{box-sizing:border-box;overflow:hidden;border-radius:4px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}</style><div class="css-1l9c4ty"><style data-emotion="css f00y0z">.css-f00y0z{box-sizing:border-box;display:block;position:relative;margin-bottom:16px;}.css-f00y0z svg{border-radius:4px;}</style><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><style data-emotion="css 1shocxe">.css-1shocxe{box-sizing:border-box;}</style><div class="css-1shocxe"><style data-emotion="css 1lvcsk9">.css-1lvcsk9{box-sizing:border-box;padding:8px 4px;}.css-1lvcsk9 a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1lvcsk9"><style data-emotion="css 8mepow">.css-8mepow{margin-bottom:20px;}</style><div class="css-8mepow"><style data-emotion="css uy3owc">.css-uy3owc{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-uy3owc::before{content:'';margin-bottom:-0.2155em;display:block;}.css-uy3owc::after{content:'';margin-top:-0.2125em;display:block;}</style><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Orientation</h1></section></div><style data-emotion="css iobivh">.css-iobivh{margin:0;color:#2E2E2E;font-family:"DM Sans",sans-serif;font-size:16px;line-height:24px;font-weight:400;letter-spacing:0;padding:0.5px 0px;}.css-iobivh svg{fill:#2E2E2E;}.css-iobivh::before{content:'';margin-bottom:-0.391em;display:block;}.css-iobivh::after{content:'';margin-top:-0.409em;display:block;}</style><p class="css-iobivh"><style data-emotion="css 18mb4bh">.css-18mb4bh{margin:0;}</style><p class="css-18mb4bh">A Menu can be displayed horizontally or vertically to effectively and appropriately use the space on a screen.</p></p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Title</h1></section></div><p class="css-iobivh"><p class="css-18mb4bh">A title can be displayed in a Menu Item Group above the Menu items. This could be used for categorising Menu items.</p><p class="css-18mb4bh">This is only available when a Menu is in a vertical orientation.</p></p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Menu Divider</h1></section></div><p class="css-iobivh">Dividers can be displayed as the last element between Menu Groups or between Menu Items.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Icons (leading &amp; trailing)</h1></section></div><p class="css-iobivh">Icons can be displayed in Menu Item Group titles as well as Menu Items and can be positioned either before (leading) or after (trailing) the label.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Alignment</h1></section></div><p class="css-iobivh"><ul><li><style data-emotion="css 9j4s18">.css-9j4s18{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:24px;padding:4px 8px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#F4F4F4;border-radius:4px;color:#2E2E2E;white-space:nowrap;}.css-9j4s18 svg{width:16px;height:16px;}.css-9j4s18 svg{fill:#2E2E2E;}</style><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><style data-emotion="css 9fv837">.css-9fv837{margin:0;font-family:'DM Mono',courier;font-size:14px;font-weight:400;line-height:1.4285714285714286;padding:1px 0px;display:inline-block;}.css-9fv837::before{content:'';display:block;height:0;width:0;margin-bottom:-0.4267857142857143em;}.css-9fv837::after{content:'';display:block;height:0;width:0;margin-top:-0.3642857142857143em;}</style><span class="css-9fv837">Center</span></div></div></div>: Centers the Menu item label and icons.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">Start</span></div></div></div>: Aligns the Menu item label and icons to the left.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">End</span></div></div></div>: Aligns the Menu item label and icons to the right.</li></ul><style data-emotion="css 16mxp9d">.css-16mxp9d{background-color:#EBF8F9;border-color:#05717D;border-style:solid;border-radius:4px;border-width:0 0 0 4px;color:#FFFFFF;width:100%;padding:16px;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-16mxp9d svg{fill:#05717D;}</style><div data-testid="inline-message" class="css-16mxp9d"><style data-emotion="css ojf8hg">.css-ojf8hg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}</style><div class="css-ojf8hg"><style data-emotion="css 1a0v2ke">.css-1a0v2ke{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}</style><div role="region" aria-live="off" aria-label="note" class="css-1a0v2ke"><style data-emotion="css e2931u">.css-e2931u{margin:0;font-family:"Poppins",sans-serif;font-size:16px;line-height:18px;font-weight:700;letter-spacing:0;padding:0.5px 0px;color:#0A0A0A;margin-bottom:12px;}.css-e2931u::before{content:'';margin-bottom:-0.2155em;display:block;}.css-e2931u::after{content:'';margin-top:-0.2125em;display:block;}.css-e2931u svg{fill:#0A0A0A;}</style><p class="css-e2931u">Note</p><style data-emotion="css txuyxw">.css-txuyxw{margin:0;font-family:"DM Sans",sans-serif;font-size:14px;line-height:21px;font-weight:500;letter-spacing:0;padding:0.5px 0px;color:#2E2E2E;}.css-txuyxw::before{content:'';margin-bottom:-0.391em;display:block;}.css-txuyxw::after{content:'';margin-top:-0.409em;display:block;}.css-txuyxw svg{fill:#2E2E2E;}</style><p class="css-txuyxw">Default value depends on the vertical prop: when is True the value is set to MenuItemAlign.Start, and MenuAlign.Center when is False.</p></div></div></div></p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Size</h1></section></div><p class="css-iobivh">There are three sizes of the Menu item: small, medium, and large. Menu item label, icon, and the menu container change size. Menu matches the same height as three button sizes, to align when used together.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Style</h1></section></div><p class="css-iobivh"><p>There are three default styles that can be mapped based on their orientation and application.</p><ul><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">menuItemVertical</span></div></div></div> this is the default style applied when the menu is in a vertical orientation.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">menuItemHorizonal</span></div></div></div> this is the default style applied when the menu is in a horizontal orientation.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">menuItemHorizontalInverse</span></div></div></div> this is the default style applied when the menu is in a horizontal orientation on contrasting background colour.</li></ul></p></div></div></div></div></div><div class="css-1nlep1q"><div class="css-4w2qry"><style data-emotion="css 1iphy6n">.css-1iphy6n{box-sizing:border-box;overflow:hidden;border-radius:4px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:rowfalse;-ms-flex-direction:rowfalse;flex-direction:rowfalse;transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}</style><div class="css-1iphy6n"><style data-emotion="css po7my3">.css-po7my3{box-sizing:border-box;display:block;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:16px;}.css-po7my3 svg{border-radius:4px;}</style><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><style data-emotion="css 1r2lt0d">.css-1r2lt0d{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}</style><div class="css-1r2lt0d"><style data-emotion="css 1p9cj9w">.css-1p9cj9w{box-sizing:border-box;-webkit-flex:1;-ms-flex:1;flex:1;padding:8px 4px;}.css-1p9cj9w a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Orientation</h1></section></div><p class="css-iobivh"><p class="css-18mb4bh">A Menu can be displayed horizontally or vertically to effectively and appropriately use the space on a screen.</p></p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Title</h1></section></div><p class="css-iobivh"><p class="css-18mb4bh">A title can be displayed in a Menu Item Group above the Menu items. This could be used for categorising Menu items.</p><p class="css-18mb4bh">This is only available when a Menu is in a vertical orientation.</p></p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Menu Divider</h1></section></div><p class="css-iobivh">Dividers can be displayed as the last element between Menu Groups or between Menu Items.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Icons (leading &amp; trailing)</h1></section></div><p class="css-iobivh">Icons can be displayed in Menu Item Group titles as well as Menu Items and can be positioned either before (leading) or after (trailing) the label.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Alignment</h1></section></div><p class="css-iobivh"><ul><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">Center</span></div></div></div>: Centers the Menu item label and icons.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">Start</span></div></div></div>: Aligns the Menu item label and icons to the left.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">End</span></div></div></div>: Aligns the Menu item label and icons to the right.</li></ul><div data-testid="inline-message" class="css-16mxp9d"><div class="css-ojf8hg"><div role="region" aria-live="off" aria-label="note" class="css-1a0v2ke"><p class="css-e2931u">Note</p><p class="css-txuyxw">Default value depends on the vertical prop: when is True the value is set to MenuItemAlign.Start, and MenuAlign.Center when is False.</p></div></div></div></p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Size</h1></section></div><p class="css-iobivh">There are three sizes of the Menu item: small, medium, and large. Menu item label, icon, and the menu container change size. Menu matches the same height as three button sizes, to align when used together.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Style</h1></section></div><p class="css-iobivh"><p>There are three default styles that can be mapped based on their orientation and application.</p><ul><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">menuItemVertical</span></div></div></div> this is the default style applied when the menu is in a vertical orientation.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">menuItemHorizonal</span></div></div></div> this is the default style applied when the menu is in a horizontal orientation.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">menuItemHorizontalInverse</span></div></div></div> this is the default style applied when the menu is in a horizontal orientation on contrasting background colour.</li></ul></p></div></div></div></div></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="states" data-toc-indexed="States" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">States</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">A Menu has states including, base, hover, active, disabled and focus. They can be displayed with both, base or selected. By default, a Menu has one menu item in a selected state.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-30qa7x"><div class="css-8atxkm"><div class="css-1cl0omj"><style data-emotion="css l15fj7">.css-l15fj7{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-l15fj7{padding:0 8px;margin-top:48px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-l15fj7{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;}}@media screen and (min-width: 1024px){.css-l15fj7{padding:0 12px;}}</style><div class="css-l15fj7"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Base</h1></section></div><p class="css-iobivh">Menu items have a base state. This is the base style of the Menu item before it has been interacted with by a user.</p></div></div></div></div><div class="css-l15fj7"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Hover</h1></section></div><p class="css-iobivh">Menu items have a hover state. The style of the Menu item changes to visually communicate and provide feedback to the user that the Menu item is an interactive element.</p></div></div></div></div><div class="css-l15fj7"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Active</h1></section></div><p class="css-iobivh">Menu items have an active state. The style of the Menu item changes to visually communicate and provide feedback to the user that the Menu item has been interacted with.</p></div></div></div></div><div class="css-l15fj7"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Disabled</h1></section></div><p class="css-iobivh">Menu items in a disabled state communicate that a Menu item exists, but is not available to the user in that scenario. When the user’s cursor hovers over a Menu item in a disabled state, the cursor shows as not-allowed. Disabled Menu items are often used to maintain layout consistency and communicate that a Menu item may become available if another condition has been met.</p></div></div></div></div><div class="css-l15fj7"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Focus</h1></section></div><p class="css-iobivh">Menu items in a focus state communicate that a user has highlighted a Menu item, using an input method such as a keyboard or voice.</p></div></div></div></div><div class="css-l15fj7"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Selected</h1></section></div><p class="css-iobivh">Menu items have a selected state. The style of the Menu item changes to visually communicate and provide feedback to the user that the Tab item has been selected.</p></div></div></div></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="behaviors" data-toc-indexed="Behaviours" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Behaviours</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">A Menu has the following component functions when integrated into a product.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-30qa7x"><div class="css-8atxkm"><div class="css-1cl0omj"><div class="css-1k3e0au"><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Width and Height</h1></section></div><p class="css-iobivh">A Menu is 100% width and height, therefore if a specific width or height is required a parent container will control this.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Transitions</h1></section></div><p class="css-iobivh">When the user hovers over a Menu item, the style transitions from one state to another.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Selected</h1></section></div><p class="css-iobivh">Only one Menu item can be selected at any given time.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Label Overflow</h1></section></div><p class="css-iobivh">When the label in a Menu title or Menu item is too long for the available horizontal space, they wrap to form another line.</p></div></div></div></div></div><div class="css-1nlep1q"><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Width and Height</h1></section></div><p class="css-iobivh">A Menu is 100% width and height, therefore if a specific width or height is required a parent container will control this.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Transitions</h1></section></div><p class="css-iobivh">When the user hovers over a Menu item, the style transitions from one state to another.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Selected</h1></section></div><p class="css-iobivh">Only one Menu item can be selected at any given time.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Label Overflow</h1></section></div><p class="css-iobivh">When the label in a Menu title or Menu item is too long for the available horizontal space, they wrap to form another line.</p></div></div></div></div></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="usage" data-toc-indexed="Usage" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Usage</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">The following guidance describes how and when to appropriately use a Menu component.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-30qa7x"><div class="css-8atxkm"><style data-emotion="css 1vn49n">.css-1vn49n{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1vn49n{margin:-24px -8px 0 -8px;}}@media screen and (min-width: 480px){.css-1vn49n{margin:-24px -8px 0 -8px;}}@media screen and (min-width: 768px){.css-1vn49n{margin:-24px -8px 0 -8px;}}@media screen and (min-width: 1024px){.css-1vn49n{margin:-24px -12px 0 -12px;}}@media screen and (min-width: 1440px){.css-1vn49n{margin:-24px -12px 0 -12px;}}</style><div class="css-1vn49n"><style data-emotion="css 1ebisl9">.css-1ebisl9{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1ebisl9{padding:0 8px;margin-top:24px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1ebisl9{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;}}@media screen and (min-width: 1024px){.css-1ebisl9{padding:0 12px;}}</style><div class="css-1ebisl9"><style data-emotion="css cssveg">.css-cssveg{position:relative;}</style><style data-emotion="css 1ql0hoz">.css-1ql0hoz{position:relative;}</style><div class="css-1ql0hoz"><style data-emotion="css 1fvj0zx">.css-1fvj0zx{position:absolute;right:16px;top:16px;z-index:1;}</style><style data-emotion="css 1b128fe">.css-1b128fe{position:absolute;right:16px;top:16px;z-index:1;}</style><div class="css-1b128fe"><style data-emotion="css 1rfzvwh">.css-1rfzvwh{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;width:32px;height:32px;padding:0;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border-style:solid;border-color:#0A782A;background-color:#E6FAEB;border-radius:50%;border-width:1px;}.css-1rfzvwh svg{width:16px;height:16px;}.css-1rfzvwh svg{fill:#0A782A;}</style><div data-testid="flag" class="css-1rfzvwh"><div class="css-m556v"><div class="css-14dqn90"><style data-emotion="css 1q2xvx1">.css-1q2xvx1{fill:#0A782A;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1q2xvx1{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1q2xvx1{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1q2xvx1.css-1q2xvx1{width:24px;height:24px;fill:#0A782A;}@media screen and (prefers-reduced-motion: no-preference){.css-1q2xvx1.css-1q2xvx1{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1q2xvx1.css-1q2xvx1{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><style data-emotion="css bc6czi-EmotionIconBase">.css-bc6czi-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#0A782A;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-bc6czi-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-bc6czi-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-bc6czi-EmotionIconBase.css-bc6czi-EmotionIconBase{width:24px;height:24px;fill:#0A782A;}@media screen and (prefers-reduced-motion: no-preference){.css-bc6czi-EmotionIconBase.css-bc6czi-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-bc6czi-EmotionIconBase.css-bc6czi-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-bc6czi-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"></path></svg></div></div></div></div><style data-emotion="css 13h3q9j">.css-13h3q9j{box-sizing:border-box;overflow:hidden;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}</style><div class="css-13h3q9j"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><style data-emotion="css u3mic">.css-u3mic{box-sizing:border-box;padding:0;}.css-u3mic a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-u3mic"><style data-emotion="css 14xhfxi">.css-14xhfxi{margin-bottom:16px;}</style><div class="css-14xhfxi"><style data-emotion="css 11zqwt5">.css-11zqwt5{border-style:solid;border-color:#0A782A;border-width:4px;border-radius:4px;border-width:0px;margin:0;border-top-width:4px;width:100%;}</style><hr data-testid="divider" aria-hidden="true" class="css-11zqwt5"/><div class="css-14xhfxi"></div><style data-emotion="css jeenpm">.css-jeenpm{font-family:"Poppins",sans-serif;font-size:22px;line-height:24.75px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-jeenpm::before{content:'';margin-bottom:-0.2155em;display:block;}.css-jeenpm::after{content:'';margin-top:-0.2125em;display:block;}</style><section class="css-jeenpm"><style data-emotion="css 1atm1s9">.css-1atm1s9{display:inline;font:inherit;margin:0;color:#0A782A;}.css-1atm1s9 svg{fill:#0A782A;}</style><h1 class="nk-headline-heading css-1atm1s9">Do</h1></section></div><div class="css-14xhfxi"><p class="css-iobivh">Use a Menu to navigate to different top level sections or sub-sections.</p></div></div></div></div></div></div><div class="css-1ebisl9"><div class="css-1ql0hoz"><div class="css-1b128fe"><style data-emotion="css 12qiph0">.css-12qiph0{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;width:32px;height:32px;padding:0;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border-style:solid;border-color:#D20600;background-color:#FFE6E5;border-radius:50%;border-width:1px;}.css-12qiph0 svg{width:16px;height:16px;}.css-12qiph0 svg{fill:#D20600;}</style><div data-testid="flag" class="css-12qiph0"><div class="css-m556v"><div class="css-14dqn90"><style data-emotion="css kvjn5r">.css-kvjn5r{fill:#D20600;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-kvjn5r{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-kvjn5r{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-kvjn5r.css-kvjn5r{width:24px;height:24px;fill:#D20600;}@media screen and (prefers-reduced-motion: no-preference){.css-kvjn5r.css-kvjn5r{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-kvjn5r.css-kvjn5r{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><style data-emotion="css o21jfp-EmotionIconBase">.css-o21jfp-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#D20600;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-o21jfp-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-o21jfp-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-o21jfp-EmotionIconBase.css-o21jfp-EmotionIconBase{width:24px;height:24px;fill:#D20600;}@media screen and (prefers-reduced-motion: no-preference){.css-o21jfp-EmotionIconBase.css-o21jfp-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-o21jfp-EmotionIconBase.css-o21jfp-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-o21jfp-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg></div></div></div></div><div class="css-13h3q9j"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-u3mic"><div class="css-14xhfxi"><style data-emotion="css l4ic68">.css-l4ic68{border-style:solid;border-color:#D20600;border-width:4px;border-radius:4px;border-width:0px;margin:0;border-top-width:4px;width:100%;}</style><hr data-testid="divider" aria-hidden="true" class="css-l4ic68"/><div class="css-14xhfxi"></div><section class="css-jeenpm"><style data-emotion="css 33goe7">.css-33goe7{display:inline;font:inherit;margin:0;color:#D20600;}.css-33goe7 svg{fill:#D20600;}</style><h1 class="nk-headline-heading css-33goe7">Don’t</h1></section></div><div class="css-14xhfxi"><p class="css-iobivh">Use a Menu to open content panes within a page.</p></div></div></div></div></div></div><div class="css-1ebisl9"><div class="css-1ql0hoz"><div class="css-1b128fe"><div data-testid="flag" class="css-1rfzvwh"><div class="css-m556v"><div class="css-14dqn90"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-bc6czi-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"></path></svg></div></div></div></div><div class="css-13h3q9j"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-u3mic"><div class="css-14xhfxi"><hr data-testid="divider" aria-hidden="true" class="css-11zqwt5"/><div class="css-14xhfxi"></div><section class="css-jeenpm"><h1 class="nk-headline-heading css-1atm1s9">Do</h1></section></div><div class="css-14xhfxi"><p class="css-iobivh">When using a Menu you should be mindful of the number of items you’re displaying, helping readability and also reducing the cognitive load.</p></div></div></div></div></div></div><div class="css-1ebisl9"><div class="css-1ql0hoz"><div class="css-1b128fe"><div data-testid="flag" class="css-12qiph0"><div class="css-m556v"><div class="css-14dqn90"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-o21jfp-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg></div></div></div></div><div class="css-13h3q9j"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-u3mic"><div class="css-14xhfxi"><hr data-testid="divider" aria-hidden="true" class="css-l4ic68"/><div class="css-14xhfxi"></div><section class="css-jeenpm"><h1 class="nk-headline-heading css-33goe7">Don’t</h1></section></div><div class="css-14xhfxi"><p class="css-iobivh">All Menu items should be consistent in size e.g. small, medium or large Menu item. This is to ensure Menu items have equal importance.</p></div></div></div></div></div></div><div class="css-1ebisl9"><div class="css-1ql0hoz"><div class="css-1b128fe"><div data-testid="flag" class="css-1rfzvwh"><div class="css-m556v"><div class="css-14dqn90"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-bc6czi-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"></path></svg></div></div></div></div><div class="css-13h3q9j"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-u3mic"><div class="css-14xhfxi"><hr data-testid="divider" aria-hidden="true" class="css-11zqwt5"/><div class="css-14xhfxi"></div><section class="css-jeenpm"><h1 class="nk-headline-heading css-1atm1s9">Do</h1></section></div><div class="css-14xhfxi"><p class="css-iobivh">Menu item labels should be in sentence case. This helps with scannability and legibility.</p></div></div></div></div></div></div><div class="css-1ebisl9"><div class="css-1ql0hoz"><div class="css-1b128fe"><div data-testid="flag" class="css-12qiph0"><div class="css-m556v"><div class="css-14dqn90"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-o21jfp-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg></div></div></div></div><div class="css-13h3q9j"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-u3mic"><div class="css-14xhfxi"><hr data-testid="divider" aria-hidden="true" class="css-l4ic68"/><div class="css-14xhfxi"></div><section class="css-jeenpm"><h1 class="nk-headline-heading css-33goe7">Don’t</h1></section></div><div class="css-14xhfxi"><p class="css-iobivh">Menu item labels shouldn’t be truncated. Keep them short, and fully visible.</p></div></div></div></div></div></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="accessibility" data-toc-indexed="Accessibility" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Accessibility Considerations</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">Menus implement the latest<!-- --> <a href="https://www.w3.org/WAI/tutorials/menus/" class="css-g09sk7"><span class="css-17x5lw"><style data-emotion="css p4p8io">.css-p4p8io{margin:0;display:inline-block;display:block;}</style><span class="css-p4p8io">WAI-ARIA Menu specifications.</span></span></a>.</p></div></div><div class="css-12v76db"></div><div class="css-1uhwsex"><div class="css-8atxkm"><style data-emotion="css r19kfv">.css-r19kfv{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-r19kfv{margin:-80px -8px 0 -8px;}}@media screen and (min-width: 480px){.css-r19kfv{margin:-80px -8px 0 -8px;}}@media screen and (min-width: 768px){.css-r19kfv{margin:-80px -8px 0 -8px;}}@media screen and (min-width: 1024px){.css-r19kfv{margin:-80px -12px 0 -12px;}}@media screen and (min-width: 1440px){.css-r19kfv{margin:-80px -12px 0 -12px;}}</style><div class="css-r19kfv"><style data-emotion="css 1rrbqaq">.css-1rrbqaq{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1rrbqaq{padding:0 8px;margin-top:80px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1rrbqaq{margin-left:8.333333333333334%;-webkit-flex-basis:83.33333333333334%;-ms-flex-preferred-size:83.33333333333334%;flex-basis:83.33333333333334%;max-width:83.33333333333334%;}}@media screen and (min-width: 1024px){.css-1rrbqaq{padding:0 12px;}}@media screen and (min-width: 1440px){.css-1rrbqaq{-webkit-flex-basis:66.66666666666667%;-ms-flex-preferred-size:66.66666666666667%;flex-basis:66.66666666666667%;max-width:66.66666666666667%;}}</style><div class="css-1rrbqaq"><style data-emotion="css taye4">.css-taye4{margin-bottom:40px;}</style><div class="css-taye4"><style data-emotion="css 1r3myvc">.css-1r3myvc{margin:0;color:#0A0A0A;display:inline-block;}.css-1r3myvc svg{fill:#0A0A0A;}@media screen and (max-width: 1439px){.css-1r3myvc{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1r3myvc::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1r3myvc::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1440px){.css-1r3myvc{font-family:"Poppins",sans-serif;font-size:22px;line-height:24.75px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1r3myvc::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1r3myvc::after{content:'';margin-top:-0.2125em;display:block;}}</style><span class="css-1r3myvc">Focus order</span></div><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-1m82fdm">Order</th><th class="css-12ahf2h">Element</th><th class="css-12ahf2h">Role</th></tr></thead></table></div></div><div class="css-1rrbqaq"><div class="css-taye4"><span class="css-1r3myvc">Keyboard Interactions</span></div><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Command</th><th class="css-12ahf2h">Description</th></tr></thead></table></div></div><div class="css-1rrbqaq"><div class="css-taye4"><span class="css-1r3myvc">WAI-ARIA</span></div><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Element</th><th class="css-12ahf2h">Attribute</th><th class="css-12ahf2h">Value</th><th class="css-12ahf2h">Description</th><th class="css-1m82fdm">User Supplied</th></tr></thead></table></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="seo" data-toc-indexed="SEO" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">SEO Considerations</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">The rendered menu is build using a native HTML nav element, this should ensure that it is easily for crawlers to discover. Navigational Items should have clear descriptive titles to allow crawlers to correctly identify content.</p></div></div><div class="css-12v76db"></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="component-api" data-toc-indexed="API" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">API</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">There are props on the three components that combine to form the Menu component (Menu, Menu Item Group, Menu Item).</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><style data-emotion="css bmafgm">.css-bmafgm{margin-bottom:80px;}</style><div class="css-bmafgm"><div class="css-taye4"><span class="css-1r3myvc">Menu</span></div><style data-emotion="css tdrmmh">.css-tdrmmh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-flow:column;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;}</style><div data-testid="tab-group" class="css-tdrmmh"><style data-emotion="css 1tmbbcs">.css-1tmbbcs{position:relative;z-index:0;margin-bottom:32px;}</style><div data-testid="tab-bar" class="css-1tmbbcs"><div class="css-v6l5fq"><style data-emotion="css 1ygmje2">.css-1ygmje2{box-sizing:border-box;height:100%;overflow-x:auto;overflow-y:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;}.css-1ygmje2::-webkit-scrollbar{display:none;}.css-1ygmje2{-ms-overflow-style:none;scrollbar-width:none;}</style><div data-testid="scroll-container" class="css-1ygmje2"><style data-emotion="css qsb5ey">.css-qsb5ey{width:100%;border-width:0;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><style data-emotion="css 1absq12">.css-1absq12{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;width:100%;border-width:0;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div role="tablist" aria-orientation="horizontal" class="css-1absq12"><style data-emotion="css jcw7lr">.css-jcw7lr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}.css-jcw7lr >*:not(style){width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div data-testid="distribution-wrapper" class="css-jcw7lr"><style data-emotion="css hob05">.css-hob05{scroll-snap-align:start;}</style><div class="css-hob05"><style data-emotion="css eyfk1r">.css-eyfk1r{border-radius:borderRadiusSharp;background-color:transparent;color:#0A0A0A;border-color:#577FFB;}.css-eyfk1r:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-eyfk1r:focus{outline-offset:-5px;}}}</style><style data-emotion="css obqwd1">.css-obqwd1{margin:0;cursor:pointer;border-radius:borderRadiusSharp;background-color:transparent;color:#0A0A0A;border-color:#577FFB;}@media screen and (prefers-reduced-motion: no-preference){.css-obqwd1{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-obqwd1{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-obqwd1:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-obqwd1:focus{outline-offset:-5px;}}}</style><style data-emotion="css 1aoagey">.css-1aoagey{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:48px;width:100%;padding:12px 16px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border-radius:borderRadiusSharp;background-color:transparent;color:#535353;margin:0;cursor:pointer;border-radius:borderRadiusSharp;background-color:transparent;color:#0A0A0A;border-color:#577FFB;}.css-1aoagey svg{width:24px;height:24px;}.css-1aoagey:hover:not(:disabled){color:#2E2E2E;}.css-1aoagey:active:not(:disabled){color:#2E2E2E;}@media screen and (prefers-reduced-motion: no-preference){.css-1aoagey{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1aoagey{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1aoagey:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-1aoagey:focus{outline-offset:-5px;}}}</style><button data-testid="tab" type="button" role="tab" aria-selected="true" tabindex="0" selected="" class="css-1aoagey"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Props</span></div></div></button></div></div><div data-testid="distribution-wrapper" class="css-jcw7lr"><style data-emotion="css 1vrbtrb">.css-1vrbtrb{scroll-snap-align:end;}</style><div class="css-1vrbtrb"><style data-emotion="css 14scimr">.css-14scimr:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-14scimr:focus{outline-offset:-5px;}}}</style><style data-emotion="css 1ov3ypz">.css-1ov3ypz{margin:0;cursor:pointer;}@media screen and (prefers-reduced-motion: no-preference){.css-1ov3ypz{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1ov3ypz{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1ov3ypz:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-1ov3ypz:focus{outline-offset:-5px;}}}</style><style data-emotion="css mvtei6">.css-mvtei6{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:48px;width:100%;padding:12px 16px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border-radius:borderRadiusSharp;background-color:transparent;color:#535353;margin:0;cursor:pointer;}.css-mvtei6 svg{width:24px;height:24px;}.css-mvtei6:hover:not(:disabled){color:#2E2E2E;}.css-mvtei6:active:not(:disabled){color:#2E2E2E;}@media screen and (prefers-reduced-motion: no-preference){.css-mvtei6{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-mvtei6{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-mvtei6:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-mvtei6:focus{outline-offset:-5px;}}}</style><button data-testid="tab" type="button" role="tab" aria-selected="false" tabindex="-1" class="css-mvtei6"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Overrides</span></div></div></button></div></div><style data-emotion="css 1mzw2a8">.css-1mzw2a8{background-color:#577FFB;position:absolute;z-index:2;bottom:0px;left:0px;}</style><div style="width:0px;height:2px;transform:translateX(0px);transition:" data-testid="tab-bar-indicator" aria-hidden="true" role="presentation" class="css-1mzw2a8"></div></div></div></div><style data-emotion="css vp7qb8">.css-vp7qb8{background-color:#E4E4E4;display:block;position:absolute;z-index:1;width:100%;height:2px;bottom:0px;left:0px;}</style><div role="presentation" data-testid="tab-bar-track" class="css-vp7qb8"></div></div><style data-emotion="css g2dfvm">.css-g2dfvm{margin:0;width:100%;}.css-g2dfvm:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-g2dfvm:focus{outline-offset:-5px;}}}</style><div data-testid="tab-panel" role="tabpanel" aria-hidden="false" selected="" tabindex="0" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-8xmm6j">Name</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th><th class="css-1m82fdm">Required</th></tr></thead></table></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="true" tabindex="-1" hidden="" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Attribute</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th></tr></thead></table></div></div></div></div><div class="css-bmafgm"><div class="css-taye4"><span class="css-1r3myvc">Menu Item Group</span></div><div data-testid="tab-group" class="css-tdrmmh"><div data-testid="tab-bar" class="css-1tmbbcs"><div class="css-v6l5fq"><div data-testid="scroll-container" class="css-1ygmje2"><div role="tablist" aria-orientation="horizontal" class="css-1absq12"><div data-testid="distribution-wrapper" class="css-jcw7lr"><div class="css-hob05"><button data-testid="tab" type="button" role="tab" aria-selected="true" tabindex="0" selected="" class="css-1aoagey"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Props</span></div></div></button></div></div><div data-testid="distribution-wrapper" class="css-jcw7lr"><div class="css-1vrbtrb"><button data-testid="tab" type="button" role="tab" aria-selected="false" tabindex="-1" class="css-mvtei6"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Overrides</span></div></div></button></div></div><div style="width:0px;height:2px;transform:translateX(0px);transition:" data-testid="tab-bar-indicator" aria-hidden="true" role="presentation" class="css-1mzw2a8"></div></div></div></div><div role="presentation" data-testid="tab-bar-track" class="css-vp7qb8"></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="false" selected="" tabindex="0" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-8xmm6j">Name</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th><th class="css-1m82fdm">Required</th></tr></thead></table></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="true" tabindex="-1" hidden="" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Attribute</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th></tr></thead></table></div></div></div></div><div class="css-bmafgm"><div class="css-taye4"><span class="css-1r3myvc">Menu Item</span></div><div data-testid="tab-group" class="css-tdrmmh"><div data-testid="tab-bar" class="css-1tmbbcs"><div class="css-v6l5fq"><div data-testid="scroll-container" class="css-1ygmje2"><div role="tablist" aria-orientation="horizontal" class="css-1absq12"><div data-testid="distribution-wrapper" class="css-jcw7lr"><div class="css-hob05"><button data-testid="tab" type="button" role="tab" aria-selected="true" tabindex="0" selected="" class="css-1aoagey"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Props</span></div></div></button></div></div><div data-testid="distribution-wrapper" class="css-jcw7lr"><div class="css-1vrbtrb"><button data-testid="tab" type="button" role="tab" aria-selected="false" tabindex="-1" class="css-mvtei6"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Overrides</span></div></div></button></div></div><div style="width:0px;height:2px;transform:translateX(0px);transition:" data-testid="tab-bar-indicator" aria-hidden="true" role="presentation" class="css-1mzw2a8"></div></div></div></div><div role="presentation" data-testid="tab-bar-track" class="css-vp7qb8"></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="false" selected="" tabindex="0" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-8xmm6j">Name</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th><th class="css-1m82fdm">Required</th></tr></thead></table></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="true" tabindex="-1" hidden="" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Attribute</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th></tr></thead></table></div></div></div></div><div class="css-30qa7x"><div class="css-taye4"><span class="css-1r3myvc">Menu Divider</span></div><div data-testid="tab-group" class="css-tdrmmh"><div data-testid="tab-bar" class="css-1tmbbcs"><div class="css-v6l5fq"><div data-testid="scroll-container" class="css-1ygmje2"><div role="tablist" aria-orientation="horizontal" class="css-1absq12"><div data-testid="distribution-wrapper" class="css-jcw7lr"><div class="css-hob05"><button data-testid="tab" type="button" role="tab" aria-selected="true" tabindex="0" selected="" class="css-1aoagey"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Props</span></div></div></button></div></div><div data-testid="distribution-wrapper" class="css-jcw7lr"><div class="css-1vrbtrb"><button data-testid="tab" type="button" role="tab" aria-selected="false" tabindex="-1" class="css-mvtei6"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Overrides</span></div></div></button></div></div><div style="width:0px;height:2px;transform:translateX(0px);transition:" data-testid="tab-bar-indicator" aria-hidden="true" role="presentation" class="css-1mzw2a8"></div></div></div></div><div role="presentation" data-testid="tab-bar-track" class="css-vp7qb8"></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="false" selected="" tabindex="0" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-8xmm6j">Name</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th><th class="css-1m82fdm">Required</th></tr></thead></table></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="true" tabindex="-1" hidden="" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Attribute</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th></tr></thead></table></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="compliance" data-toc-indexed="Compliance" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Compliance</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Feature</th><th class="css-12ahf2h">Description</th><th class="css-1m82fdm">Status</th></tr></thead></table></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="related" data-toc-indexed="Related" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Related Components</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">Componenets related to Menu</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-30qa7x"><div class="css-8atxkm"><div class="css-1cl0omj"><style data-emotion="css ejqltg">.css-ejqltg{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-ejqltg{padding:0 8px;margin-top:48px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-ejqltg{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;}}@media screen and (min-width: 1024px){.css-ejqltg{padding:0 12px;}}@media screen and (min-width: 1440px){.css-ejqltg{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%;}}</style><div class="css-ejqltg"><style data-emotion="css 1fwpq2a">.css-1fwpq2a{box-sizing:border-box;overflow:hidden;border-style:solid;border-radius:12px;border-width:1px;border-color:#E4E4E4;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}.css-1fwpq2a:hover:not(:disabled){box-shadow:0 8px 16px 0 rgba(10,10,10,0.08);}</style><div class="css-1fwpq2a"><style data-emotion="css 1fz92cy">.css-1fz92cy{box-sizing:border-box;display:block;position:relative;margin-bottom:0;}.css-1fz92cy svg{border-radius:4px;}</style><div class="css-1fz92cy"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><style data-emotion="css 1aog5rk">.css-1aog5rk{box-sizing:border-box;padding:24px;}.css-1aog5rk a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1aog5rk"><div class="css-8mepow"><style data-emotion="css 1m1baeh">.css-1m1baeh{-webkit-text-decoration:none;text-decoration:none;border:none;}.css-1m1baeh .nk-headline-kicker{color:#577FFB;}.css-1m1baeh:hover:not(:disabled) .nk-headline-kicker{color:#3358CC;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m1baeh:active:not(:disabled) .nk-headline-kicker{color:#213A82;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m1baeh:visited:not(:disabled) .nk-headline-kicker{color:#5E44E4;}.css-1m1baeh .nk-headline-heading{color:#0A0A0A;}.css-1m1baeh .nk-headline-heading svg{fill:#0A0A0A;}.css-1m1baeh:before{content:'';top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute;z-index:1;}</style><a class="nk-card-link css-1m1baeh" href="/components/tabs/"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Tabs</h1></section></a></div><p class="css-iobivh">Allows users to alternate between views within the same context.</p></div></div></div></div><div class="css-ejqltg"><div class="css-1fwpq2a"><div class="css-1fz92cy"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1aog5rk"><div class="css-8mepow"><a class="nk-card-link css-1m1baeh" href="/components/link/"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Link</h1></section></a></div><p class="css-iobivh">Allows user to jump to a new location when clicked.</p></div></div></div></div><div class="css-ejqltg"><div class="css-1fwpq2a"><div class="css-1fz92cy"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1aog5rk"><div class="css-8mepow"><a class="nk-card-link css-1m1baeh" href="/components/divider/"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Divider</h1></section></a></div><p class="css-iobivh">A thin line that separates content.</p></div></div></div></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-12v76db"><style data-emotion="css 1wla9vq">.css-1wla9vq{height:100%;display:block;}.css-1wla9vq >span>div{width:100%;}</style><style data-emotion="css 1kf8klr">.css-1kf8klr{display:inline-block;-webkit-text-decoration:none;text-decoration:none;height:100%;display:block;}@media screen and (prefers-reduced-motion: no-preference){.css-1kf8klr{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1kf8klr{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1kf8klr:hover:not(:disabled){-webkit-text-decoration:none;text-decoration:none;}.css-1kf8klr >span>div{width:100%;}</style><a href="/about/contact-us/" class="css-1kf8klr"><span class="css-17x5lw"><div class="css-1k3e0au"><style data-emotion="css ihrckf">.css-ihrckf{transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-ihrckf{min-height:248px;}}@media screen and (min-width: 1024px){.css-ihrckf{min-height:304px;}}</style><style data-emotion="css 19crx89">.css-19crx89{box-sizing:border-box;overflow:hidden;background-color:#577FFB;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-19crx89{min-height:248px;}}@media screen and (min-width: 1024px){.css-19crx89{min-height:304px;}}</style><div class="css-19crx89"><div class="css-1fz92cy"><style data-emotion="css 1gynme6">.css-1gynme6{background-image:url(static/card-feature-need-help.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:center left;background-position:center left;-webkit-background-size:cover;background-size:cover;-webkit-background-position:right bottom;background-position:right bottom;height:18vh;}@media screen and (min-width: 1024px){.css-1gynme6{height:200px;}}</style><div class="css-1gynme6"></div></div><div class="css-1shocxe"><div class="css-1aog5rk"><style data-emotion="css f7iis0">@media screen and (max-width: 1023px){.css-f7iis0{margin-bottom:20px;}}@media screen and (min-width: 1024px){.css-f7iis0{margin-bottom:24px;}}</style><div class="css-f7iis0"><style data-emotion="css 1m2iuuv">@media screen and (max-width: 1023px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:24px;line-height:27px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1024px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:32px;line-height:36px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}</style><section class="css-1m2iuuv"><style data-emotion="css 4eltk5">.css-4eltk5{display:inline;font:inherit;margin:0;color:#FFFFFF;}.css-4eltk5 svg{fill:#FFFFFF;}</style><h1 class="nk-headline-heading css-4eltk5">Need Help?</h1></section></div><style data-emotion="css 1kw6hwy">@media screen and (max-width: 1023px){.css-1kw6hwy{margin-bottom:24px;}}@media screen and (min-width: 1024px){.css-1kw6hwy{margin-bottom:32px;}}</style><div class="css-1kw6hwy"><style data-emotion="css 1dx0s0z">.css-1dx0s0z{margin:0;color:rgba(255,255,255,0.8);}.css-1dx0s0z svg{fill:rgba(255,255,255,0.8);}@media screen and (max-width: 1023px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}@media screen and (min-width: 1024px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:20px;line-height:30px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}</style><p class="css-1dx0s0z">Cant find what you are looking for?</p></div><style data-emotion="css 165k7dq">.css-165k7dq{margin-bottom:8px;}</style><div class="css-165k7dq"><style data-emotion="css z46116">.css-z46116{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:32px;min-width:64px;padding:8px 12px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#FFFFFF;border-radius:8px;color:#577FFB;margin:0;cursor:pointer;}.css-z46116 svg{width:16px;height:16px;}.css-z46116 svg{fill:#577FFB;}.css-z46116:hover:not(:disabled){background-color:rgba(255,255,255,0.2);}.css-z46116:active:not(:disabled){background-color:rgba(255,255,255,0.8);color:#213A82;}.css-z46116:active:not(:disabled) svg{fill:#213A82;}.css-z46116:disabled{background-color:rgba(255,255,255,0.2);color:#577FFB;}.css-z46116:disabled svg{fill:#577FFB;}@media screen and (prefers-reduced-motion: no-preference){.css-z46116{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-z46116{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><button data-testid="button" type="button" class="css-z46116"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-mir38c">Get In Touch</span></div><div class="css-1yztr03"><style data-emotion="css 1rycle2">.css-1rycle2{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1rycle2{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1rycle2{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1rycle2.css-1rycle2{width:16px;height:16px;}</style><style data-emotion="css 19fc6y7-EmotionIconBase">.css-19fc6y7-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-19fc6y7-EmotionIconBase.css-19fc6y7-EmotionIconBase{width:16px;height:16px;}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div><div class="css-1nlep1q"><style data-emotion="css 1hk8eu0">.css-1hk8eu0{box-sizing:border-box;overflow:hidden;background-color:#577FFB;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-1hk8eu0{min-height:248px;}}@media screen and (min-width: 1024px){.css-1hk8eu0{min-height:304px;}}</style><div class="css-1hk8eu0"><style data-emotion="css cq9vxn">.css-cq9vxn{box-sizing:border-box;display:block;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;margin-left:0;}.css-cq9vxn svg{border-radius:4px;}</style><div class="css-cq9vxn"><style data-emotion="css 1s2988y">.css-1s2988y{background-image:url(static/card-feature-need-help.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:center left;background-position:center left;height:100%;}</style><div class="css-1s2988y"></div></div><div class="css-1r2lt0d"><style data-emotion="css 1uxjazs">.css-1uxjazs{box-sizing:border-box;-webkit-flex:1;-ms-flex:1;flex:1;}@media screen and (max-width: 479px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 480px) and (max-width: 767px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1uxjazs{padding:24px;}}@media screen and (min-width: 1024px){.css-1uxjazs{padding:32px;}}.css-1uxjazs a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1uxjazs"><style data-emotion="css 1dfo3zr">.css-1dfo3zr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-1dfo3zr"><div class="css-f7iis0"><section class="css-1m2iuuv"><h1 class="nk-headline-heading css-4eltk5">Need Help?</h1></section></div><div class="css-1kw6hwy"><p class="css-1dx0s0z"><style data-emotion="css 60wuij">.css-60wuij{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}</style><span class="css-60wuij">Cant find what you are looking for?</span></p></div><button data-testid="button" type="button" class="css-z46116"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-mir38c">Get In Touch</span></div><div class="css-1yztr03"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div></span></a></div><style data-emotion="css ny3d8k">.css-ny3d8k{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-ny3d8k{display:none;}}@media screen and (min-width: 1440px){.css-ny3d8k{display:block;padding:0 12px;margin-top:0;margin-left:83.33333333333334%;-webkit-flex-basis:16.666666666666668%;-ms-flex-preferred-size:16.666666666666668%;flex-basis:16.666666666666668%;max-width:16.666666666666668%;}}</style><div class="css-ny3d8k"><style data-emotion="css 1hq5n5s">.css-1hq5n5s{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><style data-emotion="css 1n8f9ud">.css-1n8f9ud{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><div style="top:0" id="toc-navigation" class="css-1n8f9ud"><style data-emotion="css 1c2ypzx">.css-1c2ypzx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}</style><div class="css-1c2ypzx"></div></div></div></div></div></div></main><style data-emotion="css 7cr3wq">.css-7cr3wq{background:#F4F4F4;padding-bottom:24px;}@media screen and (max-width: 767px){.css-7cr3wq{padding-top:40px;}}@media screen and (min-width: 768px){.css-7cr3wq{padding-top:48px;}}</style><footer class="css-7cr3wq"><div class="css-8atxkm"><style data-emotion="css 1l4gzx1">.css-1l4gzx1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1l4gzx1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}</style><div class="css-1l4gzx1"><style data-emotion="css 1kimetj">.css-1kimetj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1kimetj{padding:0 8px;margin-top:32px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1kimetj{margin-top:0;}}@media screen and (min-width: 1024px){.css-1kimetj{padding:0 12px;}}</style><div class="css-1kimetj"><style data-emotion="css 1c02ias">.css-1c02ias{display:block;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:16px;}@media screen and (min-width: 768px){.css-1c02ias{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="css-1c02ias"><style data-emotion="css 9yia0h">.css-9yia0h{text-align:center;display:block;}@media screen{.css-9yia0h{margin-bottom:40px;}.css-9yia0h:last-child{margin-bottom:0;}}@media screen and (min-width: 768px){.css-9yia0h{margin-right:48px;margin-bottom:24px;}.css-9yia0h:last-child{margin-bottom:24px;}}</style><span class="css-9yia0h"><style data-emotion="css 1m3x2du">.css-1m3x2du{display:inline-block;color:#3358CC;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-1m3x2du{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1m3x2du{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1m3x2du:hover:not(:disabled){color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m3x2du:active:not(:disabled){color:#AEBFFF;-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://www.newscareers.co.uk/" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><style data-emotion="css 1ijiwz2">.css-1ijiwz2{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-1ijiwz2::before{content:'';margin-bottom:-0.403em;display:block;}.css-1ijiwz2::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-1ijiwz2">Careers</span></span></a></span><span class="css-9yia0h"><a href="https://medium.com/newskit-design-system" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Blog</span></span></a></span><span class="css-9yia0h"><a href="#" role="button" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Privacy policy</span></span></a></span><span class="css-9yia0h"><a href="/help/terms-and-conditions/" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Terms &amp; conditions</span></span></a></span></div></div><div class="css-1kimetj"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><style data-emotion="css 3dc54p">.css-3dc54p{margin:0;color:#535353;font-family:"DM Sans",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;text-align:center;margin-top:24px;margin-bottom:40px;}.css-3dc54p svg{fill:#535353;}.css-3dc54p::before{content:'';margin-bottom:-0.391em;display:block;}.css-3dc54p::after{content:'';margin-top:-0.409em;display:block;}</style><div class="css-3dc54p">Copyright © <!-- -->2022<!-- --> News Corp UK &amp; Ireland Limited. All rights reserved. This website is published by News Corp UK &amp; Ireland Limited, 1 London Bridge Street, London, SE1 9GF. Registered in England No 81701. VAT number GB 243 8054 69.</div></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"path":"/components/menu/","pageProps":{}},"page":"/components/menu","query":{},"buildId":"4eEzQdZEpSITC7CcT92PH","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>
+</code></pre></div></div><style data-emotion="css adpo59">.css-adpo59{padding:32px;-webkit-align-self:flex-end;-ms-flex-item-align:flex-end;align-self:flex-end;}</style><div class="css-adpo59"><a><style data-emotion="css y5l602">.css-y5l602{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:48px;min-width:80px;padding:12px 16px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#577FFB;border-radius:8px;color:#FFFFFF;margin:0;cursor:pointer;}.css-y5l602 svg{width:24px;height:24px;}.css-y5l602 svg{fill:#FFFFFF;}.css-y5l602:hover:not(:disabled){background-color:#3358CC;}.css-y5l602:active:not(:disabled){background-color:#213A82;}.css-y5l602:disabled{background-color:#F4F4F4;color:#C0C0C0;}.css-y5l602:disabled svg{fill:#C0C0C0;}@media screen and (prefers-reduced-motion: no-preference){.css-y5l602{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-y5l602{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><button data-testid="code-sandbox" type="button" class="css-y5l602"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Edit on CodeSandbox</span></div></div></button></a></div></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><style data-emotion="css 132rcai">@media screen and (max-width: 767px){.css-132rcai{margin-top:64px;}}@media screen and (min-width: 768px){.css-132rcai{margin-top:80px;}}@media screen and (max-width: 767px){.css-132rcai{margin-bottom:40px;}}@media screen and (min-width: 768px){.css-132rcai{margin-bottom:80px;}}</style><style data-emotion="css nmiuug">@media screen and (max-width: 767px){.css-nmiuug{margin-top:64px;}}@media screen and (min-width: 768px){.css-nmiuug{margin-top:80px;}}@media screen and (max-width: 767px){.css-nmiuug{margin-bottom:40px;}}@media screen and (min-width: 768px){.css-nmiuug{margin-bottom:80px;}}</style><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="anatomy" data-toc-indexed="Anatomy" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Anatomy</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">A Menu contains one required element and three optional elements.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-16in0m0"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><style data-emotion="css zvmkh5">.css-zvmkh5{margin-bottom:0;}</style><div class="css-zvmkh5"><style data-emotion="css qijqp5">.css-qijqp5{overflow-x:auto;}</style><div class="css-qijqp5"><style data-emotion="css 880ie2">.css-880ie2{border-collapse:collapse;border-spacing:0;width:100%;}</style><table class="css-880ie2"><thead><tr><style data-emotion="css 1m82fdm">.css-1m82fdm{border-style:solid;border-color:#BBC3C9;border-width:0 0 1px 0;color:#0A0A0A;font-family:"Poppins",sans-serif;font-size:12px;line-height:1.5;font-weight:500;letter-spacing:0;margin-bottom:16px;height:40px;text-align:left;vertical-align:top;width:100px;white-space:nowrap;padding-bottom:16px;}</style><th class="css-1m82fdm">Item</th><style data-emotion="css 8xmm6j">.css-8xmm6j{border-style:solid;border-color:#BBC3C9;border-width:0 0 1px 0;color:#0A0A0A;font-family:"Poppins",sans-serif;font-size:12px;line-height:1.5;font-weight:500;letter-spacing:0;margin-bottom:16px;height:40px;text-align:left;vertical-align:top;min-width:64px;white-space:nowrap;padding-bottom:16px;}</style><th class="css-8xmm6j">Name</th><style data-emotion="css 12ahf2h">.css-12ahf2h{border-style:solid;border-color:#BBC3C9;border-width:0 0 1px 0;color:#0A0A0A;font-family:"Poppins",sans-serif;font-size:12px;line-height:1.5;font-weight:500;letter-spacing:0;margin-bottom:16px;height:40px;text-align:left;vertical-align:top;min-width:100px;white-space:nowrap;padding-bottom:16px;}</style><th class="css-12ahf2h">Description</th><th class="css-12ahf2h">Component</th><th class="css-1m82fdm">Optional</th></tr></thead></table></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="options" data-toc-indexed="Options" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Options</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">A Menu has options that can be used to provide an appropriate experience for different use cases.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-30qa7x"><div class="css-8atxkm"><style data-emotion="css 1cl0omj">.css-1cl0omj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1cl0omj{margin:-48px -8px 0 -8px;}}@media screen and (min-width: 480px){.css-1cl0omj{margin:-48px -8px 0 -8px;}}@media screen and (min-width: 768px){.css-1cl0omj{margin:-48px -8px 0 -8px;}}@media screen and (min-width: 1024px){.css-1cl0omj{margin:-48px -12px 0 -12px;}}@media screen and (min-width: 1440px){.css-1cl0omj{margin:-48px -12px 0 -12px;}}</style><div class="css-1cl0omj"><div class="css-1k3e0au"><style data-emotion="css 4w2qry">.css-4w2qry{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-4w2qry{padding:0 8px;margin-top:48px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 1024px){.css-4w2qry{padding:0 12px;}}</style><div class="css-4w2qry"><style data-emotion="css fb3dw2">.css-fb3dw2{height:100%;}</style><style data-emotion="css 1fosq9y">.css-1fosq9y{transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}</style><style data-emotion="css 1l9c4ty">.css-1l9c4ty{box-sizing:border-box;overflow:hidden;border-radius:4px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}</style><div class="css-1l9c4ty"><style data-emotion="css f00y0z">.css-f00y0z{box-sizing:border-box;display:block;position:relative;margin-bottom:16px;}.css-f00y0z svg{border-radius:4px;}</style><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><style data-emotion="css 1shocxe">.css-1shocxe{box-sizing:border-box;}</style><div class="css-1shocxe"><style data-emotion="css 1lvcsk9">.css-1lvcsk9{box-sizing:border-box;padding:8px 4px;}.css-1lvcsk9 a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1lvcsk9"><style data-emotion="css 8mepow">.css-8mepow{margin-bottom:20px;}</style><div class="css-8mepow"><style data-emotion="css uy3owc">.css-uy3owc{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-uy3owc::before{content:'';margin-bottom:-0.2155em;display:block;}.css-uy3owc::after{content:'';margin-top:-0.2125em;display:block;}</style><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Orientation</h1></section></div><style data-emotion="css iobivh">.css-iobivh{margin:0;color:#2E2E2E;font-family:"DM Sans",sans-serif;font-size:16px;line-height:24px;font-weight:400;letter-spacing:0;padding:0.5px 0px;}.css-iobivh svg{fill:#2E2E2E;}.css-iobivh::before{content:'';margin-bottom:-0.391em;display:block;}.css-iobivh::after{content:'';margin-top:-0.409em;display:block;}</style><p class="css-iobivh"><style data-emotion="css 18mb4bh">.css-18mb4bh{margin:0;}</style><p class="css-18mb4bh">A Menu can be displayed horizontally or vertically to effectively and appropriately use the space on a screen.</p></p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Title</h1></section></div><p class="css-iobivh"><p class="css-18mb4bh">A title can be displayed in a Menu Item Group above the Menu items. This could be used for categorising Menu items.</p><p class="css-18mb4bh">This is only available when a Menu is in a vertical orientation.</p></p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Menu Divider</h1></section></div><p class="css-iobivh">Dividers can be displayed as the last element between Menu Groups or between Menu Items.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Icons (leading &amp; trailing)</h1></section></div><p class="css-iobivh">Icons can be displayed in Menu Item Group titles as well as Menu Items and can be positioned either before (leading) or after (trailing) the label.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Alignment</h1></section></div><p class="css-iobivh"><ul><li><style data-emotion="css 9j4s18">.css-9j4s18{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:24px;padding:4px 8px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#F4F4F4;border-radius:4px;color:#2E2E2E;white-space:nowrap;}.css-9j4s18 svg{width:16px;height:16px;}.css-9j4s18 svg{fill:#2E2E2E;}</style><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><style data-emotion="css 9fv837">.css-9fv837{margin:0;font-family:'DM Mono',courier;font-size:14px;font-weight:400;line-height:1.4285714285714286;padding:1px 0px;display:inline-block;}.css-9fv837::before{content:'';display:block;height:0;width:0;margin-bottom:-0.4267857142857143em;}.css-9fv837::after{content:'';display:block;height:0;width:0;margin-top:-0.3642857142857143em;}</style><span class="css-9fv837">Center</span></div></div></div>: Centers the Menu item label and icons.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">Start</span></div></div></div>: Aligns the Menu item label and icons to the left.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">End</span></div></div></div>: Aligns the Menu item label and icons to the right.</li></ul><style data-emotion="css 16mxp9d">.css-16mxp9d{background-color:#EBF8F9;border-color:#05717D;border-style:solid;border-radius:4px;border-width:0 0 0 4px;color:#FFFFFF;width:100%;padding:16px;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.css-16mxp9d svg{fill:#05717D;}</style><div data-testid="inline-message" class="css-16mxp9d"><style data-emotion="css ojf8hg">.css-ojf8hg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}</style><div class="css-ojf8hg"><style data-emotion="css 1a0v2ke">.css-1a0v2ke{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}</style><div role="region" aria-live="off" aria-label="note" class="css-1a0v2ke"><style data-emotion="css e2931u">.css-e2931u{margin:0;font-family:"Poppins",sans-serif;font-size:16px;line-height:18px;font-weight:700;letter-spacing:0;padding:0.5px 0px;color:#0A0A0A;margin-bottom:12px;}.css-e2931u::before{content:'';margin-bottom:-0.2155em;display:block;}.css-e2931u::after{content:'';margin-top:-0.2125em;display:block;}.css-e2931u svg{fill:#0A0A0A;}</style><p class="css-e2931u">Note</p><style data-emotion="css txuyxw">.css-txuyxw{margin:0;font-family:"DM Sans",sans-serif;font-size:14px;line-height:21px;font-weight:500;letter-spacing:0;padding:0.5px 0px;color:#2E2E2E;}.css-txuyxw::before{content:'';margin-bottom:-0.391em;display:block;}.css-txuyxw::after{content:'';margin-top:-0.409em;display:block;}.css-txuyxw svg{fill:#2E2E2E;}</style><p class="css-txuyxw">Default value depends on the vertical prop: when is True the value is set to MenuItemAlign.Start, and MenuAlign.Center when is False.</p></div></div></div></p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Size</h1></section></div><p class="css-iobivh">There are three sizes of the Menu item: small, medium, and large. Menu item label, icon, and the menu container change size. Menu matches the same height as three button sizes, to align when used together.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Style</h1></section></div><p class="css-iobivh"><p>There are three default styles that can be mapped based on their orientation and application.</p><ul><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">menuItemVertical</span></div></div></div> this is the default style applied when the menu is in a vertical orientation.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">menuItemHorizonal</span></div></div></div> this is the default style applied when the menu is in a horizontal orientation.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">menuItemHorizontalInverse</span></div></div></div> this is the default style applied when the menu is in a horizontal orientation on contrasting background colour.</li></ul></p></div></div></div></div></div><div class="css-1nlep1q"><div class="css-4w2qry"><style data-emotion="css 1iphy6n">.css-1iphy6n{box-sizing:border-box;overflow:hidden;border-radius:4px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:rowfalse;-ms-flex-direction:rowfalse;flex-direction:rowfalse;transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}</style><div class="css-1iphy6n"><style data-emotion="css po7my3">.css-po7my3{box-sizing:border-box;display:block;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:16px;}.css-po7my3 svg{border-radius:4px;}</style><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><style data-emotion="css 1r2lt0d">.css-1r2lt0d{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}</style><div class="css-1r2lt0d"><style data-emotion="css 1p9cj9w">.css-1p9cj9w{box-sizing:border-box;-webkit-flex:1;-ms-flex:1;flex:1;padding:8px 4px;}.css-1p9cj9w a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Orientation</h1></section></div><p class="css-iobivh"><p class="css-18mb4bh">A Menu can be displayed horizontally or vertically to effectively and appropriately use the space on a screen.</p></p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Title</h1></section></div><p class="css-iobivh"><p class="css-18mb4bh">A title can be displayed in a Menu Item Group above the Menu items. This could be used for categorising Menu items.</p><p class="css-18mb4bh">This is only available when a Menu is in a vertical orientation.</p></p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Menu Divider</h1></section></div><p class="css-iobivh">Dividers can be displayed as the last element between Menu Groups or between Menu Items.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Icons (leading &amp; trailing)</h1></section></div><p class="css-iobivh">Icons can be displayed in Menu Item Group titles as well as Menu Items and can be positioned either before (leading) or after (trailing) the label.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Alignment</h1></section></div><p class="css-iobivh"><ul><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">Center</span></div></div></div>: Centers the Menu item label and icons.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">Start</span></div></div></div>: Aligns the Menu item label and icons to the left.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">End</span></div></div></div>: Aligns the Menu item label and icons to the right.</li></ul><div data-testid="inline-message" class="css-16mxp9d"><div class="css-ojf8hg"><div role="region" aria-live="off" aria-label="note" class="css-1a0v2ke"><p class="css-e2931u">Note</p><p class="css-txuyxw">Default value depends on the vertical prop: when is True the value is set to MenuItemAlign.Start, and MenuAlign.Center when is False.</p></div></div></div></p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Size</h1></section></div><p class="css-iobivh">There are three sizes of the Menu item: small, medium, and large. Menu item label, icon, and the menu container change size. Menu matches the same height as three button sizes, to align when used together.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Style</h1></section></div><p class="css-iobivh"><p>There are three default styles that can be mapped based on their orientation and application.</p><ul><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">menuItemVertical</span></div></div></div> this is the default style applied when the menu is in a vertical orientation.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">menuItemHorizonal</span></div></div></div> this is the default style applied when the menu is in a horizontal orientation.</li><li><div data-testid="flag" class="css-9j4s18"><div class="css-m556v"><div class="css-14dqn90"><span class="css-9fv837">menuItemHorizontalInverse</span></div></div></div> this is the default style applied when the menu is in a horizontal orientation on contrasting background colour.</li></ul></p></div></div></div></div></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="states" data-toc-indexed="States" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">States</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">A Menu has states including, base, hover, active, disabled and focus. They can be displayed with both, base or selected. By default, a Menu has one menu item in a selected state.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-30qa7x"><div class="css-8atxkm"><div class="css-1cl0omj"><style data-emotion="css l15fj7">.css-l15fj7{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-l15fj7{padding:0 8px;margin-top:48px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-l15fj7{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;}}@media screen and (min-width: 1024px){.css-l15fj7{padding:0 12px;}}</style><div class="css-l15fj7"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Base</h1></section></div><p class="css-iobivh">Menu items have a base state. This is the base style of the Menu item before it has been interacted with by a user.</p></div></div></div></div><div class="css-l15fj7"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Hover</h1></section></div><p class="css-iobivh">Menu items have a hover state. The style of the Menu item changes to visually communicate and provide feedback to the user that the Menu item is an interactive element.</p></div></div></div></div><div class="css-l15fj7"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Active</h1></section></div><p class="css-iobivh">Menu items have an active state. The style of the Menu item changes to visually communicate and provide feedback to the user that the Menu item has been interacted with.</p></div></div></div></div><div class="css-l15fj7"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Disabled</h1></section></div><p class="css-iobivh">Menu items in a disabled state communicate that a Menu item exists, but is not available to the user in that scenario. When the user’s cursor hovers over a Menu item in a disabled state, the cursor shows as not-allowed. Disabled Menu items are often used to maintain layout consistency and communicate that a Menu item may become available if another condition has been met.</p></div></div></div></div><div class="css-l15fj7"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Focus</h1></section></div><p class="css-iobivh">Menu items in a focus state communicate that a user has highlighted a Menu item, using an input method such as a keyboard or voice.</p></div></div></div></div><div class="css-l15fj7"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Selected</h1></section></div><p class="css-iobivh">Menu items have a selected state. The style of the Menu item changes to visually communicate and provide feedback to the user that the Tab item has been selected.</p></div></div></div></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="behaviors" data-toc-indexed="Behaviours" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Behaviours</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">A Menu has the following component functions when integrated into a product.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-30qa7x"><div class="css-8atxkm"><div class="css-1cl0omj"><div class="css-1k3e0au"><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Width and Height</h1></section></div><p class="css-iobivh">A Menu is 100% width and height, therefore if a specific width or height is required a parent container will control this.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Transitions</h1></section></div><p class="css-iobivh">When the user hovers over a Menu item, the style transitions from one state to another.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Selected</h1></section></div><p class="css-iobivh">Only one Menu item can be selected at any given time.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1l9c4ty"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1lvcsk9"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Label Overflow</h1></section></div><p class="css-iobivh">When the label in a Menu title or Menu item is too long for the available horizontal space, they wrap to form another line.</p></div></div></div></div></div><div class="css-1nlep1q"><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Width and Height</h1></section></div><p class="css-iobivh">A Menu is 100% width and height, therefore if a specific width or height is required a parent container will control this.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Transitions</h1></section></div><p class="css-iobivh">When the user hovers over a Menu item, the style transitions from one state to another.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Selected</h1></section></div><p class="css-iobivh">Only one Menu item can be selected at any given time.</p></div></div></div></div><div class="css-4w2qry"><div class="css-1iphy6n"><div class="css-po7my3"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1r2lt0d"><div class="css-1p9cj9w"><div class="css-8mepow"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Label Overflow</h1></section></div><p class="css-iobivh">When the label in a Menu title or Menu item is too long for the available horizontal space, they wrap to form another line.</p></div></div></div></div></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="usage" data-toc-indexed="Usage" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Usage</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">The following guidance describes how and when to appropriately use a Menu component.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-30qa7x"><div class="css-8atxkm"><style data-emotion="css 1vn49n">.css-1vn49n{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1vn49n{margin:-24px -8px 0 -8px;}}@media screen and (min-width: 480px){.css-1vn49n{margin:-24px -8px 0 -8px;}}@media screen and (min-width: 768px){.css-1vn49n{margin:-24px -8px 0 -8px;}}@media screen and (min-width: 1024px){.css-1vn49n{margin:-24px -12px 0 -12px;}}@media screen and (min-width: 1440px){.css-1vn49n{margin:-24px -12px 0 -12px;}}</style><div class="css-1vn49n"><style data-emotion="css 1ebisl9">.css-1ebisl9{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1ebisl9{padding:0 8px;margin-top:24px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1ebisl9{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;}}@media screen and (min-width: 1024px){.css-1ebisl9{padding:0 12px;}}</style><div class="css-1ebisl9"><style data-emotion="css cssveg">.css-cssveg{position:relative;}</style><style data-emotion="css 1ql0hoz">.css-1ql0hoz{position:relative;}</style><div class="css-1ql0hoz"><style data-emotion="css 1fvj0zx">.css-1fvj0zx{position:absolute;right:16px;top:16px;z-index:1;}</style><style data-emotion="css 1b128fe">.css-1b128fe{position:absolute;right:16px;top:16px;z-index:1;}</style><div class="css-1b128fe"><style data-emotion="css 1rfzvwh">.css-1rfzvwh{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;width:32px;height:32px;padding:0;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border-style:solid;border-color:#0A782A;background-color:#E6FAEB;border-radius:50%;border-width:1px;}.css-1rfzvwh svg{width:16px;height:16px;}.css-1rfzvwh svg{fill:#0A782A;}</style><div data-testid="flag" class="css-1rfzvwh"><div class="css-m556v"><div class="css-14dqn90"><style data-emotion="css 1q2xvx1">.css-1q2xvx1{fill:#0A782A;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1q2xvx1{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1q2xvx1{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1q2xvx1.css-1q2xvx1{width:24px;height:24px;fill:#0A782A;}@media screen and (prefers-reduced-motion: no-preference){.css-1q2xvx1.css-1q2xvx1{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1q2xvx1.css-1q2xvx1{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><style data-emotion="css bc6czi-EmotionIconBase">.css-bc6czi-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#0A782A;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-bc6czi-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-bc6czi-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-bc6czi-EmotionIconBase.css-bc6czi-EmotionIconBase{width:24px;height:24px;fill:#0A782A;}@media screen and (prefers-reduced-motion: no-preference){.css-bc6czi-EmotionIconBase.css-bc6czi-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-bc6czi-EmotionIconBase.css-bc6czi-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-bc6czi-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"></path></svg></div></div></div></div><style data-emotion="css 13h3q9j">.css-13h3q9j{box-sizing:border-box;overflow:hidden;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}</style><div class="css-13h3q9j"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><style data-emotion="css u3mic">.css-u3mic{box-sizing:border-box;padding:0;}.css-u3mic a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-u3mic"><style data-emotion="css 14xhfxi">.css-14xhfxi{margin-bottom:16px;}</style><div class="css-14xhfxi"><style data-emotion="css 11zqwt5">.css-11zqwt5{border-style:solid;border-color:#0A782A;border-width:4px;border-radius:4px;border-width:0px;margin:0;border-top-width:4px;width:100%;}</style><hr data-testid="divider" aria-hidden="true" class="css-11zqwt5"/><div class="css-14xhfxi"></div><style data-emotion="css jeenpm">.css-jeenpm{font-family:"Poppins",sans-serif;font-size:22px;line-height:24.75px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-jeenpm::before{content:'';margin-bottom:-0.2155em;display:block;}.css-jeenpm::after{content:'';margin-top:-0.2125em;display:block;}</style><section class="css-jeenpm"><style data-emotion="css 1atm1s9">.css-1atm1s9{display:inline;font:inherit;margin:0;color:#0A782A;}.css-1atm1s9 svg{fill:#0A782A;}</style><h1 class="nk-headline-heading css-1atm1s9">Do</h1></section></div><div class="css-14xhfxi"><p class="css-iobivh">Use a Menu to navigate to different top level sections or sub-sections.</p></div></div></div></div></div></div><div class="css-1ebisl9"><div class="css-1ql0hoz"><div class="css-1b128fe"><style data-emotion="css 12qiph0">.css-12qiph0{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;width:32px;height:32px;padding:0;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border-style:solid;border-color:#D20600;background-color:#FFE6E5;border-radius:50%;border-width:1px;}.css-12qiph0 svg{width:16px;height:16px;}.css-12qiph0 svg{fill:#D20600;}</style><div data-testid="flag" class="css-12qiph0"><div class="css-m556v"><div class="css-14dqn90"><style data-emotion="css kvjn5r">.css-kvjn5r{fill:#D20600;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-kvjn5r{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-kvjn5r{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-kvjn5r.css-kvjn5r{width:24px;height:24px;fill:#D20600;}@media screen and (prefers-reduced-motion: no-preference){.css-kvjn5r.css-kvjn5r{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-kvjn5r.css-kvjn5r{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><style data-emotion="css o21jfp-EmotionIconBase">.css-o21jfp-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#D20600;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-o21jfp-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-o21jfp-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-o21jfp-EmotionIconBase.css-o21jfp-EmotionIconBase{width:24px;height:24px;fill:#D20600;}@media screen and (prefers-reduced-motion: no-preference){.css-o21jfp-EmotionIconBase.css-o21jfp-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-o21jfp-EmotionIconBase.css-o21jfp-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-o21jfp-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg></div></div></div></div><div class="css-13h3q9j"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-u3mic"><div class="css-14xhfxi"><style data-emotion="css l4ic68">.css-l4ic68{border-style:solid;border-color:#D20600;border-width:4px;border-radius:4px;border-width:0px;margin:0;border-top-width:4px;width:100%;}</style><hr data-testid="divider" aria-hidden="true" class="css-l4ic68"/><div class="css-14xhfxi"></div><section class="css-jeenpm"><style data-emotion="css 33goe7">.css-33goe7{display:inline;font:inherit;margin:0;color:#D20600;}.css-33goe7 svg{fill:#D20600;}</style><h1 class="nk-headline-heading css-33goe7">Don’t</h1></section></div><div class="css-14xhfxi"><p class="css-iobivh">Use a Menu to open content panes within a page.</p></div></div></div></div></div></div><div class="css-1ebisl9"><div class="css-1ql0hoz"><div class="css-1b128fe"><div data-testid="flag" class="css-1rfzvwh"><div class="css-m556v"><div class="css-14dqn90"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-bc6czi-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"></path></svg></div></div></div></div><div class="css-13h3q9j"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-u3mic"><div class="css-14xhfxi"><hr data-testid="divider" aria-hidden="true" class="css-11zqwt5"/><div class="css-14xhfxi"></div><section class="css-jeenpm"><h1 class="nk-headline-heading css-1atm1s9">Do</h1></section></div><div class="css-14xhfxi"><p class="css-iobivh">When using a Menu you should be mindful of the number of items you’re displaying, helping readability and also reducing the cognitive load.</p></div></div></div></div></div></div><div class="css-1ebisl9"><div class="css-1ql0hoz"><div class="css-1b128fe"><div data-testid="flag" class="css-12qiph0"><div class="css-m556v"><div class="css-14dqn90"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-o21jfp-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg></div></div></div></div><div class="css-13h3q9j"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-u3mic"><div class="css-14xhfxi"><hr data-testid="divider" aria-hidden="true" class="css-l4ic68"/><div class="css-14xhfxi"></div><section class="css-jeenpm"><h1 class="nk-headline-heading css-33goe7">Don’t</h1></section></div><div class="css-14xhfxi"><p class="css-iobivh">All Menu items should be consistent in size e.g. small, medium or large Menu item. This is to ensure Menu items have equal importance.</p></div></div></div></div></div></div><div class="css-1ebisl9"><div class="css-1ql0hoz"><div class="css-1b128fe"><div data-testid="flag" class="css-1rfzvwh"><div class="css-m556v"><div class="css-14dqn90"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-bc6czi-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"></path></svg></div></div></div></div><div class="css-13h3q9j"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-u3mic"><div class="css-14xhfxi"><hr data-testid="divider" aria-hidden="true" class="css-11zqwt5"/><div class="css-14xhfxi"></div><section class="css-jeenpm"><h1 class="nk-headline-heading css-1atm1s9">Do</h1></section></div><div class="css-14xhfxi"><p class="css-iobivh">Menu item labels should be in sentence case. This helps with scannability and legibility.</p></div></div></div></div></div></div><div class="css-1ebisl9"><div class="css-1ql0hoz"><div class="css-1b128fe"><div data-testid="flag" class="css-12qiph0"><div class="css-m556v"><div class="css-14dqn90"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-o21jfp-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg></div></div></div></div><div class="css-13h3q9j"><div class="css-f00y0z"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-u3mic"><div class="css-14xhfxi"><hr data-testid="divider" aria-hidden="true" class="css-l4ic68"/><div class="css-14xhfxi"></div><section class="css-jeenpm"><h1 class="nk-headline-heading css-33goe7">Don’t</h1></section></div><div class="css-14xhfxi"><p class="css-iobivh">Menu item labels shouldn’t be truncated. Keep them short, and fully visible.</p></div></div></div></div></div></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="accessibility" data-toc-indexed="Accessibility" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Accessibility Considerations</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">Menus implement the latest<!-- --> <a href="https://www.w3.org/WAI/tutorials/menus/" class="css-g09sk7"><span class="css-17x5lw"><style data-emotion="css p4p8io">.css-p4p8io{margin:0;display:inline-block;display:block;}</style><span class="css-p4p8io">WAI-ARIA Menu specifications.</span></span></a>.</p></div></div><div class="css-12v76db"></div><div class="css-1uhwsex"><div class="css-8atxkm"><style data-emotion="css r19kfv">.css-r19kfv{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-r19kfv{margin:-80px -8px 0 -8px;}}@media screen and (min-width: 480px){.css-r19kfv{margin:-80px -8px 0 -8px;}}@media screen and (min-width: 768px){.css-r19kfv{margin:-80px -8px 0 -8px;}}@media screen and (min-width: 1024px){.css-r19kfv{margin:-80px -12px 0 -12px;}}@media screen and (min-width: 1440px){.css-r19kfv{margin:-80px -12px 0 -12px;}}</style><div class="css-r19kfv"><style data-emotion="css 1rrbqaq">.css-1rrbqaq{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1rrbqaq{padding:0 8px;margin-top:80px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1rrbqaq{margin-left:8.333333333333334%;-webkit-flex-basis:83.33333333333334%;-ms-flex-preferred-size:83.33333333333334%;flex-basis:83.33333333333334%;max-width:83.33333333333334%;}}@media screen and (min-width: 1024px){.css-1rrbqaq{padding:0 12px;}}@media screen and (min-width: 1440px){.css-1rrbqaq{-webkit-flex-basis:66.66666666666667%;-ms-flex-preferred-size:66.66666666666667%;flex-basis:66.66666666666667%;max-width:66.66666666666667%;}}</style><div class="css-1rrbqaq"><style data-emotion="css taye4">.css-taye4{margin-bottom:40px;}</style><div class="css-taye4"><style data-emotion="css 1r3myvc">.css-1r3myvc{margin:0;color:#0A0A0A;display:inline-block;}.css-1r3myvc svg{fill:#0A0A0A;}@media screen and (max-width: 1439px){.css-1r3myvc{font-family:"Poppins",sans-serif;font-size:20px;line-height:22.5px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1r3myvc::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1r3myvc::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1440px){.css-1r3myvc{font-family:"Poppins",sans-serif;font-size:22px;line-height:24.75px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1r3myvc::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1r3myvc::after{content:'';margin-top:-0.2125em;display:block;}}</style><span class="css-1r3myvc">Focus order</span></div><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-1m82fdm">Order</th><th class="css-12ahf2h">Element</th><th class="css-12ahf2h">Role</th></tr></thead></table></div></div><div class="css-1rrbqaq"><div class="css-taye4"><span class="css-1r3myvc">Keyboard Interactions</span></div><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Command</th><th class="css-12ahf2h">Description</th></tr></thead></table></div></div><div class="css-1rrbqaq"><div class="css-taye4"><span class="css-1r3myvc">WAI-ARIA</span></div><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Element</th><th class="css-12ahf2h">Attribute</th><th class="css-12ahf2h">Value</th><th class="css-12ahf2h">Description</th><th class="css-1m82fdm">User Supplied</th></tr></thead></table></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="seo" data-toc-indexed="SEO" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">SEO Considerations</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">The rendered menu is build using a native HTML nav element, this should ensure that it is easily for crawlers to discover. Navigational Items should have clear descriptive titles to allow crawlers to correctly identify content.</p></div></div><div class="css-12v76db"></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="component-api" data-toc-indexed="API" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">API</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">There are props on the three components that combine to form the Menu component (Menu, Menu Item Group, Menu Item).</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><style data-emotion="css bmafgm">.css-bmafgm{margin-bottom:80px;}</style><div class="css-bmafgm"><div class="css-taye4"><span class="css-1r3myvc">Menu</span></div><style data-emotion="css tdrmmh">.css-tdrmmh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-flow:column;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;}</style><div data-testid="tab-group" class="css-tdrmmh"><style data-emotion="css 1tmbbcs">.css-1tmbbcs{position:relative;z-index:0;margin-bottom:32px;}</style><div data-testid="tab-bar" class="css-1tmbbcs"><div class="css-v6l5fq"><style data-emotion="css 1ygmje2">.css-1ygmje2{box-sizing:border-box;height:100%;overflow-x:auto;overflow-y:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;}.css-1ygmje2::-webkit-scrollbar{display:none;}.css-1ygmje2{-ms-overflow-style:none;scrollbar-width:none;}</style><div data-testid="scroll-container" class="css-1ygmje2"><style data-emotion="css qsb5ey">.css-qsb5ey{width:100%;border-width:0;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><style data-emotion="css 1absq12">.css-1absq12{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;width:100%;border-width:0;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div role="tablist" aria-orientation="horizontal" class="css-1absq12"><style data-emotion="css jcw7lr">.css-jcw7lr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;}.css-jcw7lr >*:not(style){width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}</style><div data-testid="distribution-wrapper" class="css-jcw7lr"><style data-emotion="css hob05">.css-hob05{scroll-snap-align:start;}</style><div class="css-hob05"><style data-emotion="css eyfk1r">.css-eyfk1r{border-radius:borderRadiusSharp;background-color:transparent;color:#0A0A0A;border-color:#577FFB;}.css-eyfk1r:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-eyfk1r:focus{outline-offset:-5px;}}}</style><style data-emotion="css obqwd1">.css-obqwd1{margin:0;cursor:pointer;border-radius:borderRadiusSharp;background-color:transparent;color:#0A0A0A;border-color:#577FFB;}@media screen and (prefers-reduced-motion: no-preference){.css-obqwd1{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-obqwd1{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-obqwd1:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-obqwd1:focus{outline-offset:-5px;}}}</style><style data-emotion="css 1aoagey">.css-1aoagey{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:48px;width:100%;padding:12px 16px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border-radius:borderRadiusSharp;background-color:transparent;color:#535353;margin:0;cursor:pointer;border-radius:borderRadiusSharp;background-color:transparent;color:#0A0A0A;border-color:#577FFB;}.css-1aoagey svg{width:24px;height:24px;}.css-1aoagey:hover:not(:disabled){color:#2E2E2E;}.css-1aoagey:active:not(:disabled){color:#2E2E2E;}@media screen and (prefers-reduced-motion: no-preference){.css-1aoagey{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1aoagey{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1aoagey:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-1aoagey:focus{outline-offset:-5px;}}}</style><button data-testid="tab" type="button" role="tab" aria-selected="true" tabindex="0" selected="" class="css-1aoagey"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Props</span></div></div></button></div></div><div data-testid="distribution-wrapper" class="css-jcw7lr"><style data-emotion="css 1vrbtrb">.css-1vrbtrb{scroll-snap-align:end;}</style><div class="css-1vrbtrb"><style data-emotion="css 14scimr">.css-14scimr:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-14scimr:focus{outline-offset:-5px;}}}</style><style data-emotion="css 1ov3ypz">.css-1ov3ypz{margin:0;cursor:pointer;}@media screen and (prefers-reduced-motion: no-preference){.css-1ov3ypz{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1ov3ypz{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1ov3ypz:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-1ov3ypz:focus{outline-offset:-5px;}}}</style><style data-emotion="css mvtei6">.css-mvtei6{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:48px;width:100%;padding:12px 16px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border-radius:borderRadiusSharp;background-color:transparent;color:#535353;margin:0;cursor:pointer;}.css-mvtei6 svg{width:24px;height:24px;}.css-mvtei6:hover:not(:disabled){color:#2E2E2E;}.css-mvtei6:active:not(:disabled){color:#2E2E2E;}@media screen and (prefers-reduced-motion: no-preference){.css-mvtei6{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-mvtei6{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-mvtei6:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-mvtei6:focus{outline-offset:-5px;}}}</style><button data-testid="tab" type="button" role="tab" aria-selected="false" tabindex="-1" class="css-mvtei6"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Overrides</span></div></div></button></div></div><style data-emotion="css 1mzw2a8">.css-1mzw2a8{background-color:#577FFB;position:absolute;z-index:2;bottom:0px;left:0px;}</style><div style="width:0px;height:2px;transform:translateX(0px);transition:" data-testid="tab-bar-indicator" aria-hidden="true" role="presentation" class="css-1mzw2a8"></div></div></div></div><style data-emotion="css vp7qb8">.css-vp7qb8{background-color:#E4E4E4;display:block;position:absolute;z-index:1;width:100%;height:2px;bottom:0px;left:0px;}</style><div role="presentation" data-testid="tab-bar-track" class="css-vp7qb8"></div></div><style data-emotion="css g2dfvm">.css-g2dfvm{margin:0;width:100%;}.css-g2dfvm:focus{outline-offset:-1px;}@media not all and (min-resolution: 0.001dpcm){@supports (-webkit-appearance: none) and (stroke-color: transparent){.css-g2dfvm:focus{outline-offset:-5px;}}}</style><div data-testid="tab-panel" role="tabpanel" aria-hidden="false" selected="" tabindex="0" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-8xmm6j">Name</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th><th class="css-1m82fdm">Required</th></tr></thead></table></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="true" tabindex="-1" hidden="" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Attribute</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th></tr></thead></table></div></div></div></div><div class="css-bmafgm"><div class="css-taye4"><span class="css-1r3myvc">Menu Item Group</span></div><div data-testid="tab-group" class="css-tdrmmh"><div data-testid="tab-bar" class="css-1tmbbcs"><div class="css-v6l5fq"><div data-testid="scroll-container" class="css-1ygmje2"><div role="tablist" aria-orientation="horizontal" class="css-1absq12"><div data-testid="distribution-wrapper" class="css-jcw7lr"><div class="css-hob05"><button data-testid="tab" type="button" role="tab" aria-selected="true" tabindex="0" selected="" class="css-1aoagey"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Props</span></div></div></button></div></div><div data-testid="distribution-wrapper" class="css-jcw7lr"><div class="css-1vrbtrb"><button data-testid="tab" type="button" role="tab" aria-selected="false" tabindex="-1" class="css-mvtei6"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Overrides</span></div></div></button></div></div><div style="width:0px;height:2px;transform:translateX(0px);transition:" data-testid="tab-bar-indicator" aria-hidden="true" role="presentation" class="css-1mzw2a8"></div></div></div></div><div role="presentation" data-testid="tab-bar-track" class="css-vp7qb8"></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="false" selected="" tabindex="0" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-8xmm6j">Name</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th><th class="css-1m82fdm">Required</th></tr></thead></table></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="true" tabindex="-1" hidden="" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Attribute</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th></tr></thead></table></div></div></div></div><div class="css-bmafgm"><div class="css-taye4"><span class="css-1r3myvc">Menu Item</span></div><div data-testid="tab-group" class="css-tdrmmh"><div data-testid="tab-bar" class="css-1tmbbcs"><div class="css-v6l5fq"><div data-testid="scroll-container" class="css-1ygmje2"><div role="tablist" aria-orientation="horizontal" class="css-1absq12"><div data-testid="distribution-wrapper" class="css-jcw7lr"><div class="css-hob05"><button data-testid="tab" type="button" role="tab" aria-selected="true" tabindex="0" selected="" class="css-1aoagey"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Props</span></div></div></button></div></div><div data-testid="distribution-wrapper" class="css-jcw7lr"><div class="css-1vrbtrb"><button data-testid="tab" type="button" role="tab" aria-selected="false" tabindex="-1" class="css-mvtei6"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Overrides</span></div></div></button></div></div><div style="width:0px;height:2px;transform:translateX(0px);transition:" data-testid="tab-bar-indicator" aria-hidden="true" role="presentation" class="css-1mzw2a8"></div></div></div></div><div role="presentation" data-testid="tab-bar-track" class="css-vp7qb8"></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="false" selected="" tabindex="0" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-8xmm6j">Name</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th><th class="css-1m82fdm">Required</th></tr></thead></table></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="true" tabindex="-1" hidden="" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Attribute</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th></tr></thead></table></div></div></div></div><div class="css-30qa7x"><div class="css-taye4"><span class="css-1r3myvc">Menu Divider</span></div><div data-testid="tab-group" class="css-tdrmmh"><div data-testid="tab-bar" class="css-1tmbbcs"><div class="css-v6l5fq"><div data-testid="scroll-container" class="css-1ygmje2"><div role="tablist" aria-orientation="horizontal" class="css-1absq12"><div data-testid="distribution-wrapper" class="css-jcw7lr"><div class="css-hob05"><button data-testid="tab" type="button" role="tab" aria-selected="true" tabindex="0" selected="" class="css-1aoagey"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Props</span></div></div></button></div></div><div data-testid="distribution-wrapper" class="css-jcw7lr"><div class="css-1vrbtrb"><button data-testid="tab" type="button" role="tab" aria-selected="false" tabindex="-1" class="css-mvtei6"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-4zs4vc">Overrides</span></div></div></button></div></div><div style="width:0px;height:2px;transform:translateX(0px);transition:" data-testid="tab-bar-indicator" aria-hidden="true" role="presentation" class="css-1mzw2a8"></div></div></div></div><div role="presentation" data-testid="tab-bar-track" class="css-vp7qb8"></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="false" selected="" tabindex="0" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-8xmm6j">Name</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th><th class="css-1m82fdm">Required</th></tr></thead></table></div></div><div data-testid="tab-panel" role="tabpanel" aria-hidden="true" tabindex="-1" hidden="" class="css-g2dfvm"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Attribute</th><th class="css-12ahf2h">Type</th><th class="css-12ahf2h">Default</th><th class="css-12ahf2h">Description</th></tr></thead></table></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="compliance" data-toc-indexed="Compliance" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Compliance</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-qijqp5"><table class="css-880ie2"><thead><tr><th class="css-12ahf2h">Feature</th><th class="css-12ahf2h">Description</th><th class="css-1m82fdm">Status</th></tr></thead></table></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-1uhwsex"><section id="related" data-toc-indexed="Related" class="css-1ndfc0u"><div class="css-8atxkm"><div class="css-16g593b"><div class="css-15fgmbf"><div class="css-1lwsjcx"><div class="css-klpn0c"><div class="css-dzecoh"><section class="css-vj7jmi"><h2 class="nk-headline-heading css-5gd387">Related Components</h2></section></div></div></div><div class="css-1trj2hr"><p class="css-1npcurr">Componenets related to Menu</p></div></div><div class="css-12v76db"></div><div class="css-12v76db"><div class="css-30qa7x"><div class="css-8atxkm"><div class="css-1cl0omj"><style data-emotion="css ejqltg">.css-ejqltg{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-ejqltg{padding:0 8px;margin-top:48px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-ejqltg{-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%;}}@media screen and (min-width: 1024px){.css-ejqltg{padding:0 12px;}}@media screen and (min-width: 1440px){.css-ejqltg{-webkit-flex-basis:25%;-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%;}}</style><div class="css-ejqltg"><style data-emotion="css 1fwpq2a">.css-1fwpq2a{box-sizing:border-box;overflow:hidden;border-style:solid;border-radius:12px;border-width:1px;border-color:#E4E4E4;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);height:100%;}.css-1fwpq2a:hover:not(:disabled){box-shadow:0 8px 16px 0 rgba(10,10,10,0.08);}</style><div class="css-1fwpq2a"><style data-emotion="css 1fz92cy">.css-1fz92cy{box-sizing:border-box;display:block;position:relative;margin-bottom:0;}.css-1fz92cy svg{border-radius:4px;}</style><div class="css-1fz92cy"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><style data-emotion="css 1aog5rk">.css-1aog5rk{box-sizing:border-box;padding:24px;}.css-1aog5rk a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1aog5rk"><div class="css-8mepow"><style data-emotion="css 1m1baeh">.css-1m1baeh{-webkit-text-decoration:none;text-decoration:none;border:none;}.css-1m1baeh .nk-headline-kicker{color:#577FFB;}.css-1m1baeh:hover:not(:disabled) .nk-headline-kicker{color:#3358CC;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m1baeh:active:not(:disabled) .nk-headline-kicker{color:#213A82;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m1baeh:visited:not(:disabled) .nk-headline-kicker{color:#5E44E4;}.css-1m1baeh .nk-headline-heading{color:#0A0A0A;}.css-1m1baeh .nk-headline-heading svg{fill:#0A0A0A;}.css-1m1baeh:before{content:'';top:0;right:0;bottom:0;left:0;overflow:hidden;position:absolute;z-index:1;}</style><a class="nk-card-link css-1m1baeh" href="/components/tabs/"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Tabs</h1></section></a></div><p class="css-iobivh">Allows users to alternate between views within the same context.</p></div></div></div></div><div class="css-ejqltg"><div class="css-1fwpq2a"><div class="css-1fz92cy"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1aog5rk"><div class="css-8mepow"><a class="nk-card-link css-1m1baeh" href="/components/link/"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Link</h1></section></a></div><p class="css-iobivh">Allows user to jump to a new location when clicked.</p></div></div></div></div><div class="css-ejqltg"><div class="css-1fwpq2a"><div class="css-1fz92cy"><svg width="1600" height="1600" viewBox="0 0 1600 1600" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-xcdytv"><rect width="1600" height="1600" fill="illustration-Background020"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M1020.59 586.74H579.412C571.29 586.74 564.706 593.339 564.706 601.48V999.458C564.706 1007.6 571.29 1014.2 579.412 1014.2H1020.59C1028.71 1014.2 1035.29 1007.6 1035.29 999.458V601.48C1035.29 593.339 1028.71 586.74 1020.59 586.74ZM579.412 572C563.168 572 550 585.199 550 601.48V999.458C550 1015.74 563.168 1028.94 579.412 1028.94H1020.59C1036.83 1028.94 1050 1015.74 1050 999.458V601.48C1050 585.199 1036.83 572 1020.59 572H579.412ZM722.249 702.981C722.249 728.415 701.898 749.033 676.794 749.033C651.69 749.033 631.339 728.415 631.339 702.981C631.339 677.547 651.69 656.928 676.794 656.928C701.898 656.928 722.249 677.547 722.249 702.981ZM709.872 832.119C703.597 823.903 691.078 824.573 685.706 833.411L609.592 958.639C603.615 968.472 610.654 981.091 622.116 981.091H979.082C990.092 981.091 997.182 969.356 992.108 959.532L892.423 766.558C887.131 756.315 872.718 755.87 866.812 765.768L786.838 899.781C781.512 908.707 768.916 909.432 762.611 901.176L709.872 832.119Z" fill="#E4E4E4"></path></svg></div><div class="css-1shocxe"><div class="css-1aog5rk"><div class="css-8mepow"><a class="nk-card-link css-1m1baeh" href="/components/divider/"><section class="css-uy3owc"><h1 class="nk-headline-heading css-5gd387">Divider</h1></section></a></div><p class="css-iobivh">A thin line that separates content.</p></div></div></div></div></div></div></div></div></div></div></section></div><div class="css-12v76db"><div class="css-nmiuug"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/></div></div><div class="css-12v76db"><style data-emotion="css 1wla9vq">.css-1wla9vq{height:100%;display:block;}.css-1wla9vq >span>div{width:100%;}</style><style data-emotion="css 1kf8klr">.css-1kf8klr{display:inline-block;-webkit-text-decoration:none;text-decoration:none;height:100%;display:block;}@media screen and (prefers-reduced-motion: no-preference){.css-1kf8klr{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1kf8klr{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1kf8klr:hover:not(:disabled){-webkit-text-decoration:none;text-decoration:none;}.css-1kf8klr >span>div{width:100%;}</style><a href="/about/contact-us/" class="css-1kf8klr"><span class="css-17x5lw"><div class="css-1k3e0au"><style data-emotion="css ihrckf">.css-ihrckf{transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-ihrckf{min-height:248px;}}@media screen and (min-width: 1024px){.css-ihrckf{min-height:304px;}}</style><style data-emotion="css 19crx89">.css-19crx89{box-sizing:border-box;overflow:hidden;background-color:#577FFB;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-19crx89{min-height:248px;}}@media screen and (min-width: 1024px){.css-19crx89{min-height:304px;}}</style><div class="css-19crx89"><div class="css-1fz92cy"><style data-emotion="css 1gynme6">.css-1gynme6{background-image:url(static/card-feature-need-help.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:center left;background-position:center left;-webkit-background-size:cover;background-size:cover;-webkit-background-position:right bottom;background-position:right bottom;height:18vh;}@media screen and (min-width: 1024px){.css-1gynme6{height:200px;}}</style><div class="css-1gynme6"></div></div><div class="css-1shocxe"><div class="css-1aog5rk"><style data-emotion="css f7iis0">@media screen and (max-width: 1023px){.css-f7iis0{margin-bottom:20px;}}@media screen and (min-width: 1024px){.css-f7iis0{margin-bottom:24px;}}</style><div class="css-f7iis0"><style data-emotion="css 1m2iuuv">@media screen and (max-width: 1023px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:24px;line-height:27px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}@media screen and (min-width: 1024px){.css-1m2iuuv{font-family:"Poppins",sans-serif;font-size:32px;line-height:36px;font-weight:700;letter-spacing:0;padding:0.5px 0px;}.css-1m2iuuv::before{content:'';margin-bottom:-0.2155em;display:block;}.css-1m2iuuv::after{content:'';margin-top:-0.2125em;display:block;}}</style><section class="css-1m2iuuv"><style data-emotion="css 4eltk5">.css-4eltk5{display:inline;font:inherit;margin:0;color:#FFFFFF;}.css-4eltk5 svg{fill:#FFFFFF;}</style><h1 class="nk-headline-heading css-4eltk5">Need Help?</h1></section></div><style data-emotion="css 1kw6hwy">@media screen and (max-width: 1023px){.css-1kw6hwy{margin-bottom:24px;}}@media screen and (min-width: 1024px){.css-1kw6hwy{margin-bottom:32px;}}</style><div class="css-1kw6hwy"><style data-emotion="css 1dx0s0z">.css-1dx0s0z{margin:0;color:rgba(255,255,255,0.8);}.css-1dx0s0z svg{fill:rgba(255,255,255,0.8);}@media screen and (max-width: 1023px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:16px;line-height:24px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}@media screen and (min-width: 1024px){.css-1dx0s0z{font-family:"Poppins",sans-serif;font-size:20px;line-height:30px;font-weight:500;letter-spacing:0;padding:0.5px 0px;}.css-1dx0s0z::before{content:'';margin-bottom:-0.403em;display:block;}.css-1dx0s0z::after{content:'';margin-top:-0.4em;display:block;}}</style><p class="css-1dx0s0z">Cant find what you are looking for?</p></div><style data-emotion="css 165k7dq">.css-165k7dq{margin-bottom:8px;}</style><div class="css-165k7dq"><style data-emotion="css z46116">.css-z46116{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none;text-decoration:none;min-height:32px;min-width:64px;padding:8px 12px;cursor:default;overflow:hidden;border:none;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background-color:#FFFFFF;border-radius:8px;color:#577FFB;margin:0;cursor:pointer;}.css-z46116 svg{width:16px;height:16px;}.css-z46116 svg{fill:#577FFB;}.css-z46116:hover:not(:disabled){background-color:rgba(255,255,255,0.2);}.css-z46116:active:not(:disabled){background-color:rgba(255,255,255,0.8);color:#213A82;}.css-z46116:active:not(:disabled) svg{fill:#213A82;}.css-z46116:disabled{background-color:rgba(255,255,255,0.2);color:#577FFB;}.css-z46116:disabled svg{fill:#577FFB;}@media screen and (prefers-reduced-motion: no-preference){.css-z46116{transition-property:background-color;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-z46116{transition-property:background-color;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}</style><button data-testid="button" type="button" class="css-z46116"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-mir38c">Get In Touch</span></div><div class="css-1yztr03"><style data-emotion="css 1rycle2">.css-1rycle2{fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-1rycle2{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1rycle2{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-1rycle2.css-1rycle2{width:16px;height:16px;}</style><style data-emotion="css 19fc6y7-EmotionIconBase">.css-19fc6y7-EmotionIconBase{display:inline-block;vertical-align:middle;overflow:hidden;fill:#2E2E2E;vertical-align:unset;display:inline-block;}@media screen and (prefers-reduced-motion: no-preference){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-19fc6y7-EmotionIconBase{transition-property:fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}}.css-19fc6y7-EmotionIconBase.css-19fc6y7-EmotionIconBase{width:16px;height:16px;}</style><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div><div class="css-1nlep1q"><style data-emotion="css 1hk8eu0">.css-1hk8eu0{box-sizing:border-box;overflow:hidden;background-color:#577FFB;border-radius:12px;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;transition-property:box-shadow;transition-duration:200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1);}@media screen and (min-width: 768px){.css-1hk8eu0{min-height:248px;}}@media screen and (min-width: 1024px){.css-1hk8eu0{min-height:304px;}}</style><div class="css-1hk8eu0"><style data-emotion="css cq9vxn">.css-cq9vxn{box-sizing:border-box;display:block;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;margin-left:0;}.css-cq9vxn svg{border-radius:4px;}</style><div class="css-cq9vxn"><style data-emotion="css 1s2988y">.css-1s2988y{background-image:url(static/card-feature-need-help.svg);border-radius:12px;-webkit-background-size:cover;background-size:cover;-webkit-background-position:center left;background-position:center left;height:100%;}</style><div class="css-1s2988y"></div></div><div class="css-1r2lt0d"><style data-emotion="css 1uxjazs">.css-1uxjazs{box-sizing:border-box;-webkit-flex:1;-ms-flex:1;flex:1;}@media screen and (max-width: 479px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 480px) and (max-width: 767px){.css-1uxjazs{padding:16px;}}@media screen and (min-width: 768px) and (max-width: 1023px){.css-1uxjazs{padding:24px;}}@media screen and (min-width: 1024px){.css-1uxjazs{padding:32px;}}.css-1uxjazs a:not(.nk-card-link){z-index:2;position:relative;}</style><div class="css-1uxjazs"><style data-emotion="css 1dfo3zr">.css-1dfo3zr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}</style><div class="css-1dfo3zr"><div class="css-f7iis0"><section class="css-1m2iuuv"><h1 class="nk-headline-heading css-4eltk5">Need Help?</h1></section></div><div class="css-1kw6hwy"><p class="css-1dx0s0z"><style data-emotion="css 60wuij">.css-60wuij{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}</style><span class="css-60wuij">Cant find what you are looking for?</span></p></div><button data-testid="button" type="button" class="css-z46116"><div class="css-bptyib"><div class="css-1yztr03"><span class="css-mir38c">Get In Touch</span></div><div class="css-1yztr03"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="css-19fc6y7-EmotionIconBase ex0cdmw0"><path fill="none" d="M0 0h24v24H0z"></path><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></svg></div></div></button></div></div></div></div></div></span></a></div><style data-emotion="css ny3d8k">.css-ny3d8k{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-ny3d8k{display:none;}}@media screen and (min-width: 1440px){.css-ny3d8k{display:block;padding:0 12px;margin-top:0;margin-left:83.33333333333334%;-webkit-flex-basis:16.666666666666668%;-ms-flex-preferred-size:16.666666666666668%;flex-basis:16.666666666666668%;max-width:16.666666666666668%;}}</style><div class="css-ny3d8k"><style data-emotion="css 1hq5n5s">.css-1hq5n5s{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><style data-emotion="css 1n8f9ud">.css-1n8f9ud{position:fixed;-webkit-transition:0.2s top,bottom ease-in;transition:0.2s top,bottom ease-in;will-change:top,bottom;}</style><div style="top:0" id="toc-navigation" class="css-1n8f9ud"><style data-emotion="css 1c2ypzx">.css-1c2ypzx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}</style><div class="css-1c2ypzx"></div></div></div></div></div></div></main><style data-emotion="css 7cr3wq">.css-7cr3wq{background:#F4F4F4;padding-bottom:24px;}@media screen and (max-width: 767px){.css-7cr3wq{padding-top:40px;}}@media screen and (min-width: 768px){.css-7cr3wq{padding-top:48px;}}</style><footer class="css-7cr3wq"><div class="css-8atxkm"><style data-emotion="css 1l4gzx1">.css-1l4gzx1{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}@media screen{.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 480px){.css-1l4gzx1{margin:-32px 8px 0 8px;}}@media screen and (min-width: 768px){.css-1l4gzx1{margin:-0px 8px 0 8px;}}@media screen and (min-width: 1024px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}@media screen and (min-width: 1440px){.css-1l4gzx1{margin:-0px 12px 0 12px;}}</style><div class="css-1l4gzx1"><style data-emotion="css 1kimetj">.css-1kimetj{box-sizing:border-box;-webkit-background-clip:padding-box;background-clip:padding-box;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;}@media screen{.css-1kimetj{padding:0 8px;margin-top:32px;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%;}}@media screen and (min-width: 768px){.css-1kimetj{margin-top:0;}}@media screen and (min-width: 1024px){.css-1kimetj{padding:0 12px;}}</style><div class="css-1kimetj"><style data-emotion="css 1c02ias">.css-1c02ias{display:block;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin-top:16px;}@media screen and (min-width: 768px){.css-1c02ias{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}</style><div class="css-1c02ias"><style data-emotion="css 9yia0h">.css-9yia0h{text-align:center;display:block;}@media screen{.css-9yia0h{margin-bottom:40px;}.css-9yia0h:last-child{margin-bottom:0;}}@media screen and (min-width: 768px){.css-9yia0h{margin-right:48px;margin-bottom:24px;}.css-9yia0h:last-child{margin-bottom:24px;}}</style><span class="css-9yia0h"><style data-emotion="css 1m3x2du">.css-1m3x2du{display:inline-block;color:#3358CC;-webkit-text-decoration:none;text-decoration:none;}@media screen and (prefers-reduced-motion: no-preference){.css-1m3x2du{transition-property:color,fill;transition-duration:200ms,200ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}@media screen and (prefers-reduced-motion: reduce){.css-1m3x2du{transition-property:color,fill;transition-duration:0ms;transition-timing-function:cubic-bezier(0, 0, .5, 1),cubic-bezier(0, 0, .5, 1);}}.css-1m3x2du:hover:not(:disabled){color:#577FFB;-webkit-text-decoration:underline;text-decoration:underline;}.css-1m3x2du:active:not(:disabled){color:#AEBFFF;-webkit-text-decoration:none;text-decoration:none;}</style><a href="https://www.newscareers.co.uk/" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><style data-emotion="css 1ijiwz2">.css-1ijiwz2{margin:0;font-family:"Poppins",sans-serif;font-size:14px;line-height:21px;font-weight:600;letter-spacing:0;padding:0.5px 0px;display:inline-block;display:block;}.css-1ijiwz2::before{content:'';margin-bottom:-0.403em;display:block;}.css-1ijiwz2::after{content:'';margin-top:-0.4em;display:block;}</style><span class="css-1ijiwz2">Careers</span></span></a></span><span class="css-9yia0h"><a href="https://medium.com/newskit-design-system" target="_blank" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Blog</span></span></a></span><span class="css-9yia0h"><a href="#" role="button" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Privacy policy</span></span></a></span><span class="css-9yia0h"><a href="/help/terms-and-conditions/" class="css-1m3x2du"><span class="css-17x5lw"><span class="css-1ijiwz2">Terms &amp; conditions</span></span></a></span></div></div><div class="css-1kimetj"><hr data-testid="divider" aria-hidden="true" class="css-1a12fxg"/><style data-emotion="css 3dc54p">.css-3dc54p{margin:0;color:#535353;font-family:"DM Sans",sans-serif;font-size:12px;line-height:18px;font-weight:500;letter-spacing:0;padding:0.5px 0px;text-align:center;margin-top:24px;margin-bottom:40px;}.css-3dc54p svg{fill:#535353;}.css-3dc54p::before{content:'';margin-bottom:-0.391em;display:block;}.css-3dc54p::after{content:'';margin-top:-0.409em;display:block;}</style><div class="css-3dc54p">Copyright © <!-- -->2022<!-- --> News Corp UK &amp; Ireland Limited. All rights reserved. This website is published by News Corp UK &amp; Ireland Limited, 1 London Bridge Street, London, SE1 9GF. Registered in England No 81701. VAT number GB 243 8054 69.</div></div></div></div></footer></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"path":"/components/menu/","pageProps":{}},"page":"/components/menu","query":{},"buildId":"16aAekWqHChB9xZCUOXJs","nextExport":true,"isFallback":false,"appGip":true,"scriptLoader":[]}</script></body></html>