Motif Menus

A collection of navigation bars, tables of content and sidebars.

Usage

To use the component, import it from the Motif CDN:

import { NavigationBar } from "https://cdn.motif.land/motifmenus@0.0.23"

Components

Navigation bar

Options

Prop	Description
items	The list of links to display in the navigation bar. Each item should contain a title and href key.
buttonTitle	A label for a CTA button (optional).
buttonHref	A link for a CTA button (optional).
Icon	An icon component (optional).

Sidebar

Table of contents

Generates a table of content based on the headings (h2 and h3) in your page.

Default

Invoking the components without parameters will go through all the h2 and h3 elements in your page, and generate a menu from them.

<TOC />

Specify target

By specifying a contentId, you can indicate which container to look at. For instance, you may want to exclude headings present in a template, and only look at the content of your current MDX page. We recommend you set a content id in a template for the container that wrap children. For instance, your template could look like so:

export const Template = ({ children }) => {
  return <div>
    <h2>My blog</h2>
    <TOC contentId="page-container" />
    <div id="page-container">
      {children}
    </div>
  </div>
}

Notice the including of the TOC component, so that it appears on all pages. Since we provided a contentId, which is the container that wraps the MDX page content, the table of contents will exclude the opening <h2>My blog</h2> heading.

Headings to include

By default, the h2 and h3 elements in your pages are used to generated the table of contents. You can change that by using the headings property, giving the indices of the headings to look for. For instance, if we want to look at h1 and h2 headings instead of the default h2 and h3, we can do so as follows:

<TOC headings={[1, 2]} />

Custom theme

By providing a theme object, you can specify how the table of content should look.

export const theme = {
  item: 'font-serif text-sm py-1.5 px-2 rounded transition no-underline',
  itemActive: 'font-semibold text-fuchsia-500 bg-fuchsia-50 no-underline',
  itemInactive: 'text-gray-600 hover:text-gray-900 hover:bg-gray-50 no-underline',
  lineActive: '',
  lineInactive: ''
}

<TOC theme={theme} />