@salesforce-ux/design-system/__internal/chunked/docs/ui/components/menus/docs.mdx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,n,l={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},3504:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return G},getElement:function(){return z}});var l=n(1594),s=n.n(l),r=n(5671),a=n(6547),o=n(3212),i=n(1374),d=n(5619),c=n(7412),m=n.n(c);function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function h(e,t){for(var n=0;n<t.length;n++){var l=t[n];l.enumerable=l.enumerable||!1,l.configurable=!0,"value"in l&&(l.writable=!0),Object.defineProperty(e,p(l.key),l)}}function p(e){var t=function(e){if("object"!=u(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=u(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==u(t)?t:t+""}function E(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(E=function(){return!!e})()}function f(e){return f=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},f(e)}function g(e,t){return g=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},g(e,t)}var b=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,n){return t=f(t),function(e,t){if(t&&("object"==u(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,E()?Reflect.construct(t,n||[],f(e).constructor):t.apply(e,n))}(this,t,arguments)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&g(e,t)}(t,e),n=t,(r=[{key:"render",value:function(){return s().createElement(l.Fragment,null,this.props.fragmentChildren)}}])&&h(n.prototype,r),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,r}(s().Component);b.propTypes={fragmentChildren:m().node.isRequired};var w=n(4760),y=n(8347),_=function(e){return s().createElement("div",{className:"demo-only",style:{height:"260px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-5"},s().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),s().createElement(w.Dr,null,"Menu Item Two"),s().createElement(w.Dr,null,"Menu Item Three"),s().createElement(w.Dr,null,"Menu Item Four"),s().createElement(w.Dr,null,"Menu Item Five"),s().createElement(w.Dr,null,"Menu Item Six"),s().createElement(w.Dr,null,"Menu Item Seven"),s().createElement(w.Dr,null,"Menu Item Eight"),s().createElement(w.Dr,null,"Menu Item Nine"),s().createElement(w.Dr,null,"Menu Item Ten")))))},v=function(e){return s().createElement("div",{className:"demo-only",style:{height:"300px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-7"},s().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),s().createElement(w.Dr,null,"Menu Item Two"),s().createElement(w.Dr,null,"Menu Item Three"),s().createElement(w.Dr,null,"Menu Item Four"),s().createElement(w.Dr,null,"Menu Item Five"),s().createElement(w.Dr,null,"Menu Item Six"),s().createElement(w.Dr,null,"Menu Item Seven"),s().createElement(w.Dr,null,"Menu Item Eight"),s().createElement(w.Dr,null,"Menu Item Nine"),s().createElement(w.Dr,null,"Menu Item Ten")))))},I=function(e){return s().createElement("div",{className:"demo-only",style:{height:"430px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-10"},s().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),s().createElement(w.Dr,null,"Menu Item Two"),s().createElement(w.Dr,null,"Menu Item Three"),s().createElement(w.Dr,null,"Menu Item Four"),s().createElement(w.Dr,null,"Menu Item Five"),s().createElement(w.Dr,null,"Menu Item Six"),s().createElement(w.Dr,null,"Menu Item Seven"),s().createElement(w.Dr,null,"Menu Item Eight"),s().createElement(w.Dr,null,"Menu Item Nine"),s().createElement(w.Dr,null,"Menu Item Ten")))))},x=function(e){return s().createElement("div",{className:"demo-only",style:{height:"260px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-with-icon-5"},s().createElement(w.Dr,{tabIndex:"0"},s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},N=function(e){return s().createElement("div",{className:"demo-only",style:{height:"320px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-with-icon-7"},s().createElement(w.Dr,{tabIndex:"0"},s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},M=function(e){return s().createElement("div",{className:"demo-only",style:{height:"450px"}},s().createElement(w.l9,{isOpen:!0},s().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},s().createElement(w.cO,{className:"slds-dropdown_length-with-icon-10"},s().createElement(w.Dr,{tabIndex:"0"},s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),s().createElement(w.Dr,null,s().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},A=[{id:"dropdown-menu-length-5",label:"5 items",element:s().createElement(_,null)},{id:"dropdown-menu-length-7",label:"7 items",element:s().createElement(v,null)},{id:"dropdown-menu-length-10",label:"10 items",element:s().createElement(I,null)},{id:"dropdown-menu-length-5-icon",label:"5 items with icon",element:s().createElement(x,null)},{id:"dropdown-menu-length-7-icon",label:"7 items with icon",element:s().createElement(N,null)},{id:"dropdown-menu-length-10-icon",label:"10 items with icon",element:s().createElement(M,null)}],S=n(942),O=n.n(S),D=["ariaExpanded","className","children","iconRight","itemName","tabIndex","title","submenuClassnames"];function T(){return T=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var l in n)({}).hasOwnProperty.call(n,l)&&(e[l]=n[l])}return e},T.apply(null,arguments)}var k=s().createElement(y.A,{className:"slds-icon slds-icon_x-small slds-icon-text-default slds-m-left_small slds-shrink-none",sprite:"utility",symbol:"right"}),j=function(e){var t=e.ariaExpanded,n=e.className,l=(e.children,e.iconRight),r=e.itemName,a=e.tabIndex,o=e.title,i=e.submenuClassnames,d=function(e,t){if(null==e)return{};var n,l,s=function(e,t){if(null==e)return{};var n={};for(var l in e)if({}.hasOwnProperty.call(e,l)){if(-1!==t.indexOf(l))continue;n[l]=e[l]}return n}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(l=0;l<r.length;l++)n=r[l],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(s[n]=e[n])}return s}(e,D);return s().createElement("li",T({},d,{className:O()("slds-dropdown__item slds-has-submenu",n),role:"presentation"}),s().createElement("a",{role:"menuitem",href:"#","aria-haspopup":"true","aria-expanded":t,tabIndex:a||"-1",onClick:function(e){return e.preventDefault()}},s().createElement("span",{className:"slds-truncate",title:o||r},e.itemName),l||null),s().createElement(w.W1,{className:O()("slds-dropdown_submenu",i)},s().createElement(w.cO,{ariaLabel:r},s().createElement(w.Dr,{tabIndex:"0"},"Submenu Item One"),s().createElement(w.Dr,null,"Submenu Item Two"),s().createElement(w.Dr,null,"Submenu Item Three"),s().createElement("li",{className:"slds-has-divider_top-space",role:"separator"}),s().createElement(w.Dr,null,"Submenu Item Four"))))},P=function(e){var t=e.ariaExpanded,n=e.parentIsOpen,l=e.submenuClassnames;return s().createElement(w.l9,{isOpen:n},s().createElement(w.W1,{className:"slds-dropdown_left"},s().createElement(w.cO,{ariaLabel:"Show More"},s().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),s().createElement(w.Dr,null,"Menu Item Two"),s().createElement(j,{ariaExpanded:t,iconRight:k,itemName:"Menu Item Three",submenuClassnames:l||"slds-dropdown_submenu-right"}))))},C=(n(769),n(806)),W=r.XB.code,B=r.XB.h2,R=r.XB.h3,F=r.XB.h4,L=r.XB.li,X=r.XB.p,V=r.XB.table,H=r.XB.tbody,J=r.XB.td,K=r.XB.th,q=r.XB.thead,$=r.XB.tr,Q=r.XB.ul,z=function(){return(0,l.createElement)(r.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"A Menu offers a list of actions or functions that a user can access."),(0,l.createElement)(a.A,{exampleOnly:!0,demoStyles:"height: 150px;"},(0,l.createElement)(w.Bu,{hasLeftIcon:!0})),B({id:"About-Menu"},"About Menu"),X({},"The unordered menu list ",W({},"<ul>")," with ",W({},'role="menu"')," should be contained in a ",W({},"<div>")," with the class ",W({},".slds-dropdown"),"."),X({},"The target HTML element and dropdown need to be wrapped in the class ",W({},".slds-dropdown-trigger dropdown-trigger_click"),"."),R({id:"Accessibility"},"Accessibility"),F({id:"Markup"},"Markup"),Q({},L({},"The menu trigger is a focusable element (",W({},"<a>")," or ",W({},"<button>"),") with ",W({},'aria-haspopup="true"')),L({},"The menu trigger has the ",W({},"aria-expanded")," attribute applied and the value is set to ",W({},'"true"')," or ",W({},'"false"')," depending on if the menu is open or not."),L({},"The menu has ",W({},'role="menu"')," and an ",W({},"aria-label")," attribute whose value is the name of the menu trigger"),L({},"The menu items have ",W({},'role="menuitem"'),", ",W({},'role="menuitemcheckbox"'),", or ",W({},'role="menuitemradio"'),", depending on the selection options")),F({id:"Keyboard-Interactions"},"Keyboard Interactions"),X({},"The main thing that distinguishes menus from other popover blocks is keyboard navigation: elsewhere, users press the Tab key to navigate through actionable items, but in a menu, users press the arrow keys to navigate."),Q({},L({},"Arrow keys cycle focus through menu items (including disabled menu items)"),L({},"If a menu item opens a submenu, pressing Enter or the right arrow key opens the submenu and focus goes to the first item in the submenu"),L({},"If a submenu is open, pressing the left arrow key closes the submenu and puts focus back on the menu item that opened the submenu"),L({},"Tab key closes the menu and moves focus to the next focusable element on the page"),L({},"Esc key closes the menu and moves focus back to the menu trigger"),L({},"Any character key moves focus to the next menu item that starts with that character, if applicable")),B({id:"Base"},"Base"),(0,l.createElement)(i.A,{title:"Menu Base"},(0,l.createElement)(a.A,{demoStyles:"height: 200px;"},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left"}))),B({id:"With-Subheaders"},"With Subheaders"),(0,l.createElement)(d.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"The ",(0,l.createElement)("code",null,'role="group"')," on nested ",(0,l.createElement)("code",null,"<ul>")," elements groups subheadings with their submenu items and the ",(0,l.createElement)("code",null,"aria-labelledby")," attribute on these nested ",(0,l.createElement)("code",null,"<ul>")," elements references the ",(0,l.createElement)("code",null,"id")," of the corresponding subheading. A subheading must have ",(0,l.createElement)("code",null,'role="presentation"')," on the"," ",(0,l.createElement)("code",null,"<li>")," and the content inside the ",(0,l.createElement)("code",null,"<li>")," ","should be in a ",(0,l.createElement)("code",null,"<span>"),".")),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("li",{className:"slds-dropdown__header slds-truncate",title:"Menu Sub Heading",role:"presentation"},(0,l.createElement)("span",null,"Menu Sub Heading"))),(0,l.createElement)(i.A,{title:"Menu with Subheaders"},(0,l.createElement)(a.A,{demoStyles:"height: 300px;"},(0,l.createElement)(w.iK,null))),B({id:"With-Icons"},"With Icons"),X({},"Icons can be included on either the left, right, or both sides of an option."),(0,l.createElement)(d.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"If using one of the icons to indicate selection (e.g. checkmarks), be sure to check out the"," ",(0,l.createElement)("a",{href:"#With-Selectable-Items"},"Menus with Selectable Items")," docs for the Accessibility implications.")),R({id:"Icon-on-the-Left"},"Icon on the Left"),(0,l.createElement)(i.A,{title:"Menu with Icon Left"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.Bu,{hasLeftIcon:!0}))),R({id:"Icon-on-the-Right"},"Icon on the Right"),(0,l.createElement)(i.A,{title:"Menu with Icon Right"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w._l,null))),R({id:"Double-Icon"},"Double Icon"),(0,l.createElement)(d.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"If using one of the icons to indicate selection (e.g. checkmarks), be sure to check out the"," ",(0,l.createElement)("a",{href:"#With-Selectable-Items"},"Menus with Selectable Items")," docs.")),(0,l.createElement)(i.A,{title:"Menu with Double Icon"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.pA,null))),B({id:"With-Selectable-Items"},"With Selectable Items"),X({},"When creating a menu with selectable items:"),Q({},L({},"All selectable items need the proper role, either ",W({},'role="menuitemcheckbox"')," or ",W({},'role="menuitemradio"')),L({},"All selectable items should contain an icon"),L({},"Each icon must have the class ",W({},"slds-icon_selected")," on the ",W({},"<svg>"),Q({},L({},"This hides icons of non-selected items"))),L({},"Items that have been selected need ",W({},'aria-checked="true"')," on the ",W({},"<a>")," element")),(0,l.createElement)(d.A,{type:"a11y",header:"Revealing Icons for Selected Items"},(0,l.createElement)("p",null,"A selected item reveals its icon when the class"," ",(0,l.createElement)("code",null,"slds-is-selected")," is applied to the ",(0,l.createElement)("code",null,"<li>")," and"," ",(0,l.createElement)("code",null,'aria-checked="true"')," is applied to its"," ",(0,l.createElement)("code",null,"menuitemcheckbox")," or ",(0,l.createElement)("code",null,"menuitemradio")," child.")),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("li",{className:"slds-dropdown__item slds-is-selected",role:"presentation"},(0,l.createElement)("a",{role:"menuitemcheckbox","aria-checked":"true"},"..."))),(0,l.createElement)(i.A,{title:"Menu with Selectable Icon Left"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.Bu,{isSelectable:!0}))),B({id:"With-Status-Notifications"},"With Status Notifications"),(0,l.createElement)(a.A,{demoStyles:"height: 250px;"},(0,l.createElement)(w.Co,null)),X({},"To enable menu items to reflect status level notifications like Error, Success and Warning, place a modifier class onto the ",W({},"menuitem")," that has the offending notification."),X({},"The class is based on the ",W({},"slds-has-${level}")," pattern, where ",W({},"${level}")," corresponds to the level you wish to set."),Q({},L({},W({},"slds-has-error")),L({},W({},"slds-has-success")),L({},W({},"slds-has-warning"))),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("a",{className:"slds-has-warning",href:"#",onClick:function(e){return e.preventDefault()},role:"menuitem",tabIndex:"-1"},"...")),(0,l.createElement)(d.A,{type:"note",header:"Warning Icon"},(0,l.createElement)("p",null,"For warning level menu items it is required that you switch the icon to use the ",(0,l.createElement)("code",null,"currentColor")," variant for icons.")),B({id:"With-Overflow-Scrolling"},"With Overflow Scrolling"),(0,l.createElement)(i.A,{title:"Menu with Overflow Scrolling"},(0,l.createElement)(a.A,{demoStyles:"height: 220px;"},(0,l.createElement)(w.XP,{className:"slds-dropdown_left slds-dropdown_length-5"}))),X({},"To force overflow scrolling after either 5, 7, or 10 items, add the modifier ",W({},"slds-dropdown_length-*")," to the ",W({},"<div>")," with class ",W({},"slds-dropdown")," where the ",W({},"*")," is either 5, 7, or 10."),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_length-5"},"...")),R({id:"Scrolling-for-Menu-Items-with-Icons"},"Scrolling for Menu Items with Icons"),X({},"To force overflow scrolling after either 5, 7, or 10 items with icons, add the modifier ",W({},"slds-dropdown_length-with-icon-*")," to the ",W({},"<div>")," with class ",W({},"slds-dropdown")," where the ",W({},"*")," is either 5, 7, or 10."),(0,l.createElement)(a.A,{demoStyles:"height: 250px;"},(0,l.createElement)(w.XP,{isSelectable:!0,isSelected:"true",className:"slds-dropdown_left slds-dropdown_length-with-icon-5"})),B({id:"With-a-Submenu"},"With a Submenu"),X({},"To create a menu with a submenu, add the ",W({},"slds-has-submenu")," class to the list item, ",W({},"<li>"),", that will open the submenu."),(0,l.createElement)(d.A,{type:"a11y",header:"Accessibility Note"},(0,l.createElement)("p",null,"Any menu item that opens a submenu must have ",(0,l.createElement)("code",null,'aria-haspop="true"')," ","on the ",(0,l.createElement)("code",null,"<a>")," within the ",(0,l.createElement)("code",null,"<li>"),". In order to open the submenu, set ",(0,l.createElement)("code",null,"aria-expanded")," to ",(0,l.createElement)("code",null,"true")," on that ",(0,l.createElement)("code",null,"<a>")," when the user clicks or hovers over the list item, or presses enter while focused on the list item. Additionally, the submenu should have ",(0,l.createElement)("code",null,'role="menu"')," and an ",(0,l.createElement)("code",null,"aria-label")," ","attribute whose value matches the name of the ",(0,l.createElement)("code",null,"<li>")," that opened the submenu.")),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("li",{className:"slds-dropdown__item slds-has-submenu",role:"presentation"},(0,l.createElement)("a",{role:"menuitem",href:"#",onClick:function(e){return e.preventDefault()},"aria-haspopup":"true","aria-expanded":"true",tabIndex:"-1"},"..."),(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_submenu slds-dropdown_submenu-left"},(0,l.createElement)("ul",{className:"slds-dropdown__list",role:"menu","aria-label":"Name of Item that Opened this Menu"},"...")))),R({id:"Submenu-to-Right"},"Submenu to Right"),X({},"To open the submenu to the right of the main menu, add ",W({},"slds-dropdown_submenu-right")," to the ",W({},"<div>")," with the ",W({},"slds-dropdown_submenu")," class."),(0,l.createElement)(i.A,{title:"Menu with Submenu Right"},(0,l.createElement)(a.A,{demoStyles:"height: 300px;"},(0,l.createElement)(P,{ariaExpanded:!0,parentIsOpen:!0}))),R({id:"Submenu-to-Left"},"Submenu to Left"),X({},"To open the submenu to the left, add ",W({},"slds-dropdown_submenu-left")," to the ",W({},"<div>")," with the ",W({},"slds-dropdown_submenu")," class."),(0,l.createElement)(i.A,{title:"Menu with Submenu Left"},(0,l.createElement)(a.A,{demoStyles:"height: 300px; margin-left: 150px;"},(0,l.createElement)(P,{ariaExpanded:!0,parentIsOpen:!0,submenuClassnames:"slds-dropdown_submenu-left"}))),B({id:"Overflow-Menu-with-Actions"},"Overflow Menu with Actions"),X({},"For an overflow of action items, use the overflow menu with actions styling by adding the modifier ",W({},"slds-dropdown_actions")," to the ",W({},"div")," with class ",W({},"slds-dropdown"),". This pattern is typically used in conjunction with a button group."),(0,l.createElement)(i.A,{title:"Menu with Action Overflow"},(0,l.createElement)(a.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.hu,{isOpen:!0}))),B({id:"Positioning"},"Positioning"),X({},"There are 3 options for the positioning of the menu dropdown -- left, right, and bottom. To access these options, add a modifier to the ",W({},"<div>")," with class name ",W({},"slds-dropdown"),". For the standard positioning where the dropdown aligns with the left side of the dropdown trigger, use ",W({},"slds-dropdown_left"),", as seen above."),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_left"},"...")),R({id:"Positioned-Right"},"Positioned Right"),X({},"To position the dropdown to align with the right of the dropdown trigger, use ",W({},"slds-dropdown_right"),"."),(0,l.createElement)(i.A,{title:"Menu Positioned Right"},(0,l.createElement)(a.A,{demoStyles:"height: 200px; margin-left: 90px;"},(0,l.createElement)(w.Vf,{className:"slds-dropdown_right"}))),R({id:"Positioned-Bottom"},"Positioned Bottom"),X({},"To position the dropdown to sit on top of the dropdown trigger, use ",W({},"slds-dropdown_bottom"),"."),(0,l.createElement)(i.A,{title:"Menu Positioned Bottom"},(0,l.createElement)(a.A,{demoStyles:"margin-left: 45px; margin-top: 163px;"},(0,l.createElement)(w.Vf,{className:"slds-dropdown_bottom"}))),B({id:"Width"},"Width"),X({},"To adjust the width of the menu dropdown add modifier ",W({},"slds-dropdown_*")," to the ",W({},"<div>")," with class ",W({},"slds-dropdown")," where the ",W({},"*")," is ",W({},"xx-small"),", ",W({},"x-small"),", ",W({},"small"),", ",W({},"medium"),", or ",W({},"large"),"."),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_left slds-dropdown_medium"},"...")),V({},q({},$({},K({},"Modifier"),K({},"Example"))),H({},$({},J({},W({},".slds-dropdown_xx-small")," ",(0,l.createElement)("br",null)," 6rem / 96px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_xx-small"})))),$({},J({},W({},".slds-dropdown_x-small")," ",(0,l.createElement)("br",null)," 12rem / 192px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_x-small"})))),$({},J({},W({},".slds-dropdown_small")," ",(0,l.createElement)("br",null)," 15rem / 240px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_small"})))),$({},J({},W({},".slds-dropdown_medium")," ",(0,l.createElement)("br",null)," 20rem / 320px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_medium"})))),$({},J({},W({},".slds-dropdown_large")," ",(0,l.createElement)("br",null)," 25rem / 400px"),J({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_large"})))))),B({id:"Height"},"Height"),X({},"To adjust the length of visible menu dropdown items before overflow scrolling activates, add modifier ",W({},"slds-dropdown_length-*"),", or when using icons, ",W({},"slds-dropdown_length-with-icon-*"),", where the ",W({},"*")," is ",W({},"5"),", ",W({},"7"),", ",W({},"10"),". Apply the height classes to both the ",W({},"<div>"),"s with class ",W({},"slds-dropdown")," and ",W({},"slds-dropdown__list")),(0,l.createElement)(o.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_left slds-dropdown_length-7"},(0,l.createElement)("ul",{class:"slds-dropdown__list slds-dropdown_length-7"},"..."))),V({},q({},$({},K({},"Modifier"),K({},"Example"))),H({},$({},J({},W({},".slds-dropdown_length-5")," ",(0,l.createElement)("br",null)," 5 items"),J({},(0,l.createElement)("div",{style:{height:"16rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-5")})))),$({},J({},W({},".slds-dropdown_length-7")," ",(0,l.createElement)("br",null)," 7 items"),J({},(0,l.createElement)("div",{style:{height:"21rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-7")})))),$({},J({},W({},".slds-dropdown_length-10")," ",(0,l.createElement)("br",null)," 10 items"),J({},(0,l.createElement)("div",{style:{height:"26rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-10")})))),$({},J({},W({},".slds-dropdown_length-with-icon-5")," ",(0,l.createElement)("br",null)," 5 items"),J({},(0,l.createElement)("div",{style:{height:"16rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-5-icon")})))),$({},J({},W({},".slds-dropdown_length-with-icon-7")," ",(0,l.createElement)("br",null)," 7 items"),J({},(0,l.createElement)("div",{style:{height:"21rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-7-icon")})))),$({},J({},W({},".slds-dropdown_length-with-icon-10")," ",(0,l.createElement)("br",null)," 10 items"),J({},(0,l.createElement)("div",{style:{height:"28rem",width:"320px"}},(0,l.createElement)(b,{fragmentChildren:(0,C.NO)(A,"dropdown-menu-length-10-icon")})))))))},G=function(){return(0,r.Qr)(z())}},5206:function(e){e.exports=ReactDOM}},s={};function r(e){var t=s[e];if(void 0!==t)return t.exports;var n=s[e]={id:e,exports:{}};return l[e](n,n.exports,r),n.exports}r.m=l,r.amdO={},e=[],r.O=function(t,n,l,s){if(!n){var a=1/0;for(c=0;c<e.length;c++){n=e[c][0],l=e[c][1],s=e[c][2];for(var o=!0,i=0;i<n.length;i++)(!1&s||a>=s)&&Object.keys(r.O).every(function(e){return r.O[e](n[i])})?n.splice(i--,1):(o=!1,s<a&&(a=s));if(o){e.splice(c--,1);var d=l();void 0!==d&&(t=d)}}return t}s=s||0;for(var c=e.length;c>0&&e[c-1][2]>s;c--)e[c]=e[c-1];e[c]=[n,l,s]},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},r.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var s=Object.create(null);r.r(s);var a={};t=t||[null,n({}),n([]),n(n)];for(var o=2&l&&e;("object"==typeof o||"function"==typeof o)&&!~t.indexOf(o);o=n(o))Object.getOwnPropertyNames(o).forEach(function(t){a[t]=function(){return e[t]}});return a.default=function(){return e},r.d(s,a),s},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.e=function(){return Promise.resolve()},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.j=9421,function(){var e={9421:0};r.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,s,a=n[0],o=n[1],i=n[2],d=0;if(a.some(function(t){return 0!==e[t]})){for(l in o)r.o(o,l)&&(r.m[l]=o[l]);if(i)var c=i(r)}for(t&&t(n);d<a.length;d++)s=a[d],r.o(e,s)&&e[s]&&e[s][0](),e[s]=0;return r.O(c)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),r.nc=void 0;var a=r.O(void 0,[3540],function(){return r(3504)});a=r.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/menus/docs.mdx.js"]=a}();