# Menubar

Host: Radix UI. Path: keyframes. Preset: `scale-fade`. Built against [radix-ui 1.6.7](https://www.npmjs.com/package/radix-ui/v/1.6.7).

Click File, then move the pointer sideways without clicking again. Radix hands the open state to the next menu on hover, and every handoff fires a real exit on the menu you left.

The page this file mirrors mounts the component twice, once with the attribute and once without, so the only difference between the two is the library.

Upstream documentation: [Radix UI documentation](https://www.radix-ui.com/primitives/docs/components/menubar)

Only in Radix UI. No other host here implements this component.

## Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

```text
Menubar.Root
  Menubar.Menu
    Menubar.Trigger
    Menubar.Portal
      Menubar.Content  data-motion="scale-fade"
```

## How the match works

| Step | Value |
| --- | --- |
| host writes | `data-state, data-side` |
| easeful matches | `[data-motion~="scale-fade"][data-state="closed"]` |
| what runs | `animation: motion-exit 150ms` |
| you write | `<Menubar.Content data-motion="scale-fade" />` |

## Every value that works here

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

| Value | Link |
| --- | --- |
| `scale-fade` | the default |
| `fade` | [fade](/radix/menubar#motion=fade) |
| `slide-up` | [slide-up](/radix/menubar#motion=slide-up) |
| `fade slide-up` | [fade slide-up](/radix/menubar#motion=fade%20slide-up) |
| `scale-fade slide-up` | [scale-fade slide-up](/radix/menubar#motion=scale-fade%20slide-up) |

## Source

`apps/docs/components/demos/radix/menubar.tsx`

```tsx
"use client"

import { Menubar } from "radix-ui"
import type { DemoProps } from "@/components/demos/props"

/* Two menus, so the pointer handoff is visible: open one, then move sideways.
 * Radix switches menus without a second click, and each switch fires a real
 * exit on the menu being left. */
export function RadixMenubar({ motion }: DemoProps) {
  return (
    <Menubar.Root className="tabs__list">
      <Menubar.Menu>
        <Menubar.Trigger className="tab">File</Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content className="menu" sideOffset={8} collisionPadding={16} data-motion={motion}>
            <Menubar.Item className="menu__item">New file</Menubar.Item>
            <Menubar.Item className="menu__item">Open recent</Menubar.Item>
            <Menubar.Item className="menu__item">Save all</Menubar.Item>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
      <Menubar.Menu>
        <Menubar.Trigger className="tab">Edit</Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content className="menu" sideOffset={8} collisionPadding={16} data-motion={motion}>
            <Menubar.Item className="menu__item">Undo</Menubar.Item>
            <Menubar.Item className="menu__item">Redo</Menubar.Item>
            <Menubar.Item className="menu__item">Find</Menubar.Item>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
      <Menubar.Menu>
        <Menubar.Trigger className="tab">View</Menubar.Trigger>
        <Menubar.Portal>
          <Menubar.Content className="menu" sideOffset={8} collisionPadding={16} data-motion={motion}>
            <Menubar.Item className="menu__item">Zoom in</Menubar.Item>
            <Menubar.Item className="menu__item">Full screen</Menubar.Item>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
    </Menubar.Root>
  )
}
```