NavigationMenu

/**
 * NavigationMenu fixture. `defaultOpen` pins the expanded-panel state the
 * five-framework render proof compares. The three entries cover every
 * trigger shape: an active link with no panel, a panel item (with one link
 * carrying no description), and a plain inactive link.
 */
const navigationMenuFixture = {
  id: "navigation-menu",
  defaultOpen: 1,
  items: [
    { label: "Product", active: true },
    {
      label: "Platform",
      links: [
        {
          label: "Deployments",
          description: "Ship, watch and roll back releases",
          href: "/platform/deployments",
        },
        {
          label: "Observability",
          description: "Traces, metrics and logs in one place",
          href: "/platform/observability",
        },
        { label: "Access control", href: "/platform/access" },
      ],
    },
    { label: "Pricing" },
  ],
} satisfies {
  id: string;
  defaultOpen: number;
  items: readonly {
    label: string;
    active?: boolean;
    links?: readonly { label: string; description?: string; href?: string }[];
  }[];
};
 
import { NavigationMenu, type NavMenuItem } from "@grassroot/ui-react";
 
export default function NavigationMenuDemo() {
  return (
    <div style={{ minHeight: "220px" }}>
      <NavigationMenu
        items={navigationMenuFixture.items as unknown as NavMenuItem[]}
        defaultOpen={navigationMenuFixture.defaultOpen}
      />
    </div>
  );
}

<script setup lang="ts">
/**
 * NavigationMenu fixture. `defaultOpen` pins the expanded-panel state the
 * five-framework render proof compares. The three entries cover every
 * trigger shape: an active link with no panel, a panel item (with one link
 * carrying no description), and a plain inactive link.
 */
const navigationMenuFixture = {
  id: "navigation-menu",
  defaultOpen: 1,
  items: [
    { label: "Product", active: true },
    {
      label: "Platform",
      links: [
        {
          label: "Deployments",
          description: "Ship, watch and roll back releases",
          href: "/platform/deployments",
        },
        {
          label: "Observability",
          description: "Traces, metrics and logs in one place",
          href: "/platform/observability",
        },
        { label: "Access control", href: "/platform/access" },
      ],
    },
    { label: "Pricing" },
  ],
} satisfies {
  id: string;
  defaultOpen: number;
  items: readonly {
    label: string;
    active?: boolean;
    links?: readonly { label: string; description?: string; href?: string }[];
  }[];
};
 
import { NavigationMenu, type NavMenuItem } from "@grassroot/ui-vue";
 
const items = navigationMenuFixture.items as unknown as NavMenuItem[];
</script>
 
<template>
  <div style="min-height: 220px">
    <NavigationMenu :items="items" :default-open="navigationMenuFixture.defaultOpen" />
  </div>
</template>

import { Component } from "@angular/core";
/**
 * NavigationMenu fixture. `defaultOpen` pins the expanded-panel state the
 * five-framework render proof compares. The three entries cover every
 * trigger shape: an active link with no panel, a panel item (with one link
 * carrying no description), and a plain inactive link.
 */
const navigationMenuFixture = {
  id: "navigation-menu",
  defaultOpen: 1,
  items: [
    { label: "Product", active: true },
    {
      label: "Platform",
      links: [
        {
          label: "Deployments",
          description: "Ship, watch and roll back releases",
          href: "/platform/deployments",
        },
        {
          label: "Observability",
          description: "Traces, metrics and logs in one place",
          href: "/platform/observability",
        },
        { label: "Access control", href: "/platform/access" },
      ],
    },
    { label: "Pricing" },
  ],
} satisfies {
  id: string;
  defaultOpen: number;
  items: readonly {
    label: string;
    active?: boolean;
    links?: readonly { label: string; description?: string; href?: string }[];
  }[];
};
 
import { GrassrootNavigationMenu, type NavMenuItem } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-navigation-menu-demo",
  standalone: true,
  imports: [GrassrootNavigationMenu],
  template: `
    <div style="min-height:220px">
      <grassroot-navigation-menu [items]="items" [defaultOpen]="fixture.defaultOpen" />
    </div>
  `,
})
export class NavigationMenuDemoComponent {
  protected readonly fixture = navigationMenuFixture;
  protected readonly items = navigationMenuFixture.items as unknown as NavMenuItem[];
}
 
export default NavigationMenuDemoComponent;

<script lang="ts">
  import { NavigationMenu, type NavMenuItem } from "@grassroot/ui-svelte";
  /**
   * NavigationMenu fixture. `defaultOpen` pins the expanded-panel state the
   * five-framework render proof compares. The three entries cover every
   * trigger shape: an active link with no panel, a panel item (with one link
   * carrying no description), and a plain inactive link.
   */
  const navigationMenuFixture = {
    id: "navigation-menu",
    defaultOpen: 1,
    items: [
      { label: "Product", active: true },
      {
        label: "Platform",
        links: [
          {
            label: "Deployments",
            description: "Ship, watch and roll back releases",
            href: "/platform/deployments",
          },
          {
            label: "Observability",
            description: "Traces, metrics and logs in one place",
            href: "/platform/observability",
          },
          { label: "Access control", href: "/platform/access" },
        ],
      },
      { label: "Pricing" },
    ],
  } satisfies {
    id: string;
    defaultOpen: number;
    items: readonly {
      label: string;
      active?: boolean;
      links?: readonly { label: string; description?: string; href?: string }[];
    }[];
  };
 
  </script>
 
<div style="min-height:220px">
  <NavigationMenu
    items={navigationMenuFixture.items as unknown as NavMenuItem[]}
    defaultOpen={navigationMenuFixture.defaultOpen}
  />
</div>

/** @jsxImportSource solid-js */
import { NavigationMenu, type NavMenuItem } from "@grassroot/ui-solid";
/**
 * NavigationMenu fixture. `defaultOpen` pins the expanded-panel state the
 * five-framework render proof compares. The three entries cover every
 * trigger shape: an active link with no panel, a panel item (with one link
 * carrying no description), and a plain inactive link.
 */
const navigationMenuFixture = {
  id: "navigation-menu",
  defaultOpen: 1,
  items: [
    { label: "Product", active: true },
    {
      label: "Platform",
      links: [
        {
          label: "Deployments",
          description: "Ship, watch and roll back releases",
          href: "/platform/deployments",
        },
        {
          label: "Observability",
          description: "Traces, metrics and logs in one place",
          href: "/platform/observability",
        },
        { label: "Access control", href: "/platform/access" },
      ],
    },
    { label: "Pricing" },
  ],
} satisfies {
  id: string;
  defaultOpen: number;
  items: readonly {
    label: string;
    active?: boolean;
    links?: readonly { label: string; description?: string; href?: string }[];
  }[];
};
 
export default function NavigationMenuDemo() {
  return (
    <div style="min-height:220px">
      <NavigationMenu
        items={navigationMenuFixture.items as unknown as NavMenuItem[]}
        defaultOpen={navigationMenuFixture.defaultOpen}
      />
    </div>
  );
}