# Defaults: MegaMenu (/themes/sdk/reference/navigation/defaults-3)

```ts
import { … } from '@poltura/theme-sdk/navigation';
```

## `MegaMenu` [#megamenu]

The all-categories button with a two-pane panel: the top-level categories, and the subcategories of the one pointed at.

```ts
MegaMenu(props: MegaMenuProps): ReactElement | null
```

**Props:** [`MegaMenuProps`](/themes/sdk/reference/navigation/types-2#megamenuprops)

<Tab value='Example'>

```tsx
import { MegaMenu } from '@poltura/theme-sdk/navigation';

export function Categories() {
  return <MegaMenu openOn='click' />;
}
```

</Tab>
<Tab value='Source'>

```tsx title="source/mega-menu.tsx"
import { useState, type ReactElement } from 'react';
import { ChevronDown, ChevronRight, Menu } from 'lucide-react';
import { useTranslations } from '@poltura/theme-sdk/i18n';
import { useMegaMenu, useNavData, type MegaMenuProps } from '@poltura/theme-sdk/navigation';
import { Link } from '@poltura/theme-sdk/routing';
import { Icon, cn } from '@poltura/theme-sdk/ui';

const PANEL_BOX =
  'absolute left-0 top-full z-50 mt-2 overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-[var(--overlay-shadow)]';

function ItemLabel({ label, icon }: { label: string; icon: string | null }): ReactElement {
  if (icon === null) return <>{label}</>;
  return (
    <span className='flex min-w-0 items-center gap-2'>
      <Icon value={icon} className='size-4 text-muted-foreground' />
      <span className='min-w-0 truncate'>{label}</span>
    </span>
  );
}

export function MegaMenu({
  label,
  openOn = 'hover',
  className,
}: MegaMenuProps): ReactElement | null {
  const { categories } = useNavData();
  const t = useTranslations('nav');
  const menu = useMegaMenu({ openOn });
  const [activeId, setActiveId] = useState<string | null>(null);
  const active = categories.find((category) => category.id === activeId) ?? categories[0];
  if (active === undefined) return null;
  return (
    <div {...menu.rootProps} className={cn('relative', className)}>
      <button
        type='button'
        {...menu.triggerProps}
        className='inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted'
      >
        <Menu aria-hidden='true' className='size-4' />
        {label ?? t('allCategories')}
        <ChevronDown
          aria-hidden='true'
          className={cn('size-3.5 transition-transform', menu.open && 'rotate-180')}
        />
      </button>
      <div
        {...menu.panelProps}
        className={cn(PANEL_BOX, 'grid w-[40rem] max-w-[90vw] grid-cols-[14rem_1fr]')}
      >
        <ul className='border-r border-border py-2'>
          {categories.map((category) => (
            <li key={category.id}>
              <Link
                href={category.href}
                onMouseEnter={() => setActiveId(category.id)}
                onFocus={() => setActiveId(category.id)}
                className={cn(
                  'flex items-center justify-between gap-2 px-4 py-2 text-sm transition-colors hover:bg-muted',
                  category.id === active.id && 'bg-muted',
                )}
              >
                <ItemLabel label={category.name} icon={category.icon} />
                {category.children.length > 0 ? (
                  <ChevronRight aria-hidden='true' className='size-3.5 opacity-60' />
                ) : null}
              </Link>
            </li>
          ))}
        </ul>
        <div className='p-4'>
          <Link href={active.href} className='text-sm font-semibold hover:underline'>
            {active.name}
          </Link>
          <ul className='mt-3 grid grid-cols-2 gap-x-6 gap-y-1'>
            {active.children.map((child) => (
              <li key={child.id}>
                <Link
                  href={child.href}
                  className='block py-1 text-sm text-muted-foreground transition-colors hover:text-foreground'
                >
                  <ItemLabel label={child.name} icon={child.icon} />
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}
```

</Tab>


**See also:** [`useMegaMenu`](/themes/sdk/reference/navigation/hooks#usemegamenu)