import type { Config } from "@envisioning/app";

const menu: Config["navigation"]["menu"] = [
  {
    id: "home",
    label: { en: "Home" },
    icon: "homeEv",
    pageId: "home",
  },
  {
    id: "techs",
    label: { en: "Technologies" },
    icon: "circlesGroup3Ev",
    pageId: "technologies",
  },
];

Properties Reference

Property	Type	Required	Description
`id`	`string`	Yes	Unique identifier for the menu item
`label`	`I18n`	Yes	Display label (supports internationalization)
`icon`	`IconName`	Yes	Icon name from the icon library
`pageId`	`string`	Yes	ID of the page this menu item links to

Each menu item connects to a page. The pageId must match a page's id in the pages array, and the page's menuId should reference this menu item.

// Menu item
{
  id: "techs",
  label: { en: "Technologies" },
  icon: "circlesGroup3Ev",
  pageId: "technologies",
}

// Corresponding page
{
  id: "technologies",
  menuId: "techs",  // References the menu item
  label: { en: "Technologies" },
  // ...
}

Using Schema Labels

You can reference schema labels directly for dynamic menu labels:

import { schema } from "./schema";

const menu: Config["navigation"]["menu"] = [
  {
    id: "techs",
    label: schema.objects.entities.plural,  // Uses "Technologies" from schema
    icon: "circlesGroup3Ev",
    pageId: "technologies",
  },
  {
    id: "collections",
    label: schema.objects.collection.plural,  // Uses "Collections" from schema
    icon: "box",
    pageId: "collections",
  },
];

Available Icons

Common icons used in menus:

Icon Name	Use Case
`homeEv`	Home page
`circlesGroup3Ev`	Entity lists
`box`	Collections/clusters
`gauge`	Metrics
`info`	About page
`shield`	Tags
`milestone`	Categories

See the Icons documentation for the complete list.

Complete Example

import type { Config } from "@envisioning/app";
import { schema } from "./schema";

const menu: Config["navigation"]["menu"] = [
  {
    id: "home",
    label: { en: "Home" },
    icon: "homeEv",
    pageId: "home",
  },
  {
    id: "techs",
    label: schema.objects.entities.plural,
    icon: "circlesGroup3Ev",
    pageId: "technologies",
  },
  {
    id: "collections",
    label: schema.objects.collection.plural,
    icon: "box",
    pageId: "collections",
  },
  {
    id: "metrics",
    label: { en: "Metrics" },
    icon: "gauge",
    pageId: "metrics",
  },
  {
    id: "about",
    label: { en: "About" },
    icon: "info",
    pageId: "about",
  },
];

export const navigation: Config["navigation"] = {
  menu,
  pages,
  blocks,
};

Validation

The configuration validates that:

Each pageId in menu items exists in the pages array
Each page's menuId exists in the menu array

If validation fails, you'll see helpful error messages:

Page "technologies" not found in pages
MenuItem "techs" not found in menuItems. Check page "technologies"

Menu

Overview

Properties Reference

Menu Item Structure

Using Schema Labels

Available Icons

Complete Example

Validation

On this page