​Vertical Navigation Array Editor

Displays array items as a vertical menu, suitable for tabbed interfaces.

​Activation Conditions

  • "type": "array"
  • "x-format": "nav-vertical"

​Example 

{
  "type": "array",
  "title": "People",
  "x-titleTemplate": "{{ i1 }}) {{ value.name }}",
  "x-format": "nav-vertical",
  "items": {
    "type": "object",
    "title": "Person",
    "properties": {
      "name": {
        "title": "Name",
        "type": "string",
        "default": "German"
      }
    }
  },
  "default": [
    {
      "name": "Albert"
    },
    {
      "name": "Betti"
    }
  ]
}

Adds a footer row with add and/or delete-all buttons. Use x-arrayDeleteAll to also show a "Delete all" button in the header.

  • x-arrayDeleteAll — Adds a "Delete all" button to the header
  • x-arrayFooterAdd — Adds an "Add item" button in the footer
  • x-arrayFooterDeleteAll — Adds a "Delete all" button in the footer
  • x-arrayFooterButtonsPosition — Aligns footer buttons ('left' or 'right', default: 'right')
{
  "type": "array",
  "title": "People",
  "x-titleTemplate": "{{ i1 }}) {{ value.name }}",
  "x-format": "nav-vertical",
  "x-arrayDeleteAll": true,
  "x-arrayFooterAdd": true,
  "x-arrayFooterDeleteAll": true,
  "items": {
    "type": "object",
    "title": "Person",
    "properties": {
      "name": {
        "title": "Name",
        "type": "string",
        "default": "German"
      }
    }
  },
  "default": [
    {
      "name": "Albert"
    },
    {
      "name": "Betti"
    }
  ]
}