Navigation

You can define a navigation object in the site settings. This allows you to create dropdown drop down menus and their children.

The navigation is defined in the Appearance > Navigation tab of your site settings. It should be an array of objects, with each object defining a section of the navigation. Most apps may only have 1 navigation section.

KeyTypeDescription

sectionLabel

string

This label describes what the menu section context is. It is not selectable.

subs

array

This is a dropdown style parent menu that will hold sub menus. BetterForms looks to see a subs key and if present will consider this the parent.

Subs Array

At the base of the navigation menu section, the subs array of objects should contain your list of menu items. Further subs keys beyond here will create sub-menus.

KeyTypeDescription

label

string

This label is the text area of each menu item

subs

array

This is a dropdown style parent menu that will hold sub menus. BetterForms looks to see a subs key and if present will consider this the parent.

path

string

navigational sub path e.g.: /forms/123 Use this to gain direct access to another part of your app. Alternatively, you can use a path action.

actions

array

If a navigation item has an actions key then it is considered an actions type. The actions[ ] array can contain several actions that are chained together and passed to the actions processor.

visible

boolean

{optional} Controls if item is visible. This key will also accept a visible_calc function for conditional visibility, but the scope of the function is bound to the entire site instead of a specific page.

html

string

If key present, then the HTML value is inserted as the navigation menu item

Element Type Order

The navigation parser classifies the navigation elements in the following hierarchy:

  • actions if key present, item treated as action trigger only

  • path if path key present, item handled as regular router link

  • subs If key present , item hand as a sub menu

  • html If key present, item is handled as html

Examples

// Full Navigation example
[
  {
    "sectionLabel": "Menu",
    "subs": [
      {
        "label": "Home",
        "icon": "fa fa-home",
        "path": "/dash"
      },
      {
        "label": "Some Form",
        "icon": "fa fa-check-square-o",
        "path": "/form/123-12-312-3123"
      },
      {
        "label": "A Dropdown Menu",
        "icon": "fa fa-car",
        "subs": [
          {
            "icon": "fa fa-car",
            "label": "Some Form",
            "path": "/dash"
          },
          {
            "icon": "fa fa-fw fa-play",
            "label": "Show Alert",
            "actions": [
              {
                "action": "showAlert",
                "options": {
                  "title": "Hello World!",
                  "text": "This is the Alert body, you will take to the dash",
                  "type": "success"
                }
              }
            ]
          },
          {
            "icon": "fa fa-fw fa-list-ol",
            "label": "Show Modal",
            "actions": [
              {
                "action": "showModal",
                "options": {
                  "body": "This model has a second action, you willl be taken to the /dash",
                  "icon": "success",
                  "options": {},
                  "overlayTheme": "dark",
                  "text": "This is a Modal"
                }
              },
              {
                "action": "path",
                "options": {
                  "path": "/dash"
                }
              }
            ]
          }
        ]
      }
    ]
  }
]

Last updated