All pages
Powered by GitBook
1 of 1

Menu Schema

Introduction

Schemas are structured definitions that describe the format, rules, and relationships of data within a system. They ensure consistency and validate inputs. In Beefree SDK, the Simple Menu Schema defines how navigation menus are configured and rendered within email, page, and popup builders. It supports lists of items with links, customizable paddings, and metadata. This documentation breaks down the schema's properties, requirements, and usage examples to help you implement and customize menu blocks effectively.

Reference the Simple Schema GitHub repository for more information.

Schema Overview

This section summarizes the purpose and key characteristics of the Simple Menu Schema.

  • Schema Name: Simple Menu

  • Purpose: Defines navigational menu structures made of multiple text-and-link items with styling support.

  • Related Schemas:

    • definitions.schema.json (for padding values)

Structure Definition

Below is the JSON Schema definition and a detailed breakdown of each property.

JSON Schema

{
  "$schema": "http://json-schema.org/draft-07/schema",
  "$id": "simple_menu.schema.json",
  "title": "Simple Menu",
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "type": {
      "const": "menu"
    },
    "items": {
      "type": "array",
      "items": {
        "type": "object",
        "additionalProperties": false,
        "properties": {
          "type": {
            "const": "menu-item"
          },
          "text": {
            "type": "string"
          },
          "link": {
            "type": "object",
            "additionalProperties": false,
            "properties": {
              "title": {
                "type": "string"
              },
              "href": {
                "type": "string",
                "format": "urlOrMergeTags"
              },
              "target": {
                "enum": ["_blank", "_self", "_top"]
              }
            }
          }
        }
      }
    },
    "padding-top": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "padding-right": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "padding-bottom": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "padding-left": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "locked": {
      "type": "boolean"
    },
    "customFields": {
      "type": "object"
    }
  }
}

Field Descriptions

The following tables list the field descriptions along with their corresponding data type, whether or not they are mandatory, and their description.

Level 1: simple_menu.schema.json Properties

Property
Type
Mandatory
Description

items

array

No

The menu items

padding-top

integer

No

The top padding (0-60)

padding-right

integer

No

The right padding (0-60)

padding-bottom

integer

No

The bottom padding (0-60)

padding-left

integer

No

The left padding (0-60)

locked

boolean

No

Whether the menu is locked

customFields

object

No

Custom fields for the menu

locked

boolean

No

Whether the module is locked Note:

Not available for single content addon

Level 2: items Array Properties

Property
Type
Mandatory
Description

text

string

No

The text of the menu item

link

object

No

The link object for the menu item

Level 3: link Object Properties

Property
Type
Mandatory
Description

title

string

No

The title of the link

href

string

No

The URL of the link

target

enum

No

The target of the link

Usage Examples

Reference an example of the schema in the following code snippet.

Example Menu

{
  "items": [
    {
      "text": "Home",
      "link": {
        "title": "Home",
        "href": "<https://example.com>",
        "target": "_self"
      }
    },
    {
      "text": "About",
      "link": {
        "title": "About",
        "href": "<https://example.com/about>",
        "target": "_self"
      }
    }
  ],
  "padding-top": 10,
  "padding-right": 10,
  "padding-bottom": 10,
  "padding-left": 10,
  "customFields": {
    "custom1": "value1",
    "custom2": "value2"
  }
}

Additional Considerations

Consider the following when working with the Simple Menu Schema in Beefree SDK:

  • Accessibility: Use the title field in link to improve accessibility for screen readers.

  • Responsive Design: Menu alignment and padding should be tested across devices for layout consistency.

  • Extensibility: Use customFields for non-standard properties.