Menubar

<script setup lang="ts">
import type { CheckAnimation } from '@animate-ui/vue/provider'
import { AnimateUIProvider } from '@animate-ui/vue/provider'
import { ref } from 'vue'
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from '@/components/ui/menubar'

withDefaults(defineProps<{ checkAnimation?: CheckAnimation }>(), {
  checkAnimation: 'draw',
})

const bookmarks = ref(false)
const fullUrls = ref(true)
const profile = ref('benoit')
</script>

<template>
  <AnimateUIProvider :check-animation="checkAnimation">
  <Menubar>
    <MenubarMenu>
      <MenubarTrigger>File</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>
          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>
          New Window <MenubarShortcut>⌘N</MenubarShortcut>
        </MenubarItem>
        <MenubarItem disabled>
          New Incognito Window
        </MenubarItem>
        <MenubarSeparator />
        <MenubarSub>
          <MenubarSubTrigger>Share</MenubarSubTrigger>
          <MenubarSubContent>
            <MenubarItem>Email link</MenubarItem>
            <MenubarItem>Messages</MenubarItem>
            <MenubarItem>Notes</MenubarItem>
          </MenubarSubContent>
        </MenubarSub>
        <MenubarSeparator />
        <MenubarItem>
          Print... <MenubarShortcut>⌘P</MenubarShortcut>
        </MenubarItem>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>Edit</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>
          Undo <MenubarShortcut>⌘Z</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>
          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
        </MenubarItem>
        <MenubarSeparator />
        <MenubarSub>
          <MenubarSubTrigger>Find</MenubarSubTrigger>
          <MenubarSubContent>
            <MenubarItem>Search the web</MenubarItem>
            <MenubarSeparator />
            <MenubarItem>Find...</MenubarItem>
            <MenubarItem>Find Next</MenubarItem>
            <MenubarItem>Find Previous</MenubarItem>
          </MenubarSubContent>
        </MenubarSub>
        <MenubarSeparator />
        <MenubarItem>Cut</MenubarItem>
        <MenubarItem>Copy</MenubarItem>
        <MenubarItem>Paste</MenubarItem>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>View</MenubarTrigger>
      <MenubarContent>
        <MenubarCheckboxItem v-model="bookmarks">Always Show Bookmarks Bar</MenubarCheckboxItem>
        <MenubarCheckboxItem v-model="fullUrls">
          Always Show Full URLs
        </MenubarCheckboxItem>
        <MenubarSeparator />
        <MenubarItem inset>
          Reload <MenubarShortcut>⌘R</MenubarShortcut>
        </MenubarItem>
        <MenubarItem disabled inset>
          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
        </MenubarItem>
        <MenubarSeparator />
        <MenubarItem inset>
          Toggle Fullscreen
        </MenubarItem>
        <MenubarSeparator />
        <MenubarItem inset>
          Hide Sidebar
        </MenubarItem>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>Profiles</MenubarTrigger>
      <MenubarContent>
        <MenubarRadioGroup v-model="profile">
          <MenubarRadioItem value="andy">
            Andy
          </MenubarRadioItem>
          <MenubarRadioItem value="benoit">
            Benoit
          </MenubarRadioItem>
          <MenubarRadioItem value="Luis">
            Luis
          </MenubarRadioItem>
        </MenubarRadioGroup>
        <MenubarSeparator />
        <MenubarItem inset>
          Edit...
        </MenubarItem>
        <MenubarSeparator />
        <MenubarItem inset>
          Add Profile...
        </MenubarItem>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
  </AnimateUIProvider>
</template>

InstallationCopy Anchor Link

npm install @animate-ui/vue motion-v

pnpm add @animate-ui/vue motion-v

yarn add @animate-ui/vue motion-v

bun add @animate-ui/vue motion-v

npx shadcn-vue@latest add menubar

pnpm dlx shadcn-vue@latest add menubar

yarn dlx shadcn-vue@latest add menubar

bun x shadcn-vue@latest add menubar

npx @animate-ui/cli@latest animate menubar

pnpm dlx @animate-ui/cli@latest animate menubar

yarn dlx @animate-ui/cli@latest animate menubar

bun x @animate-ui/cli@latest animate menubar

UsageCopy Anchor Link

<script setup lang="ts">
import {
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarPortal,
  MenubarRoot,
  MenubarTrigger,
} from '@animate-ui/vue/primitives/reka-ui';
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>File</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent :side-offset="4">
          <MenubarItem>New Tab</MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>Edit</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent :side-offset="4">
          <MenubarItem>Undo</MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>

Check animationCopy Anchor Link

Checkbox and radio items show their check in a MenubarItemIndicator: it draws itself when the item is checked, and erases itself when it's unchecked (a radio item's while the new one draws). With animation="pop", it pops in from half its size and shrinks back out instead, and a radio item's check glides to the newly checked item:

<MenubarCheckboxItem v-model="statusBar">
  <MenubarItemIndicator animation="pop">✓</MenubarItemIndicator>
  Status bar
</MenubarCheckboxItem>
<MenubarRadioGroup v-model="panel">
  <MenubarRadioItem value="top">
    <MenubarItemIndicator animation="pop">✓</MenubarItemIndicator>
    Top
  </MenubarRadioItem>
  <MenubarRadioItem value="bottom">
    <MenubarItemIndicator animation="pop">✓</MenubarItemIndicator>
    Bottom
  </MenubarRadioItem>
</MenubarRadioGroup>

The same demo with check-animation="pop" (its Controls switch it back to draw):

To pop every check of your app at once (checkboxes, menus, selects, comboboxes), set check-animation="pop" on an AnimateUIProvider instead.

AnimationCopy Anchor Link

The motion of Animate UI's React Menubar: each menu opens and closes like its Dropdown Menu, and moving between menus hands one popover from menu to menu.

• Content fades and scales in from 0.9, from its trigger (--reka-menubar-content-transform-origin, set inline so it works without styles), in 220ms ({ duration: 0.22, ease: [0.215, 0.61, 0.355, 1] }, a soft ease-out), and closes the same way before it unmounts.
• Stagger: opening from closed, the rows (items, labels, separators) come in one after another, 33ms apart (closer past 10 rows: 33ms × √(10 / rows), so a long list doesn't wait): each slides 8px in from the right and clears from a 4px blur as it fades in, in 0.3s on a soft ease-out ({ duration: 0.3, ease: [0.215, 0.61, 0.355, 1] }). The box itself is there at once (its opacity in 0.1s, its scale as before), so the rows bring the fade, and a disabled row comes in at its own opacity. Moving to another menu of the bar or reopening while it closes doesn't stagger again, closing shows every row at once, and under reduced motion nothing staggers.
• SubContent grows from the side of its trigger the same way.
• Moving from one open menu to another (hovering, clicking or tapping a trigger, or pressing the arrow keys), the popover doesn't close and reopen: it moves to the next menu and resizes on a spring (stiffness 660, damping 52): it starts gently, is most of the way there in ~155ms and eases in without going past, settled by ~300ms (the Content's transition, if you set one), sliding over the content, which stays where it is on screen. Going from File to Edit, File's items leave to the left, 6px, while they fade out (220ms, a soft ease-out), and Edit's come in from 6px to the right on a spring (stiffness 450, damping 43) and fade in behind them (260ms, on a slow start); going back, the other way around. The popover clips them as it goes.
• The popover that moves is the next menu's Content, interactive from its first frame: it starts where the previous one was, at its size and opacity, without an entrance, and the previous menu (with its open submenus) is hidden in that frame and unmounted at once, so there's one popover on screen however fast the pointer sweeps the bar. A copy of the previous items (aria-hidden, inert) leaves inside it. It moves and resizes on Web Animations (translate, added to its own, and width/height, its margins making up the difference so reka-ui places it once, above the bar or against an edge as well), never scaled, so the items keep their size, and nothing is left on it once it has landed. Moving on again before it has landed, it leaves from where it is, with what it shows, keeping its speed toward the next menu (as much of it as never takes it past that menu; sent back the way it came, it turns back at once), so sweeping across the bar is one glide. Going back and forth faster than the content settles, each menu's content shows once: what's still leaving goes on leaving from where it is, and back to a menu whose items are still leaving, they come back from there (where they are, as they show) instead of coming in again. With a transition of 0, it moves and swaps at once.
• The highlight: one surface glides behind the highlighted item on a spring (stiffness 500, damping 40), following the pointer and the arrow keys alike, and into submenus. Moving to another item, it carries on from where it is, at its speed: however fast the pointer or the arrow keys go, there's one highlight on screen. It only fades in (200ms, on CSS's ease) when it appears from nothing, and its color changes the same way when the item's highlighted background differs from the previous one's. It glides on the compositor (a Web Animation of transform), so a busy main thread, a submenu opening for instance, doesn't stall it. Into a submenu or back out of it, each menu clips its own part: the previous surface glides along with the new one, the same box on screen, so the two make one highlight crossing from one menu into the other; the entering part fades in as it glides. When the pointer leaves the menu, it stays on the last item. It wears the item's own highlighted background (focus:bg-accent, data-highlighted:bg-accent…), read from your styles: the item's background is cleared while it's highlighted (or still has the focus, or its submenu is open), and a focus: background is read again once the item has the focus; its text colors stay.
• The triggers' highlight: the triggers share one highlight too, like the items: a trigger hovered, focused or with its menu open wears its own background (shadcn-vue's focus:bg-accent, data-[state=open]:bg-accent, or a hover: one…, read from your styles and cleared on the trigger), and that background glides from trigger to trigger on the highlight's spring (stiffness 500, damping 40), along with the popover when a menu is open. It fades in (200ms, on CSS's ease) when it appears from nothing and fades out where it is the same way when no trigger is lit anymore (the pointer leaving the bar with no menu open, a menu closed); lit again meanwhile, it comes back from there. The bar becomes its own stacking context (isolation: isolate), so the highlight goes under the triggers' text and above the bar's background.
• ItemIndicator: an item's check draws itself like a Checkbox's check (its stroke and opacity in 0.3s on Motion's easeOut, at once: there's no box to fill first) when the item is checked, and erases itself in 0.3s when it's unchecked (it stays mounted for that). Checking another radio item erases the old check while the new one draws itself. Only checking and unchecking animate: opening the menu shows its checks at rest, and closing it leaves them as they are.
• With animation="pop" on the ItemIndicator (or check-animation="pop" on an AnimateUIProvider), checks pop instead: in from half their size out of a 2px blur (a spring, stiffness 500, damping 24), and back into their blur in 0.15s. A radio item's check doesn't pop from one item to another: it glides from the item it leaves to the newly checked one, on the highlight's spring (stiffness 500, damping 40), like a select's. The demo's Controls switch between the two.
• Choosing an item closes the menu (reka-ui's default): when its check changes (a checkbox item's, or another radio item's than the checked one), the menu holds still first (250ms while a check draws itself, 150ms while it pops or glides), so the change is seen, then fades out. Escape and outside clicks don't wait.
• When the menu closes with focus inside, focus goes back to the menu's trigger at once instead of after the exit, and the leaving menu ignores the pointer and can't dismiss anything.
• With force-mount (on the Content or the Portal), the closed content stays in the DOM: it plays its exit, then is hidden (visibility: hidden). It still opens on a click: closed, it's a dismissable layer already, and reka-ui would take the pointer down that opens it for one outside it, closing it at once.
• A menu open from the start (the Root's default-value) plays its entrance on page load.
• Under reduced motion, nothing scales, glides or slides: the menu and the checks only fade, and the menu doesn't hold; moving to another menu, each one fades in place, the next in as the previous one fades out; the highlights jump from item to item and from trigger to trigger, and only fade.

API ReferenceCopy Anchor Link

Every part takes exactly the props of reka-ui's Menubar. Animate UI adds the animation props below.

MenubarRoot, MenubarMenu, MenubarPortal, MenubarGroup, MenubarLabel, MenubarRadioGroup, MenubarSeparator, MenubarArrow, MenubarSubCopy Anchor Link

reka-ui props only. They are not animated.

MenubarTriggerCopy Anchor Link

reka-ui props only. It takes part in the triggers' highlight; it needs nothing more.

MenubarItem, MenubarCheckboxItem, MenubarRadioItem, MenubarSubTriggerCopy Anchor Link

reka-ui props only. They take part in the highlight; it needs nothing more.

MenubarContent, MenubarSubContentCopy Anchor Link

reka-ui props, plus:

MenubarItemIndicatorCopy Anchor Link

reka-ui props, plus: