@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 Z},getElement:function(){return Y}});var l=n(1594),r=n.n(l),s=n(5671),o=n(6547),a=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 f(e,t){return f=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},f(e,t)}function E(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(E=function(){return!!e})()}function b(e){return b=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},b(e)}var g=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=b(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||[],b(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&&f(e,t)}(t,e),n=t,(s=[{key:"render",value:function(){return r().createElement(l.Fragment,null,this.props.fragmentChildren)}}])&&h(n.prototype,s),Object.defineProperty(n,"prototype",{writable:!1}),n;var n,s}(r().Component);g.propTypes={fragmentChildren:m().node.isRequired};var w=n(4760),y=n(8347),_=function(e){return r().createElement("div",{className:"demo-only",style:{height:"260px"}},r().createElement(w.l9,{isOpen:!0},r().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},r().createElement(w.cO,{className:"slds-dropdown_length-5"},r().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),r().createElement(w.Dr,null,"Menu Item Two"),r().createElement(w.Dr,null,"Menu Item Three"),r().createElement(w.Dr,null,"Menu Item Four"),r().createElement(w.Dr,null,"Menu Item Five"),r().createElement(w.Dr,null,"Menu Item Six"),r().createElement(w.Dr,null,"Menu Item Seven"),r().createElement(w.Dr,null,"Menu Item Eight"),r().createElement(w.Dr,null,"Menu Item Nine"),r().createElement(w.Dr,null,"Menu Item Ten")))))},v=function(e){return r().createElement("div",{className:"demo-only",style:{height:"300px"}},r().createElement(w.l9,{isOpen:!0},r().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},r().createElement(w.cO,{className:"slds-dropdown_length-7"},r().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),r().createElement(w.Dr,null,"Menu Item Two"),r().createElement(w.Dr,null,"Menu Item Three"),r().createElement(w.Dr,null,"Menu Item Four"),r().createElement(w.Dr,null,"Menu Item Five"),r().createElement(w.Dr,null,"Menu Item Six"),r().createElement(w.Dr,null,"Menu Item Seven"),r().createElement(w.Dr,null,"Menu Item Eight"),r().createElement(w.Dr,null,"Menu Item Nine"),r().createElement(w.Dr,null,"Menu Item Ten")))))},I=function(e){return r().createElement("div",{className:"demo-only",style:{height:"430px"}},r().createElement(w.l9,{isOpen:!0},r().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},r().createElement(w.cO,{className:"slds-dropdown_length-10"},r().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),r().createElement(w.Dr,null,"Menu Item Two"),r().createElement(w.Dr,null,"Menu Item Three"),r().createElement(w.Dr,null,"Menu Item Four"),r().createElement(w.Dr,null,"Menu Item Five"),r().createElement(w.Dr,null,"Menu Item Six"),r().createElement(w.Dr,null,"Menu Item Seven"),r().createElement(w.Dr,null,"Menu Item Eight"),r().createElement(w.Dr,null,"Menu Item Nine"),r().createElement(w.Dr,null,"Menu Item Ten")))))},x=function(e){return r().createElement("div",{className:"demo-only",style:{height:"260px"}},r().createElement(w.l9,{isOpen:!0},r().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},r().createElement(w.cO,{className:"slds-dropdown_length-with-icon-5"},r().createElement(w.Dr,{tabIndex:"0"},r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},O=function(e){return r().createElement("div",{className:"demo-only",style:{height:"320px"}},r().createElement(w.l9,{isOpen:!0},r().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},r().createElement(w.cO,{className:"slds-dropdown_length-with-icon-7"},r().createElement(w.Dr,{tabIndex:"0"},r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),r().createElement(w.Dr,null,r().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 r().createElement("div",{className:"demo-only",style:{height:"450px"}},r().createElement(w.l9,{isOpen:!0},r().createElement(w.W1,{className:"slds-dropdown_left slds-dropdown_small"},r().createElement(w.cO,{className:"slds-dropdown_length-with-icon-10"},r().createElement(w.Dr,{tabIndex:"0"},r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item One"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Two"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Three"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Four"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Five"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-account slds-m-right_small",sprite:"standard",symbol:"account"}),"Menu Item Six"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-approval slds-m-right_small",sprite:"standard",symbol:"approval"}),"Menu Item Seven"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-lead slds-m-right_small",sprite:"standard",symbol:"lead"}),"Menu Item Eight"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-opportunity slds-m-right_small",sprite:"standard",symbol:"opportunity"}),"Menu Item Nine"),r().createElement(w.Dr,null,r().createElement(y.A,{className:"slds-icon slds-icon_small slds-icon-standard-product slds-m-right_small",sprite:"standard",symbol:"product"}),"Menu Item Ten")))))},S=[{id:"dropdown-menu-length-5",label:"5 items",element:r().createElement(_,null)},{id:"dropdown-menu-length-7",label:"7 items",element:r().createElement(v,null)},{id:"dropdown-menu-length-10",label:"10 items",element:r().createElement(I,null)},{id:"dropdown-menu-length-5-icon",label:"5 items with icon",element:r().createElement(x,null)},{id:"dropdown-menu-length-7-icon",label:"7 items with icon",element:r().createElement(O,null)},{id:"dropdown-menu-length-10-icon",label:"10 items with icon",element:r().createElement(N,null)}],M=n(942),A=n.n(M);function D(e){return D="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},D(e)}var T=["ariaExpanded","className","children","iconRight","itemName","tabIndex","title","submenuClassnames"];function j(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,l)}return n}function k(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?j(Object(n),!0).forEach(function(t){P(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function P(e,t,n){return(t=function(e){var t=function(e){if("object"!=D(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=D(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==D(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var C=r().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"}),W=function(e){var t=e.ariaExpanded,n=e.className,l=(e.children,e.iconRight),s=e.itemName,o=e.tabIndex,a=e.title,i=e.submenuClassnames,d=function(e,t){if(null==e)return{};var n,l,r=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 s=Object.getOwnPropertySymbols(e);for(l=0;l<s.length;l++)n=s[l],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(e,T);return r().createElement("li",k(k({},d),{},{className:A()("slds-dropdown__item slds-has-submenu",n),role:"presentation"}),r().createElement("a",{role:"menuitem",href:"#","aria-haspopup":"true","aria-expanded":t,tabIndex:o||"-1",onClick:function(e){return e.preventDefault()}},r().createElement("span",{className:"slds-truncate",title:a||s},e.itemName),l||null),r().createElement(w.W1,{className:A()("slds-dropdown_submenu",i)},r().createElement(w.cO,{ariaLabel:s},r().createElement(w.Dr,{tabIndex:"0"},"Submenu Item One"),r().createElement(w.Dr,null,"Submenu Item Two"),r().createElement(w.Dr,null,"Submenu Item Three"),r().createElement("li",{className:"slds-has-divider_top-space",role:"separator"}),r().createElement(w.Dr,null,"Submenu Item Four"))))},B=function(e){var t=e.ariaExpanded,n=e.parentIsOpen,l=e.submenuClassnames;return r().createElement(w.l9,{isOpen:n},r().createElement(w.W1,{className:"slds-dropdown_left"},r().createElement(w.cO,{ariaLabel:"Show More"},r().createElement(w.Dr,{tabIndex:"0"},"Menu Item One"),r().createElement(w.Dr,null,"Menu Item Two"),r().createElement(W,{ariaExpanded:t,iconRight:C,itemName:"Menu Item Three",submenuClassnames:l||"slds-dropdown_submenu-right"}))))},R=(n(769),n(806)),F=s.XB.code,L=s.XB.h2,X=s.XB.h3,V=s.XB.h4,H=s.XB.li,J=s.XB.p,K=s.XB.table,q=s.XB.tbody,$=s.XB.td,Q=s.XB.th,z=s.XB.thead,G=s.XB.tr,U=s.XB.ul,Y=function(){return(0,l.createElement)(s.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)(o.A,{exampleOnly:!0,demoStyles:"height: 150px;"},(0,l.createElement)(w.Bu,{hasLeftIcon:!0})),L({id:"About-Menu"},"About Menu"),J({},"The unordered menu list ",F({},"<ul>")," with ",F({},'role="menu"')," should be contained in a ",F({},"<div>")," with the class ",F({},".slds-dropdown"),"."),J({},"The target HTML element and dropdown need to be wrapped in the class ",F({},".slds-dropdown-trigger dropdown-trigger_click"),"."),X({id:"Accessibility"},"Accessibility"),V({id:"Markup"},"Markup"),U({},H({},"The menu trigger is a focusable element (",F({},"<a>")," or ",F({},"<button>"),") with ",F({},'aria-haspopup="true"')),H({},"The menu trigger has the ",F({},"aria-expanded")," attribute applied and the value is set to ",F({},'"true"')," or ",F({},'"false"')," depending on if the menu is open or not."),H({},"The menu has ",F({},'role="menu"')," and an ",F({},"aria-label")," attribute whose value is the name of the menu trigger"),H({},"The menu items have ",F({},'role="menuitem"'),", ",F({},'role="menuitemcheckbox"'),", or ",F({},'role="menuitemradio"'),", depending on the selection options")),V({id:"Keyboard-Interactions"},"Keyboard Interactions"),J({},"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."),U({},H({},"Arrow keys cycle focus through menu items (including disabled menu items)"),H({},"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"),H({},"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"),H({},"Tab key closes the menu and moves focus to the next focusable element on the page"),H({},"Esc key closes the menu and moves focus back to the menu trigger"),H({},"Any character key moves focus to the next menu item that starts with that character, if applicable")),L({id:"Base"},"Base"),(0,l.createElement)(i.A,{title:"Menu Base"},(0,l.createElement)(o.A,{demoStyles:"height: 200px;"},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left"}))),L({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)(a.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)(o.A,{demoStyles:"height: 300px;"},(0,l.createElement)(w.iK,null))),L({id:"With-Icons"},"With Icons"),J({},"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.")),X({id:"Icon-on-the-Left"},"Icon on the Left"),(0,l.createElement)(i.A,{title:"Menu with Icon Left"},(0,l.createElement)(o.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.Bu,{hasLeftIcon:!0}))),X({id:"Icon-on-the-Right"},"Icon on the Right"),(0,l.createElement)(i.A,{title:"Menu with Icon Right"},(0,l.createElement)(o.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w._l,null))),X({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)(o.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.pA,null))),L({id:"With-Selectable-Items"},"With Selectable Items"),J({},"When creating a menu with selectable items:"),U({},H({},"All selectable items need the proper role, either ",F({},'role="menuitemcheckbox"')," or ",F({},'role="menuitemradio"')),H({},"All selectable items should contain an icon"),H({},"Each icon must have the class ",F({},"slds-icon_selected")," on the ",F({},"<svg>"),U({},H({},"This hides icons of non-selected items"))),H({},"Items that have been selected need ",F({},'aria-checked="true"')," on the ",F({},"<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)(a.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)(o.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.Bu,{isSelectable:!0}))),L({id:"With-Status-Notifications"},"With Status Notifications"),(0,l.createElement)(o.A,{demoStyles:"height: 250px;"},(0,l.createElement)(w.Co,null)),J({},"To enable menu items to reflect status level notifications like Error, Success and Warning, place a modifier class onto the ",F({},"menuitem")," that has the offending notification."),J({},"The class is based on the ",F({},"slds-has-${level}")," pattern, where ",F({},"${level}")," corresponds to the level you wish to set."),U({},H({},F({},"slds-has-error")),H({},F({},"slds-has-success")),H({},F({},"slds-has-warning"))),(0,l.createElement)(a.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.")),L({id:"With-Overflow-Scrolling"},"With Overflow Scrolling"),(0,l.createElement)(i.A,{title:"Menu with Overflow Scrolling"},(0,l.createElement)(o.A,{demoStyles:"height: 220px;"},(0,l.createElement)(w.XP,{className:"slds-dropdown_left slds-dropdown_length-5"}))),J({},"To force overflow scrolling after either 5, 7, or 10 items, add the modifier ",F({},"slds-dropdown_length-*")," to the ",F({},"<div>")," with class ",F({},"slds-dropdown")," where the ",F({},"*")," is either 5, 7, or 10."),(0,l.createElement)(a.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_length-5"},"...")),X({id:"Scrolling-for-Menu-Items-with-Icons"},"Scrolling for Menu Items with Icons"),J({},"To force overflow scrolling after either 5, 7, or 10 items with icons, add the modifier ",F({},"slds-dropdown_length-with-icon-*")," to the ",F({},"<div>")," with class ",F({},"slds-dropdown")," where the ",F({},"*")," is either 5, 7, or 10."),(0,l.createElement)(o.A,{demoStyles:"height: 250px;"},(0,l.createElement)(w.XP,{isSelectable:!0,isSelected:"true",className:"slds-dropdown_left slds-dropdown_length-with-icon-5"})),L({id:"With-a-Submenu"},"With a Submenu"),J({},"To create a menu with a submenu, add the ",F({},"slds-has-submenu")," class to the list item, ",F({},"<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)(a.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"},"...")))),X({id:"Submenu-to-Right"},"Submenu to Right"),J({},"To open the submenu to the right of the main menu, add ",F({},"slds-dropdown_submenu-right")," to the ",F({},"<div>")," with the ",F({},"slds-dropdown_submenu")," class."),(0,l.createElement)(i.A,{title:"Menu with Submenu Right"},(0,l.createElement)(o.A,{demoStyles:"height: 300px;"},(0,l.createElement)(B,{ariaExpanded:!0,parentIsOpen:!0}))),X({id:"Submenu-to-Left"},"Submenu to Left"),J({},"To open the submenu to the left, add ",F({},"slds-dropdown_submenu-left")," to the ",F({},"<div>")," with the ",F({},"slds-dropdown_submenu")," class."),(0,l.createElement)(i.A,{title:"Menu with Submenu Left"},(0,l.createElement)(o.A,{demoStyles:"height: 300px; margin-left: 150px;"},(0,l.createElement)(B,{ariaExpanded:!0,parentIsOpen:!0,submenuClassnames:"slds-dropdown_submenu-left"}))),L({id:"Overflow-Menu-with-Actions"},"Overflow Menu with Actions"),J({},"For an overflow of action items, use the overflow menu with actions styling by adding the modifier ",F({},"slds-dropdown_actions")," to the ",F({},"div")," with class ",F({},"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)(o.A,{demoStyles:"height: 150px;"},(0,l.createElement)(w.hu,{isOpen:!0}))),L({id:"Positioning"},"Positioning"),J({},"There are 3 options for the positioning of the menu dropdown -- left, right, and bottom. To access these options, add a modifier to the ",F({},"<div>")," with class name ",F({},"slds-dropdown"),". For the standard positioning where the dropdown aligns with the left side of the dropdown trigger, use ",F({},"slds-dropdown_left"),", as seen above."),(0,l.createElement)(a.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_left"},"...")),X({id:"Positioned-Right"},"Positioned Right"),J({},"To position the dropdown to align with the right of the dropdown trigger, use ",F({},"slds-dropdown_right"),"."),(0,l.createElement)(i.A,{title:"Menu Positioned Right"},(0,l.createElement)(o.A,{demoStyles:"height: 200px; margin-left: 90px;"},(0,l.createElement)(w.Vf,{className:"slds-dropdown_right"}))),X({id:"Positioned-Bottom"},"Positioned Bottom"),J({},"To position the dropdown to sit on top of the dropdown trigger, use ",F({},"slds-dropdown_bottom"),"."),(0,l.createElement)(i.A,{title:"Menu Positioned Bottom"},(0,l.createElement)(o.A,{demoStyles:"margin-left: 45px; margin-top: 163px;"},(0,l.createElement)(w.Vf,{className:"slds-dropdown_bottom"}))),L({id:"Width"},"Width"),J({},"To adjust the width of the menu dropdown add modifier ",F({},"slds-dropdown_*")," to the ",F({},"<div>")," with class ",F({},"slds-dropdown")," where the ",F({},"*")," is ",F({},"xx-small"),", ",F({},"x-small"),", ",F({},"small"),", ",F({},"medium"),", or ",F({},"large"),"."),(0,l.createElement)(a.A,{toggleCode:!1},(0,l.createElement)("div",{className:"slds-dropdown slds-dropdown_left slds-dropdown_medium"},"...")),K({},z({},G({},Q({},"Modifier"),Q({},"Example"))),q({},G({},$({},F({},".slds-dropdown_xx-small")," ",(0,l.createElement)("br",null)," 6rem / 96px"),$({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_xx-small"})))),G({},$({},F({},".slds-dropdown_x-small")," ",(0,l.createElement)("br",null)," 12rem / 192px"),$({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_x-small"})))),G({},$({},F({},".slds-dropdown_small")," ",(0,l.createElement)("br",null)," 15rem / 240px"),$({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_small"})))),G({},$({},F({},".slds-dropdown_medium")," ",(0,l.createElement)("br",null)," 20rem / 320px"),$({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_medium"})))),G({},$({},F({},".slds-dropdown_large")," ",(0,l.createElement)("br",null)," 25rem / 400px"),$({},(0,l.createElement)("div",{style:{height:"200px",width:"320px"}},(0,l.createElement)(w.Vf,{className:"slds-dropdown_left slds-dropdown_large"})))))),L({id:"Height"},"Height"),J({},"To adjust the length of visible menu dropdown items before overflow scrolling activates, add modifier ",F({},"slds-dropdown_length-*"),", or when using icons, ",F({},"slds-dropdown_length-with-icon-*"),", where the ",F({},"*")," is ",F({},"5"),", ",F({},"7"),", ",F({},"10"),". Apply the height classes to both the ",F({},"<div>"),"s with class ",F({},"slds-dropdown")," and ",F({},"slds-dropdown__list")),(0,l.createElement)(a.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"},"..."))),K({},z({},G({},Q({},"Modifier"),Q({},"Example"))),q({},G({},$({},F({},".slds-dropdown_length-5")," ",(0,l.createElement)("br",null)," 5 items"),$({},(0,l.createElement)("div",{style:{height:"16rem",width:"320px"}},(0,l.createElement)(g,{fragmentChildren:(0,R.NO)(S,"dropdown-menu-length-5")})))),G({},$({},F({},".slds-dropdown_length-7")," ",(0,l.createElement)("br",null)," 7 items"),$({},(0,l.createElement)("div",{style:{height:"21rem",width:"320px"}},(0,l.createElement)(g,{fragmentChildren:(0,R.NO)(S,"dropdown-menu-length-7")})))),G({},$({},F({},".slds-dropdown_length-10")," ",(0,l.createElement)("br",null)," 10 items"),$({},(0,l.createElement)("div",{style:{height:"26rem",width:"320px"}},(0,l.createElement)(g,{fragmentChildren:(0,R.NO)(S,"dropdown-menu-length-10")})))),G({},$({},F({},".slds-dropdown_length-with-icon-5")," ",(0,l.createElement)("br",null)," 5 items"),$({},(0,l.createElement)("div",{style:{height:"16rem",width:"320px"}},(0,l.createElement)(g,{fragmentChildren:(0,R.NO)(S,"dropdown-menu-length-5-icon")})))),G({},$({},F({},".slds-dropdown_length-with-icon-7")," ",(0,l.createElement)("br",null)," 7 items"),$({},(0,l.createElement)("div",{style:{height:"21rem",width:"320px"}},(0,l.createElement)(g,{fragmentChildren:(0,R.NO)(S,"dropdown-menu-length-7-icon")})))),G({},$({},F({},".slds-dropdown_length-with-icon-10")," ",(0,l.createElement)("br",null)," 10 items"),$({},(0,l.createElement)("div",{style:{height:"28rem",width:"320px"}},(0,l.createElement)(g,{fragmentChildren:(0,R.NO)(S,"dropdown-menu-length-10-icon")})))))))},Z=function(){return(0,s.Qr)(Y())}},5206:function(e){e.exports=ReactDOM}},r={};function s(e){var t=r[e];if(void 0!==t)return t.exports;var n=r[e]={id:e,exports:{}};return l[e](n,n.exports,s),n.exports}s.m=l,s.amdO={},e=[],s.O=function(t,n,l,r){if(!n){var o=1/0;for(c=0;c<e.length;c++){n=e[c][0],l=e[c][1],r=e[c][2];for(var a=!0,i=0;i<n.length;i++)(!1&r||o>=r)&&Object.keys(s.O).every(function(e){return s.O[e](n[i])})?n.splice(i--,1):(a=!1,r<o&&(o=r));if(a){e.splice(c--,1);var d=l();void 0!==d&&(t=d)}}return t}r=r||0;for(var c=e.length;c>0&&e[c-1][2]>r;c--)e[c]=e[c-1];e[c]=[n,l,r]},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},s.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 r=Object.create(null);s.r(r);var o={};t=t||[null,n({}),n([]),n(n)];for(var a=2&l&&e;("object"==typeof a||"function"==typeof a)&&!~t.indexOf(a);a=n(a))Object.getOwnPropertyNames(a).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},s.d(r,o),r},s.d=function(e,t){for(var n in t)s.o(t,n)&&!s.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},s.e=function(){return Promise.resolve()},s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.j=9421,function(){var e={9421:0};s.O.j=function(t){return 0===e[t]};var t=function(t,n){var l,r,o=n[0],a=n[1],i=n[2],d=0;if(o.some(function(t){return 0!==e[t]})){for(l in a)s.o(a,l)&&(s.m[l]=a[l]);if(i)var c=i(s)}for(t&&t(n);d<o.length;d++)r=o[d],s.o(e,r)&&e[r]&&e[r][0](),e[r]=0;return s.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))}(),s.nc=void 0;var o=s.O(void 0,[3540],function(){return s(3504)});o=s.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/menus/docs.mdx.js"]=o}();