easeul

Radix UIKeyframes

Menubar

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.

Only in Radix UI

Radix UI documentation1.6.7

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.

withoutno attribute
with easefuldata-motion="scale-fade"
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" />

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.

  1. Menubar.Root
  2. Menubar.Menu
  3. Menubar.Trigger
  4. Menubar.Portal
  5. Menubar.Contentdata-motion="scale-fade"

Source

apps/docs/components/demos/radix/menubar.tsx
43 lines
"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>
  )
}
The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.