Menu items

Last updated on 13-May-2020 by Jakob Jakobsen Boysen , Thomas P. Boesen

On this page

Definition
Example

With this plugin you can add extra menu items to certain menus in Scifeon. Currently it is possible to add extra menu items to the main menu.

Definition

Menu items are defined in the contributions.json file. A menu item is described by the following JSON:

{
  "id":       "string",     
  "text":     "string",   
  "rank":     number,     
  "routeId":  "string",
  "html":     "string",
  "uri":      "string"
}

id Used for referencing.
text The text displayed in the menu.
rank Where the item should be placed. The rank will be added as a data attribute, e.g. this is the Frontpage-item HTML from Scifeon:
```
<li data-rank="100"> 
  <a href="/#/">Frontpage</a>
</li>
```
Copyhtml
Use this for deciding what value to give the rank.
routeId The route to generate an URL to. See Routes.
html Raw HTML. If this is set text will be ignored.
uri Raw URL.

Note: routeId, uri and html are mutually exclusive and one of them need to be set.

Example

The following snippet adds three menu items to the main menu, contributions.json:

{
...
  "menu": {
    "main": [
      {
        "text": "Simple item",
        "rank": 100,
        "routeId": "customRouteId"
      },
      {
        "html": "<a href=\"https://docs.scifeon.com\" target=\"_blank\">Sci Docs</a>"
      },
      {
        "text": "Sci Docs",
        "uri": "http://docs.scifeon.com"
      }
    ]
  }
}

On this page

Definition
Example