Page with menubar

This is another sample page showing how a page can look with a menubar.

Displaying a menubar

The menubar gets its content from a data file in your site’s _data directory. Simply set the name of your data file in the page’s menubar setting in the frontmatter.

title: Page with menubar
subtitle: Demo page with a menubar
layout: page
show_sidebar: false
menubar: example_menu

You will probably want to disable the show_sidebar otherwise there will be little room for the page’s content.

Creating a menubar data file

Create a data file in the _data directory and use the following format (if using yml)

- label: Example Menu
  items:
    - name: Home
      link: /
    - name: Pages
      link: #
      items:
        - name: Page With Sidebar 
          link: /page-1/
        - name: Page Without Sidebar
          link: /page-2/
        - name: Page With Menubar
          link: /page-3/
    - name: Blog
      link: /blog/

Multiple menus

You may make multiple menus in the same file, separated by the label

- label: Menu Label
  items:
    - name: Example item
      link: /example-item/
- label: Second Menu Label
  items:
    - name: Parent Item
      link: /parent-item/
      items:
        - name: Sublink 
          link: /sublink/
        - name: Sublink 2
          link: /sublink2/
- label: Third Menu Label
  items:
    - name: Another example item
      link: /another-example-item/