Menubar

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download menubar -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Menubar } from "@/components/ui/menubar";
import { MenubarMenu } from "@/components/ui/menubar";
import { MenubarTrigger } from "@/components/ui/menubar";
import { MenubarContent } from "@/components/ui/menubar";
import { MenubarItem } from "@/components/ui/menubar";
import * as UI from "@/components/ui/menubar";

const Component = UI.Menubar;

const args = {
  "label": "File",
  "disabled": false,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Menubar
    ><MenubarMenu
      ><MenubarTrigger :disabled="args.disabled">{{
        args.label
      }}</MenubarTrigger
      ><MenubarContent
        ><MenubarItem>New file</MenubarItem
        ><MenubarItem>Open</MenubarItem></MenubarContent
      ></MenubarMenu
    ></Menubar
  >
</template>

Examples

Default

<script setup lang="ts">
import { Menubar } from "@/components/ui/menubar";
import { MenubarMenu } from "@/components/ui/menubar";
import { MenubarTrigger } from "@/components/ui/menubar";
import { MenubarContent } from "@/components/ui/menubar";
import { MenubarGroup } from "@/components/ui/menubar";
import { MenubarItem } from "@/components/ui/menubar";
import { MenubarShortcut } from "@/components/ui/menubar";
import { MenubarSeparator } from "@/components/ui/menubar";
import { MenubarSub } from "@/components/ui/menubar";
import { MenubarSubTrigger } from "@/components/ui/menubar";
import { MenubarSubContent } from "@/components/ui/menubar";
import { MenubarCheckboxItem } from "@/components/ui/menubar";
import { MenubarRadioGroup } from "@/components/ui/menubar";
import { MenubarRadioItem } from "@/components/ui/menubar";
import * as UI from "@/components/ui/menubar";

const Component = UI.Menubar;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Menubar
    ><MenubarMenu
      ><MenubarTrigger>File</MenubarTrigger
      ><MenubarContent
        ><MenubarGroup
          ><MenubarItem
            >New Tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem
          ><MenubarItem
            >New Window <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem
          ><MenubarItem disabled
            >New Incognito Window</MenubarItem
          ></MenubarGroup
        ><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>Bookmarks Bar</MenubarCheckboxItem
        ><MenubarCheckboxItem :model-value="true">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
        ></MenubarContent
      ></MenubarMenu
    ><MenubarMenu
      ><MenubarTrigger>Profiles</MenubarTrigger
      ><MenubarContent
        ><MenubarRadioGroup model-value="benoit"
          ><MenubarRadioItem value="andy">Andy</MenubarRadioItem
          ><MenubarRadioItem value="benoit">Benoit</MenubarRadioItem
          ><MenubarRadioItem value="luis"
            >Luis</MenubarRadioItem
          ></MenubarRadioGroup
        ><MenubarSeparator /><MenubarItem inset
          >Edit...</MenubarItem
        ></MenubarContent
      ></MenubarMenu
    ></Menubar
  >
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

MenubarCheckboxItem

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

MenubarContent

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

MenubarItem

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`inset`	`boolean`	`—`
`variant`	`"default" \| "destructive"`	`—`

MenubarLabel

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`
`inset`	`boolean`	`—`

MenubarRadioItem

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

MenubarSeparator

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

MenubarShortcut

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

MenubarSub

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`—`
`open`	`boolean`	`—`

MenubarSubContent

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

MenubarSubTrigger

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`
`inset`	`boolean`	`—`

MenubarTrigger

Prop	Type	Default	Description
`class`	`HTMLAttributes["class"]`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.