Nested submenu

A submenu via MenuSub / MenuSubTrigger / MenuSubContent — ArrowRight opens it, ArrowLeft/Escape closes it. The pattern for grouping secondary actions like “Share”.

Preview

Source

apps/docs/app/recipes/menu-nested/recipe.tsx

'use client';

import {
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItem,
  MenuSeparator,
  MenuSub,
  MenuSubTrigger,
  MenuSubContent,
} from '@hey-mike/tungsten';
import { Share2 } from 'lucide-react';

const triggerClass =
  'border-stroke bg-surface text-ink-1 hover:bg-surface-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors';

export default function MenuNestedRecipe() {
  return (
    <Menu defaultOpen>
      <MenuTrigger className={triggerClass}>File</MenuTrigger>
      <MenuContent>
        <MenuItem>New file</MenuItem>
        <MenuItem>Open…</MenuItem>
        <MenuSeparator />
        <MenuSub defaultOpen>
          <MenuSubTrigger icon={<Share2 className="size-4" />}>Share</MenuSubTrigger>
          <MenuSubContent>
            <MenuItem>Email</MenuItem>
            <MenuItem>Copy link</MenuItem>
          </MenuSubContent>
        </MenuSub>
      </MenuContent>
    </Menu>
  );
}

'use client';

import {
  Menu,
  MenuTrigger,
  MenuContent,
  MenuItem,
  MenuSeparator,
  MenuSub,
  MenuSubTrigger,
  MenuSubContent,
} from '@hey-mike/tungsten';
import { Share2 } from 'lucide-react';

const triggerClass =
  'border-stroke bg-surface text-ink-1 hover:bg-surface-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors';

export default function MenuNestedRecipe() {
  return (
    <Menu defaultOpen>
      <MenuTrigger className={triggerClass}>File</MenuTrigger>
      <MenuContent>
        <MenuItem>New file</MenuItem>
        <MenuItem>Open…</MenuItem>
        <MenuSeparator />
        <MenuSub defaultOpen>
          <MenuSubTrigger icon={<Share2 className="size-4" />}>Share</MenuSubTrigger>
          <MenuSubContent>
            <MenuItem>Email</MenuItem>
            <MenuItem>Copy link</MenuItem>
          </MenuSubContent>
        </MenuSub>
      </MenuContent>
    </Menu>
  );
}