Anchor-menu

Documentation

Anchor Menu is used to get a table of contents navigation on the current page. It sits to the right side of the page on larger screens and disappears on smaller once.

To get an anchor menu on the page you simply need to add it your _meta.mjs file and specify what type of elements that should be present in the menu. Default is all h2 tags on the page.

Code examples

Example of how the _meta.mjs looks like on this page.

// import meta and default layout.
import heroImg from '/public/images/components/components-hero.png';

const baseUrl = '/ds/anchor-menu';
export const meta = {
  baseUrl,
  tabs: [
    {
      label: 'Back to DS docs',
      path: '/ds'
    }
  ],
  related: [],
  hero: {
    image: heroImg,
    title: 'Anchor-menu',
    subTitle: 'Documentation'
  },
  visibleAnchor: ['h2'],
  docs: {
    a11y: true,
    ux: true,
    dev: true,
    status: 'Ready'
  }
};

Then in your index.mdx you import the _meta.mjs file and if needed make som overrides depending on the page you are on. Then pass it to the layout as shown in this abbreviated example from this index.mdx file.

// Imports
import DefaultLayout from "@components/content/documentation/layouts";
import { meta as baseMeta } from './_meta.mjs';

export const meta = {
  ...baseMeta,
  title: 'Anchor-menu',
  type: 'Documentation',
  author: 'Johan Magnusson',
  keywords: 'DS Anchor-menu',
  pageTitle: 'Anchor-menu - Documentation',
  hero: { ...baseMeta.hero, image: heroImg},
}
...
  mdx and react content
...

export default ({ children }) => <DefaultLayout meta={meta}>{children}</DefaultLayout>