Static CMS exposes a window.CMS global object that you can use to register external links or links custom pages, via registerAdditionalLink. The links are displayed at the bottom of the navigation menu in the order they are registered.

React Components Inline

The registerAdditionalLink requires you to provide a React component. If you have a build process in place for your project, it is possible to integrate with this build process.

However, although possible, it may be cumbersome or even impractical to add a React build phase. For this reason, Static CMS exposes some constructs globally to allow you to create components inline: h (alias for React.createElement) as well some basic hooks (useState, useMemo, useEffect, useCallback).

Params

registerAdditionalLink takes an AdditionalLink object with the following properties:

Options

Available options for each additional link are:

Examples

External Links

CMS.registerAdditionalLink({
  id: 'example',
  title: 'Example.com',
  data: 'https://web.archive.org/web/20240224001641/https://example.com',
  options: {
    icon: 'page',
  },
});

const CustomPage = () => {
  return h('div', {}, 'I am a custom page!');
};

CMS.registerAdditionalLink({
  id: 'custom-page',
  title: 'Custom Page',
  data: CustomPage,
  options: {
    icon: 'page',
  },
});

const CustomPage = () => {
  return <div>I am a custom page!</div>;
};

CMS.registerAdditionalLink({
  id: 'custom-page',
  title: 'Custom Page',
  data: CustomPage,
  options: {
    icon: 'page',
  },
});

import type { FC } from 'react';

const CustomPage: FC = () => {
  return <div>I am a custom page!</div>;
};

CMS.registerAdditionalLink({
  id: 'custom-page',
  title: 'Custom Page',
  data: CustomPage,
  options: {
    icon: 'page',
  },
});