Menubar

import { Menubar, type MenubarMenu } from "@grassroot/ui-react";
 
const menus: MenubarMenu[] = [
  { label: "File", items: [{ label: "New service", shortcut: "⌘N" }] },
  { label: "Edit", items: [{ label: "Undo", shortcut: "⌘Z" }] },
];
 
<Menubar menus={menus} />

<script setup lang="ts">
import { Menubar } from "@grassroot/ui-vue";
 
const menus: MenubarMenu[] = [
  { label: "File", items: [{ label: "New service", shortcut: "⌘N" }] },
  { label: "Edit", items: [{ label: "Undo", shortcut: "⌘Z" }] },
];
</script>
 
<template>
  <Menubar :menus="menus" />
</template>

import { Component } from "@angular/core";
import { GrassrootMenubar } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootMenubar],
  template: `
    <grassroot-menubar [menus]="menus" />
  `,
})
export class ExampleComponent {
  readonly menus: MenubarMenu[] = [
    { label: "File", items: [{ label: "New service", shortcut: "⌘N" }] },
    { label: "Edit", items: [{ label: "Undo", shortcut: "⌘Z" }] },
  ];
}

<script lang="ts">
  import { Menubar } from "@grassroot/ui-svelte";
 
  const menus: MenubarMenu[] = [
    { label: "File", items: [{ label: "New service", shortcut: "⌘N" }] },
    { label: "Edit", items: [{ label: "Undo", shortcut: "⌘Z" }] },
  ];
</script>
 
<Menubar menus={menus} />

import { Menubar } from "@grassroot/ui-solid";
 
const menus: MenubarMenu[] = [
  { label: "File", items: [{ label: "New service", shortcut: "⌘N" }] },
  { label: "Edit", items: [{ label: "Undo", shortcut: "⌘Z" }] },
];
 
export function Example() {
  return (
    <>
      <Menubar menus={menus} />
    </>
  );
}