[
  {
    "type": "block",
    "title": "File",
    "items": [
      {
        "type": "block",
        "direction": "col",
        "items": [
          {
            "value": "File",
            "id": "file",
            "icon": "mdi mdi-file-outline",
            "size": "small"
          },
          {
            "value": "Folder",
            "id": "folder",
            "icon": "mdi mdi-folder-outline",
            "size": "small"
          }
        ]
      },
      {
        "id": "add",
        "value": "Add",
        "icon": "mdi mdi-plus",
        "size": "medium",
        "ribbonHeight": "medium"
      }
    ]
  },
  {
    "type": "block",
    "title": "Actions",
    "items": [
      {
        "id": "paste",
        "value": "Paste",
        "icon": "mdi mdi-content-paste",
        "size": "medium"
      },
      {
        "type": "block",
        "direction": "col",
        "items": [
          {
            "value": "Copy",
            "id": "copy",
            "icon": "mdi mdi-content-copy",
            "size": "small"
          },
          {
            "value": "Cut",
            "id": "cut",
            "icon": "mdi mdi-content-cut",
            "size": "small"
          }
        ]
      }
    ]
  },
  {
    "type": "block",
    "title": "View",
    "direction": "col",
    "items": [
      {
        "id": "view",
        "type": "selectButton",
        "css": "select-width",
        "icon": "mdi mdi-view-headline",
        "value": "Compact List",
        "items": [
          {
            "id": "compact-list",
            "icon": "mdi mdi-view-headline",
            "value": "Compact List",
            "demoId": "selectButton"
          },
          {
            "id": "list",
            "icon": "mdi mdi-view-list",
            "value": "List",
            "demoId": "selectButton"
          },
          {
            "id": "grid",
            "icon": "mdi mdi-apps",
            "value": "Grid",
            "demoId": "selectButton"
          }
        ]
      },
      {
        "type": "block",
        "direction": "row",
        "id": "sorting",
        "items": [
          {
            "id": "asc",
            "icon": "mdi mdi-sort-ascending",
            "twoState": true,
            "group": "sorting",
            "demoId": "group"
          },
          {
            "id": "desc",
            "icon": "mdi mdi-sort-descending",
            "twoState": true,
            "group": "sorting",
            "demoId": "group"
          },
          {
            "id": "sort",
            "icon": "mdi mdi-sort",
            "twoState": true,
            "group": "sorting",
            "demoId": "group"
          }
        ]
      }
    ]
  },
  {
    "type": "block",
    "direction": "col",
    "title": "Filter",
    "items": [
      {
        "id": "search",
        "type": "input",
        "placeholder": "Search",
        "icon": "mdi mdi-magnify",
        "css": "input-white"
      },
      {
        "type": "block",
        "direction": "row",
        "items": [
          {
            "icon": "mdi mdi-file-outline",
            "twoState": true,
            "demoId": "twoState"
          },
          {
            "icon": "mdi mdi-folder-outline",
            "twoState": true,
            "demoId": "twoState"
          }
        ]
      }
    ]
  },
  {
    "type": "block",
    "title": "Progress",
    "items": [
      {
        "html": "<div id='preloader'><div id='loader'></div></div >",
        "size": "auto"
      }
    ]
  },
  {
    "type": "spacer"
  },
  {
    "type": "block",
    "title": "Settings",
    "items": [
      {
        "id": "account",
        "type": "imageButton",
        "src": "https://snippet.dhtmlx.com/codebase/data/ribbon/02/img/ava.png",
        "value": "Kate",
        "css": "round-avatar",
        "size": "medium"
      },
      {
        "type": "separator"
      },
      {
        "type": "block",
        "direction": "col",
        "items": [
          {
            "id": "settings",
            "icon": "mdi mdi-settings",
            "value": "Settings"
          },
          {
            "type": "button",
            "color": "danger",
            "size": "medium",
            "full": true,
            "id": "logout",
            "icon": "mdi mdi-logout",
            "value": "Logout",
            "css": "ribbon-button"
          }
        ]
      }
    ]
  }
]