Support orientation property in Menubar

apps/storybook/stories/menubar.stories.module.css

@@ -4,6 +4,11 @@
   padding: 2px;
 }
 
+.rootVertical {
+  display: flex;
+  flex-direction: column;
+}
+
 .trigger {
   padding: 6px 16px;
   border: 0;

apps/storybook/stories/menubar.stories.tsx

@@ -10,7 +10,10 @@ export default { title: 'Components/Menubar' };
 export const Styled = () => {
   const [loop, setLoop] = React.useState(false);
   const [rtl, setRtl] = React.useState(false);
+  const [vertical, setVertical] = React.useState(false);
   const dir = rtl ? 'rtl' : 'ltr';
+  const orientation = vertical ? 'vertical' : 'horizontal';
+  const menubarContentSide = vertical ? 'right' : 'bottom';
   const checkOptions = [
     'Always Show Bookmarks Bar',
     'Always Show Toolbar in Fullscreen',
@@ -49,14 +52,24 @@ export const Styled = () => {
           />
           Loop
         </label>
+
+        <label>
+          <input
+            type="checkbox"
+            checked={vertical}
+            onChange={(event) => setVertical(event.currentTarget.checked)}
+          />
+          Vertical
+        </label>
       </div>
 
       <div dir={dir}>
-        <Menubar.Root className={styles.root} loop={loop} dir={dir}>
+        <Menubar.Root className={`${styles.root} ${orientation === 'vertical' ? styles.rootVertical : ''}`}
+          loop={loop} dir={dir} orientation={orientation}>
           <Menubar.Menu>
             <Menubar.Trigger className={styles.trigger}>File</Menubar.Trigger>
             <Menubar.Portal>
-              <Menubar.Content className={styles.content} sideOffset={2}>
+              <Menubar.Content className={styles.content} sideOffset={2} side={menubarContentSide}>
                 <Menubar.Item className={styles.item}>New Tab</Menubar.Item>
                 <Menubar.Item className={styles.item}>New Window</Menubar.Item>
                 <Menubar.Item className={styles.item}>New Incognito Window</Menubar.Item>
@@ -82,7 +95,7 @@ export const Styled = () => {
           <Menubar.Menu>
             <Menubar.Trigger className={styles.trigger}>Edit</Menubar.Trigger>
             <Menubar.Portal>
-              <Menubar.Content className={styles.content} sideOffset={2}>
+              <Menubar.Content className={styles.content} sideOffset={2} side={menubarContentSide}>
                 <Menubar.Item className={styles.item}>Undo</Menubar.Item>
                 <Menubar.Item className={styles.item}>Redo</Menubar.Item>
                 <Menubar.Separator className={styles.separator} />
@@ -124,7 +137,7 @@ export const Styled = () => {
           <Menubar.Menu>
             <Menubar.Trigger className={styles.trigger}>View</Menubar.Trigger>
             <Menubar.Portal>
-              <Menubar.Content className={styles.content} sideOffset={2}>
+              <Menubar.Content className={styles.content} sideOffset={2} side={menubarContentSide}>
                 {checkOptions.map((option) => (
                   <Menubar.CheckboxItem
                     key={option}
@@ -158,7 +171,7 @@ export const Styled = () => {
           <Menubar.Menu>
             <Menubar.Trigger className={styles.trigger}>Profiles</Menubar.Trigger>
             <Menubar.Portal>
-              <Menubar.Content className={styles.content} sideOffset={2}>
+              <Menubar.Content className={styles.content} sideOffset={2} side={menubarContentSide}>
                 <Menubar.RadioGroup value={radioSelection} onValueChange={setRadioSelection}>
                   {radioOptions.map((option) => (
                     <Menubar.RadioItem key={option} className={styles.item} value={option}>
@@ -176,7 +189,7 @@ export const Styled = () => {
           <Menubar.Menu>
             <Menubar.Trigger className={styles.trigger}>History</Menubar.Trigger>
             <Menubar.Portal>
-              <Menubar.Content className={styles.content} sideOffset={2}>
+              <Menubar.Content className={styles.content} sideOffset={2} side={menubarContentSide}>
                 <Menubar.Label className={styles.label}>Work</Menubar.Label>
                 <Menubar.Item className={styles.item}>Radix</Menubar.Item>
                 <Menubar.Item className={styles.item}>Github</Menubar.Item>
@@ -197,7 +210,10 @@ export const Styled = () => {
 export const Cypress = () => {
   const [loop, setLoop] = React.useState(false);
   const [rtl, setRtl] = React.useState(false);
+  const [vertical, setVertical] = React.useState(false);
   const [portalled, setPortalled] = React.useState(false);
+  const orientation = vertical ? 'vertical' : 'horizontal';
+  const menubarContentSide = vertical ? 'right' : 'bottom';
 
   const dir = rtl ? 'rtl' : 'ltr';
   const Portal = portalled ? Menubar.Portal : React.Fragment;
@@ -231,6 +247,15 @@ export const Cypress = () => {
           Loop
         </label>
 
+        <label>
+          <input
+            type="checkbox"
+            checked={vertical}
+            onChange={(event) => setVertical(event.currentTarget.checked)}
+          />
+          Vertical
+        </label>
+
         <label>
           <input
             type="checkbox"
@@ -241,11 +266,12 @@ export const Cypress = () => {
         </label>
       </div>
       <div dir={dir}>
-        <Menubar.Root className={styles.root} loop={loop} dir={dir}>
+        <Menubar.Root className={`${styles.root} ${orientation === 'vertical' ? styles.rootVertical : ''}`}
+          loop={loop} dir={dir} orientation={orientation}>
           <Menubar.Menu>
             <Menubar.Trigger className={styles.trigger}>File</Menubar.Trigger>
             <Portal>
-              <Menubar.Content className={styles.content} sideOffset={2}>
+              <Menubar.Content className={styles.content} sideOffset={2} side={menubarContentSide}>
                 <Menubar.Item className={styles.item}>New Tab</Menubar.Item>
                 <Menubar.Item className={styles.item}>New Window</Menubar.Item>
                 <Menubar.Item className={styles.item}>New Incognito Window</Menubar.Item>
@@ -269,7 +295,7 @@ export const Cypress = () => {
           <Menubar.Menu>
             <Menubar.Trigger className={styles.trigger}>Edit</Menubar.Trigger>
             <Portal>
-              <Menubar.Content className={styles.content} sideOffset={2}>
+              <Menubar.Content className={styles.content} sideOffset={2} side={menubarContentSide}>
                 <Menubar.Item className={styles.item} disabled>
                   Undo
                 </Menubar.Item>
@@ -336,7 +362,7 @@ export const Cypress = () => {
           <Menubar.Menu>
             <Menubar.Trigger className={styles.trigger}>History</Menubar.Trigger>
             <Portal>
-              <Menubar.Content className={styles.content} sideOffset={2}>
+              <Menubar.Content className={styles.content} sideOffset={2} side={menubarContentSide}>
                 <Menubar.Item className={styles.item}>Radix</Menubar.Item>
                 <Menubar.Item className={styles.item}>Github</Menubar.Item>
                 <Menubar.Item className={styles.item}>WorkOS</Menubar.Item>

packages/react/menubar/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @radix-ui/react-menubar
 
+## 1.1.17
+
+- Support new property `orientation (vertical | horizontal)` in `Menubar.Root`
+
 ## 1.1.16
 
 - Updated dependencies: `@radix-ui/primitive@1.1.3`, `@radix-ui/react-context@1.1.3`, `@radix-ui/react-menu@2.1.16`, `@radix-ui/react-collection@1.1.8`, `@radix-ui/react-primitive@2.1.4`, `@radix-ui/react-roving-focus@1.1.11`

packages/react/menubar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ui/react-menubar",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "license": "MIT",
   "source": "./src/index.ts",
   "main": "./src/index.ts",

packages/react/menubar/src/menubar.tsx

@@ -14,6 +14,7 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 
 import type { Scope } from '@radix-ui/react-context';
 
+type Orientation = 'vertical' | 'horizontal';
 type Direction = 'ltr' | 'rtl';
 
 /* -------------------------------------------------------------------------------------------------
@@ -41,6 +42,7 @@ type MenubarContextValue = {
   value: string;
   dir: Direction;
   loop: boolean;
+  orientation: Orientation;
   onMenuOpen(value: string): void;
   onMenuClose(): void;
   onMenuToggle(value: string): void;
@@ -57,6 +59,7 @@ interface MenubarProps extends PrimitiveDivProps {
   defaultValue?: string;
   onValueChange?: (value: string) => void;
   loop?: RovingFocusGroupProps['loop'];
+  orientation?: Orientation;
   dir?: RovingFocusGroupProps['dir'];
 }
 
@@ -68,6 +71,7 @@ const Menubar = React.forwardRef<MenubarElement, MenubarProps>(
       onValueChange,
       defaultValue,
       loop = true,
+      orientation = 'horizontal',
       dir,
       ...menubarProps
     } = props;
@@ -108,13 +112,14 @@ const Menubar = React.forwardRef<MenubarElement, MenubarProps>(
         )}
         dir={direction}
         loop={loop}
+        orientation={orientation}
       >
         <Collection.Provider scope={__scopeMenubar}>
           <Collection.Slot scope={__scopeMenubar}>
             <RovingFocusGroup.Root
               asChild
               {...rovingFocusGroupScope}
-              orientation="horizontal"
+              orientation={orientation}
               loop={loop}
               dir={direction}
               currentTabStopId={currentTabStopId}
@@ -260,10 +265,10 @@ const MenubarTrigger = React.forwardRef<MenubarTriggerElement, MenubarTriggerPro
               onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {
                 if (disabled) return;
                 if (['Enter', ' '].includes(event.key)) context.onMenuToggle(menuContext.value);
-                if (event.key === 'ArrowDown') context.onMenuOpen(menuContext.value);
+                if (event.key === (context.orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown')) context.onMenuOpen(menuContext.value);
                 // prevent keydown from scrolling window / first focused item to execute
                 // that keydown (inadvertently closing the menu)
-                if (['Enter', ' ', 'ArrowDown'].includes(event.key)) {
+                if (['Enter', ' ', context.orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown'].includes(event.key)) {
                   menuContext.wasKeyboardTriggerOpenRef.current = true;
                   event.preventDefault();
                 }
@@ -349,7 +354,8 @@ const MenubarContent = React.forwardRef<MenubarContentElement, MenubarContentPro
         onKeyDown={composeEventHandlers(
           props.onKeyDown,
           (event) => {
-            if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
+            // Prevent navigation when orientation is vertical and menubar content is triggered.
+            if (context.orientation !== 'vertical' && ['ArrowRight', 'ArrowLeft'].includes(event.key)) {
               const target = event.target as HTMLElement;
               const targetIsSubTrigger = target.hasAttribute('data-radix-menubar-subtrigger');
               const isKeyDownInsideSubMenu =