Fluffybuns the Destroyer

Simon the pensive `})}),` `,(0,n.jsx)(e.h3,{id:"adding-icons-and-commands",children:"Adding icons and commands"}),` `,(0,n.jsxs)(e.p,{children:["You can add icon to each ",(0,n.jsx)(e.code,{children:"MenuItem"})," by passing the ",(0,n.jsx)(e.code,{children:"icon"}),` prop. To add a commands (or hotkeys) to menu items, you can use the `,(0,n.jsx)(e.code,{children:"command"})," prop."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` } variant='outline' /> } command='\u2318T'> New Tab } command='\u2318N'> New Window } command='\u2318\u21E7N'> Open Closed Tab } command='\u2318O'> Open File... `})}),` `,(0,n.jsx)(e.h3,{id:"lazily-mounting-menuitem",children:"Lazily mounting MenuItem"}),` `,(0,n.jsxs)(e.p,{children:["By default, the ",(0,n.jsx)(e.code,{children:"Menu"})," component renders all children of ",(0,n.jsx)(e.code,{children:"MenuList"}),` to the DOM, meaning that invisible menu items are still rendered but are hidden by styles.`]}),` `,(0,n.jsxs)(e.p,{children:["If you want to defer rendering of each children of ",(0,n.jsx)(e.code,{children:"MenuList"}),` until that menu is open, you can use the `,(0,n.jsx)(e.code,{children:"isLazy"})," prop. This is useful if your ",(0,n.jsx)(e.code,{children:"Menu"}),` needs to be extra performant, or make network calls on mount that should only happen when the component is displayed.`]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Open menu {/* MenuItems are not rendered unless Menu is open */} New Window Open Closed Tab Open File `})}),` `,(0,n.jsx)(e.h3,{id:"rendering-menu-in-a-portal",children:"Rendering menu in a portal"}),` `,(0,n.jsxs)(e.p,{children:["To render menus in a portal, import the ",(0,n.jsx)(e.code,{children:"Portal"}),` component and wrap the `,(0,n.jsx)(e.code,{children:"MenuList"})," within the ",(0,n.jsx)(e.code,{children:"Portal"}),"."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Open menu Menu 1 New Window Open Closed Tab Open File `})}),` `,(0,n.jsx)(e.h3,{id:"menugroup",children:"MenuGroup"}),` `,(0,n.jsxs)(e.p,{children:["To group related ",(0,n.jsx)(e.code,{children:"MenuItem"}),"s, use the ",(0,n.jsx)(e.code,{children:"MenuGroup"}),` component and pass it a `,(0,n.jsx)(e.code,{children:"title"})," for the group name."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` Profile My Account Payments Docs FAQ `})}),` `,(0,n.jsx)(e.h2,{id:"menu-option-groups",children:"Menu option groups"}),` `,(0,n.jsxs)(e.p,{children:[`You can compose a menu for table headers to help with sorting and filtering options. Use the `,(0,n.jsx)(e.code,{children:"MenuOptionGroup"})," and ",(0,n.jsx)(e.code,{children:"MenuItemOption"})," components."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` MenuItem Ascending Descending Email Phone Country `})}),` `,(0,n.jsx)(e.h2,{id:"accessibility",children:"Accessibility"}),` `,(0,n.jsx)(e.h3,{id:"keyboard-interaction",children:"Keyboard Interaction"}),` `,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Key"}),(0,n.jsx)(e.th,{children:"Action"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:"Enter"})," or ",(0,n.jsx)(e.code,{children:"Space"})]}),(0,n.jsxs)(e.td,{children:["When ",(0,n.jsx)(e.code,{children:"MenuButton"})," receives focus, opens the menu and places focus on the first menu item."]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"ArrowDown"})}),(0,n.jsxs)(e.td,{children:["When ",(0,n.jsx)(e.code,{children:"MenuButton"})," receives focus, opens the menu and moves focus to the first menu item."]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"ArrowUp"})}),(0,n.jsxs)(e.td,{children:["When ",(0,n.jsx)(e.code,{children:"MenuButton"})," receives focus, opens the menu and moves focus to the last menu item."]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"Escape"})}),(0,n.jsxs)(e.td,{children:["When the menu is open, closes the menu and sets focus to the ",(0,n.jsx)(e.code,{children:"MenuButton"}),"."]})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"Tab"})}),(0,n.jsx)(e.td,{children:"no effect"})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"Home"})}),(0,n.jsx)(e.td,{children:"When the menu is open, moves focus to the first item."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:(0,n.jsx)(e.code,{children:"End"})}),(0,n.jsx)(e.td,{children:"When the menu is open, moves focus to the last item."})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsxs)(e.td,{children:[(0,n.jsx)(e.code,{children:"A-Z"})," or ",(0,n.jsx)(e.code,{children:"a-z"})]}),(0,n.jsx)(e.td,{children:"When the menu is open, moves focus to the next menu item with a label that starts with the typed character if such an menu item exists."})]})]})]}),` `,(0,n.jsx)(e.h3,{id:"aria-roles",children:"ARIA roles"}),` `,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:["For ",(0,n.jsx)(e.code,{children:"MenuButton"}),":"]})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"role"})," is set to ",(0,n.jsx)(e.code,{children:"button"}),"."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"aria-haspopup"})," is set to ",(0,n.jsx)(e.code,{children:"menu"}),"."]}),` `,(0,n.jsxs)(e.li,{children:["When the menu is displayed, ",(0,n.jsx)(e.code,{children:"aria-expanded"})," is set to ",(0,n.jsx)(e.code,{children:"true"}),"."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"aria-controls"})," is set to the ",(0,n.jsx)(e.code,{children:"id"})," of the ",(0,n.jsx)(e.code,{children:"MenuList"}),"."]}),` `]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:["For ",(0,n.jsx)(e.code,{children:"MenuList"}),":"]})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"role"})," is set to ",(0,n.jsx)(e.code,{children:"menu"}),"."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"aria-orientation"})," is set to ",(0,n.jsx)(e.code,{children:"vertical"}),"."]}),` `]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsxs)(e.strong,{children:["For ",(0,n.jsx)(e.code,{children:"MenuItem"}),":"]})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"role"})," is set to ",(0,n.jsx)(e.code,{children:"menuitem"}),"."]}),` `,(0,n.jsxs)(e.li,{children:["Gets one of these roles ",(0,n.jsx)(e.code,{children:"menuitem"}),"/",(0,n.jsx)(e.code,{children:"menuitemradio"}),"/ ",(0,n.jsx)(e.code,{children:"menuitemcheckbox"}),"."]}),` `]})]})}function w(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,Object.assign({},t,{children:(0,n.jsx)(h,t)})):h(t)}var O=w;return y(x);})(); ;return Component;

Menu

Menu Props#

autoSelect

boundary

closeOnBlur

closeOnSelect

colorScheme

computePositionOnMount

defaultIsOpen

direction

eventListeners

flip

gutter

id

isLazy

isOpen

lazyBehavior

matchWidth

modifiers

offset

onClose

onOpen

placement

preventOverflow

size

strategy

variant

MenuButton Props#

MenuList Props#

motionProps

rootProps

MenuItem Props#

closeOnSelect

command

commandSpacing

icon

iconSpacing

isDisabled

isFocusable

MenuGroup Props#

MenuOptionGroup Props#

defaultValue

onChange

type

value

MenuItemOption Props#

closeOnSelect

command

commandSpacing

icon

iconSpacing

isChecked

isDisabled

isFocusable

type

value

`autoSelect`

`boundary`

`closeOnBlur`

`closeOnSelect`

`colorScheme`

`computePositionOnMount`

`defaultIsOpen`

`direction`

`eventListeners`

`flip`

`gutter`

`id`

`isLazy`

`isOpen`

`lazyBehavior`

`matchWidth`

`modifiers`

`offset`

`onClose`

`onOpen`

`placement`

`preventOverflow`

`size`

`strategy`

`variant`

`motionProps`

`rootProps`

`closeOnSelect`

`command`

`commandSpacing`

`icon`

`iconSpacing`

`isDisabled`

`isFocusable`

`defaultValue`

`onChange`

`type`

`value`

`closeOnSelect`

`command`

`commandSpacing`

`icon`

`iconSpacing`

`isChecked`

`isDisabled`

`isFocusable`

`type`

`value`