Menu draft

WARNING

Experimental feature

Drupal JavaScript SDK relies on the drupal module Decoupled Menusopen in new window installed along with relevant patch.

Basic Usage

import { Drupal } from 'drupal-js-sdk'
import { DrupalMenu } from '@drupal-js-sdk/menu'
const api = new Drupal({baseURL: 'http://example.com'});
const menu = new DrupalMenu(api);

let menuTreeData = [];

// Fetch `main` menu in Drupal.
menu.getMenu('main')
    .then((data) => {
      menuTreeData = data;
    })
    .catch((error) => {
      // Handle error.
    })








 






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

The data returned from getMenu is processed and already converted to a tree structure. In case you would like to get the flat menu data as is returned from Drupal, you can use getMenuRaw method.

// Fetch `main` menu in Drupal.
menu.getMenuRaw('main')
    .then((res) => {
      menuData = res.data;
    })
    .catch((error) => {
        // Handle error. 
    }) 


 
 
 



1
2
3
4
5
6
7
8
Example data structure

Consider the following menu structure.

  • Home
  • About
  • Foo
    • Bar
    • Baz

For the above case menu tree data would resemble something like the following,

[
    {
      id: 'main.000',
      parentId: '0',
      name: 'Home',
      href: '/',
      level: 1,
      items: [],
    },
    {
      id: 'main.001',
      parentId: '0',
      name: 'About',
      href: '/about-us',
      level: 1,
      items: [],
    },
    {
      id: 'main.002',
      parentId: '0',
      name: 'Foo',
      href: '',
      level: 1,
      items: [
        {
          id: 'main.002.000',
          parentId: 'main.002',
          name: 'Bar',
          href: '',
          level: 2,
          items: [],
        },
        {
          id: 'main.002.001',
          parentId: 'main.002',
          name: 'Baz',
          href: '',
          level: 2,
          items: [],
        },
      ],
    },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43