Menubar

/**
 * Menubar fixture. `defaultOpen` pins the one-menu-open state all five
 * adapters render, and the File menu covers every row shape the shared
 * `.gr-dropdown-menu__item` surface has: plain, shortcut-bearing, divider,
 * danger, and disabled.
 */
const menubarFixture = {
  id: "menubar",
  defaultOpen: 0,
  menus: [
    {
      label: "File",
      items: [
        { label: "New service", shortcut: "⌘N" },
        { label: "Open recent" },
        { divider: true },
        { label: "Tear down", danger: true },
      ],
    },
    {
      label: "Edit",
      items: [
        { label: "Undo", shortcut: "⌘Z" },
        { label: "Redo", shortcut: "⇧⌘Z", disabled: true },
      ],
    },
    { label: "View", items: [{ label: "Toggle sidebar", shortcut: "⌘B" }] },
  ],
} satisfies {
  id: string;
  defaultOpen: number;
  menus: readonly {
    label: string;
    items: readonly (
      | { label: string; shortcut?: string; danger?: boolean; disabled?: boolean }
      | { divider: true }
    )[];
  }[];
};
 
import { Menubar, type MenubarMenu } from "@grassroot/ui-react";
 
export default function MenubarDemo() {
  return (
    <div style={{ minHeight: "220px" }}>
      <Menubar
        menus={menubarFixture.menus as unknown as MenubarMenu[]}
        defaultOpen={menubarFixture.defaultOpen}
      />
    </div>
  );
}

<script setup lang="ts">
/**
 * Menubar fixture. `defaultOpen` pins the one-menu-open state all five
 * adapters render, and the File menu covers every row shape the shared
 * `.gr-dropdown-menu__item` surface has: plain, shortcut-bearing, divider,
 * danger, and disabled.
 */
const menubarFixture = {
  id: "menubar",
  defaultOpen: 0,
  menus: [
    {
      label: "File",
      items: [
        { label: "New service", shortcut: "⌘N" },
        { label: "Open recent" },
        { divider: true },
        { label: "Tear down", danger: true },
      ],
    },
    {
      label: "Edit",
      items: [
        { label: "Undo", shortcut: "⌘Z" },
        { label: "Redo", shortcut: "⇧⌘Z", disabled: true },
      ],
    },
    { label: "View", items: [{ label: "Toggle sidebar", shortcut: "⌘B" }] },
  ],
} satisfies {
  id: string;
  defaultOpen: number;
  menus: readonly {
    label: string;
    items: readonly (
      | { label: string; shortcut?: string; danger?: boolean; disabled?: boolean }
      | { divider: true }
    )[];
  }[];
};
 
import { Menubar, type MenubarMenu } from "@grassroot/ui-vue";
 
const menus = menubarFixture.menus as unknown as MenubarMenu[];
</script>
 
<template>
  <div style="min-height: 220px">
    <Menubar :menus="menus" :default-open="menubarFixture.defaultOpen" />
  </div>
</template>

import { Component } from "@angular/core";
/**
 * Menubar fixture. `defaultOpen` pins the one-menu-open state all five
 * adapters render, and the File menu covers every row shape the shared
 * `.gr-dropdown-menu__item` surface has: plain, shortcut-bearing, divider,
 * danger, and disabled.
 */
const menubarFixture = {
  id: "menubar",
  defaultOpen: 0,
  menus: [
    {
      label: "File",
      items: [
        { label: "New service", shortcut: "⌘N" },
        { label: "Open recent" },
        { divider: true },
        { label: "Tear down", danger: true },
      ],
    },
    {
      label: "Edit",
      items: [
        { label: "Undo", shortcut: "⌘Z" },
        { label: "Redo", shortcut: "⇧⌘Z", disabled: true },
      ],
    },
    { label: "View", items: [{ label: "Toggle sidebar", shortcut: "⌘B" }] },
  ],
} satisfies {
  id: string;
  defaultOpen: number;
  menus: readonly {
    label: string;
    items: readonly (
      | { label: string; shortcut?: string; danger?: boolean; disabled?: boolean }
      | { divider: true }
    )[];
  }[];
};
 
import { GrassrootMenubar, type MenubarMenu } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-menubar-demo",
  standalone: true,
  imports: [GrassrootMenubar],
  template: `
    <div style="min-height:220px">
      <grassroot-menubar [menus]="menus" [defaultOpen]="fixture.defaultOpen" />
    </div>
  `,
})
export class MenubarDemoComponent {
  protected readonly fixture = menubarFixture;
  protected readonly menus = menubarFixture.menus as unknown as MenubarMenu[];
}
 
export default MenubarDemoComponent;

<script lang="ts">
  import { Menubar, type MenubarMenu } from "@grassroot/ui-svelte";
  /**
   * Menubar fixture. `defaultOpen` pins the one-menu-open state all five
   * adapters render, and the File menu covers every row shape the shared
   * `.gr-dropdown-menu__item` surface has: plain, shortcut-bearing, divider,
   * danger, and disabled.
   */
  const menubarFixture = {
    id: "menubar",
    defaultOpen: 0,
    menus: [
      {
        label: "File",
        items: [
          { label: "New service", shortcut: "⌘N" },
          { label: "Open recent" },
          { divider: true },
          { label: "Tear down", danger: true },
        ],
      },
      {
        label: "Edit",
        items: [
          { label: "Undo", shortcut: "⌘Z" },
          { label: "Redo", shortcut: "⇧⌘Z", disabled: true },
        ],
      },
      { label: "View", items: [{ label: "Toggle sidebar", shortcut: "⌘B" }] },
    ],
  } satisfies {
    id: string;
    defaultOpen: number;
    menus: readonly {
      label: string;
      items: readonly (
        | { label: string; shortcut?: string; danger?: boolean; disabled?: boolean }
        | { divider: true }
      )[];
    }[];
  };
 
  </script>
 
<div style="min-height:220px">
  <Menubar
    menus={menubarFixture.menus as unknown as MenubarMenu[]}
    defaultOpen={menubarFixture.defaultOpen}
  />
</div>

/** @jsxImportSource solid-js */
import { Menubar, type MenubarMenu } from "@grassroot/ui-solid";
/**
 * Menubar fixture. `defaultOpen` pins the one-menu-open state all five
 * adapters render, and the File menu covers every row shape the shared
 * `.gr-dropdown-menu__item` surface has: plain, shortcut-bearing, divider,
 * danger, and disabled.
 */
const menubarFixture = {
  id: "menubar",
  defaultOpen: 0,
  menus: [
    {
      label: "File",
      items: [
        { label: "New service", shortcut: "⌘N" },
        { label: "Open recent" },
        { divider: true },
        { label: "Tear down", danger: true },
      ],
    },
    {
      label: "Edit",
      items: [
        { label: "Undo", shortcut: "⌘Z" },
        { label: "Redo", shortcut: "⇧⌘Z", disabled: true },
      ],
    },
    { label: "View", items: [{ label: "Toggle sidebar", shortcut: "⌘B" }] },
  ],
} satisfies {
  id: string;
  defaultOpen: number;
  menus: readonly {
    label: string;
    items: readonly (
      | { label: string; shortcut?: string; danger?: boolean; disabled?: boolean }
      | { divider: true }
    )[];
  }[];
};
 
export default function MenubarDemo() {
  return (
    <div style="min-height:220px">
      <Menubar
        menus={menubarFixture.menus as unknown as MenubarMenu[]}
        defaultOpen={menubarFixture.defaultOpen}
      />
    </div>
  );
}