Motif Menus

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


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

import { NavigationBar } from ""


Code editor
With Button
Code editor
Custom style
Code editor


itemsThe list of links to display in the navigation bar. Each item should contain a title and href key.
buttonTitleA label for a CTA button (optional).
buttonHrefA link for a CTA button (optional).
IconAn icon component (optional).
Code editor
Custom theme
Code editor
Nested items
Code editor
All Expanded
Code editor

Table of contents

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


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">

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} />