Section menu

A menu is specific to a section.

The menu is optional but it helps you:

• Group your content
• Display a menu when visiting a page on the related section
• Optionally: Provide navigation buttons

Define a menu#

The menu of a section is defined by creating a menu.json file at the top level of your section.

docs
├── blog
└── documentation
    └── menu.json

Here you have 2 sections but only documentation has a menu.

menu.json#

The menu.json consists in a list of MenuItem which can be a string or an object.

type MenuItem =
    | Page of MenuItemPage
    | List of MenuItemList
    | Link of MenuItemLink

type Menu = MenuItem list

Mastering your menu.json#

Your menu.json supports different items:

• Page: link to a page hosted on your site
• Link: link to an arbitrary URL
• Section: group several MenuItem

Page: Link to a page#

Page, allows you to link to a page from your source folder.

You need to provide the relative path from the source folder.

Example:

docs
├── blog
└── documentation
    └── page1.md
    └── page2.md
    └── menu.json

File: docs/documentation/menu.json

[
    "documentation/page1",
    "documentation/page2",
]

The title front-matter will be used as the text to display in the menu.

Link: link to any page#

Link, allows you to link to any page (internal or external) to your website.

Properties

Name	Required	Description
type	X	Always set to link
label	X	Text to display in the menu
href	X	URL to link to

Example:

[
    {
        "type": "link",
        "label": "Fable",
        "href": "http://fable.io"
    }
]

Section: organize your menu#

Section, allows you to organize your menu in different sections.

Properties

Name	Required	Description
type	X	Always set to section
label	X	Text to display in the menu
items	X	List of MenuItems

Example:

[
    "documentation/page-1",
    {
        "type": "section",
        "label": "Guides",
        "items": [
            "documentation/guides/guide-1",
            {
                "type": "section",
                "label": "Advanced",
                "items": [
                    "documentation/guides/advanced/guide-1"
                ]
            }
        ]
    }
]