如何让Radix嵌套下拉子菜单始终左向展开并支持无障碍访问？

核心实现（无需JS硬编码） #

Radix的DropdownMenu组件本身提供了side和align属性来控制弹出方向，你之前用[data-side]无效是因为没在正确的组件上配置：

• 给子级的DropdownMenu.Content直接设置side="left"，就能强制子菜单向左展开，不需要依赖DOM属性选择器
• 配合align="start"可以让子菜单和父菜单的顶部对齐，保持视觉连贯性

示例代码片段：

<DropdownMenu.Sub>
  <DropdownMenu.Trigger>父菜单选项</DropdownMenu.Trigger>
  <DropdownMenu.Content side="left" align="start">
    {/* 子菜单内容 */}
    <DropdownMenu.Item>子选项1</DropdownMenu.Item>
    <DropdownMenu.Item>子选项2</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Sub>

无障碍：左箭头键打开子菜单 #

Radix默认支持右箭头打开子菜单，要添加左箭头支持，需要通过onKeyDown事件监听，同时确保不破坏原有无障碍逻辑：

• 在父级的DropdownMenu.Trigger上绑定onKeyDown事件
• 监听ArrowLeft按键，调用Radix提供的open方法（通过useDropdownMenuContext获取上下文）

代码示例：

import { useDropdownMenuContext } from '@radix-ui/react-dropdown-menu';

// 在子菜单的Trigger组件内
const { open } = useDropdownMenuContext();

const handleKeyDown = (e) => {
  if (e.key === 'ArrowLeft') {
    e.preventDefault();
    open();
  }
};

<DropdownMenu.Trigger onKeyDown={handleKeyDown}>父菜单选项</DropdownMenu.Trigger>

注意事项 #

• 不要用全局CSS覆盖[data-side]属性，Radix的样式优先级更高，直接通过组件props配置才是官方推荐方式
• 测试无障碍：确保屏幕阅读器能识别菜单层级，按键操作符合WCAG标准

内容的提问来源于stack exchange，提问作者sreed