Components and libraries

Typically, API documentation from the backend would be enough, but we want to make it as easy as possible to leverage the power of Decoupled Menus. So, there are a few packages that can easily be added to any project to get you started right away.

Decoupled Menu Parser

Decoupled Menu Parser is a JavaScript library for parsing menus served by Drupal's menu linkset endpoint. See the decoupled menus documentation for more information about this endpoint.

Installation

Install the package via npm:

$ npm i @drupal/decoupled-menu-parser

Usage

import { denormalize, MenuInterface, NormalizedMenuInterface } from '@drupal/decoupled-menu-parser';

denormalize

Denormalizes a set of links into an instance of a Menu.

E.g. usage

import { denormalize } from "@drupal/decoupled-menu-parser";

const main = async () => {
  const mainMenu = await fetch(
    "https://dev-decoupled-drupal-contrib.pantheonsite.io/system/menu/main/linkset"
  )
    .then((response) => response.json())
    .then((data) => {
      console.log("Raw menu data", data);
      return denormalize(data);
    })
    .catch((error) => console.error(error));

  console.log("Denormalized Menu Data", mainMenu);

  const parsedMenuTree = mainMenu[0].tree;

  document.getElementById("app").innerHTML = `Parsed Menu Tree:
  <pre>${JSON.stringify(parsedMenuTree, null, 2)}</pre>`;
};

main();

View an interactive example on Code Sandbox.

Linkset

Linkset is a serialization and utility library for application/linkset+json documents that is used by the decoupled-menu-parser package. This package is available for anyone who needs to manipulate linkset data directly, but may not be necessary if you're already using decoupled-menu-parser as a direct dependency.

Installation

Install the package via npm:

$ npm i @drupal/linkset

Usage

import { denormalize, parse } from '@drupal/linkset';

Function denormalize

Denormalizes a set of links into an instance of a Linkset.

E.g. usage

import { denormalize } from "@drupal/linkset";

const main = async () => {
  const linkset = await fetch(
    "https://dev-decoupled-drupal-contrib.pantheonsite.io/system/menu/main/linkset"
  )
    .then((response) => response.json())
    .then((data) => {
      console.log("Raw linkset data", data);
      return denormalize(data);
    })
    .catch((error) => console.error(error));

  console.log("Denormalized Linkset Data", linkset);

  document.getElementById("app").innerHTML = `Denormalized Linkset Data:
  <pre>${JSON.stringify(linkset, null, 2)}</pre>`;
};

main();

View an interactive example on Code Sandbox.

Function parse

Parses an application/linkset+json document into a Linkset instance.

The difference between denormalize and parse is the input parameter. parse expects a JSON string, while denormalize expects an object.

E.g. usage

import { parse } from '@drupal/linkset';
// Fetch the linkset data using your custom logic.
const linksetDataString = custom_function_to_fetch_linkset_data_as_string();
// Use the `parse` utility to convert the data.
const linkset = parse(linksetDataString);

TypeScript Support

For those who are developing using TypeScript, you can import the available types as shown below.

E.g. usage

import {
    LinkInterface,
    LinksetInterface,
    NormalizedLinksetInterface,
    NormalizableLinksetInterface } from '@drupal/linkset';

<gdwc-menu>

The Generic Drupal Web Components project provides a menu custom element that can be styled and customized. 

Usage via NPM

Components can be installed via NPM (View example on Codesandbox):
npm i @gdwc/components

And imported in your code via ES imports:
import '@gdwc/components/menu';

Usage via CDN

Alternatively you can load the component from a CDN and include it in your HTML file as a script tag. (View example on Codepen)
<script type="module">
import gdwcComponents from 'https://cdn.skypack.dev/@gdwc/components';
</script>

Using the custom element in markup

Once imported, <gdwc-menu> can be rendered using markup similar to:

<gdwc-menu 
  branding="Menu Heading"
  baseUrl="https://dev-decoupled-drupal-contrib.pantheonsite.io" 
  menuId="main" 
  theme="horizontal">
</gdwc-menu>

The component attributes are defined as follows:

 <gdwc-menu> can be customized in many other ways. Full documentation is available in the Generic Drupal Web Components storybook.