Can I generate navigation from folder structure with Jekyll?

Question

I have a folder hierarchy like this:

movie scripts/
    Independence Day.md
    Alien.md
    The Omega Man.md
books/
    fiction/
        Dune.md
        Childhood's End.md
    nonfiction/
        Unended Quest.md
software/
    Photoshop.md
    Excel.md

You get the idea.

My goal is to use Jekyll to generate a static non-blog site that lets me browse HTML versions of all my Markdown files. So the navbar would have Movie Scripts, Books, and Software on it. Clicking Books would unfurl two submenus, Fiction and Nonfiction, and clicking one of those would show all pages in that folder.

I've read Jekyll's documentation and watched the Pluralsight course on it, and I know how to render pages from a pages folder... but I can't quite work out how to create navigation from this directory structure.

Could anyone give me some tips? Is this something Jekyll natively supports, or will I have to write something that generates the output myself? Where do I start with this?

Your question is too large. There is many way to build a menu and I think you'll have to make some tries with articles like christianspecht.de/2014/06/18/… or thinkshout.com/blog/2014/12/creating-dynamic-menus-in-jekyll and come back here with your implementation problems. — David Jacquel
I really like the Thinkshout article mentioned above which seems to describe a great method for generating dynamic menus (with multiple levels) from your file structure. I like how new pages get automatically added to the menu, no messing with data files. Perhaps someone could summarize the article into an answer here. — Simon East

Maria Coding Maria Coding · Accepted Answer · 2015-12-15T18:46:19

I'm sure there will be many approaches, but I would use Jekyll collections.

If is your first time, I will be very detailed:

Configure Collections on your _config.yml file

collections:
  movie-scripts:
    output: true

  books:
    output: true

  software:
    output: true

Add folders to the root of the project directory (same name as each one of the collections)
```
_movie-scripts
_books
_software
```

Create subfolder for each categorie. For e.g.:

_movie-scripts/sci-fi
_books/fiction
_software/Jekyll

Add the markdown files to each of the collection’s subfolders.

Note: You should use also the Front-Mater to create categories that you might need to filter or search in the future.

Add a folder _data and create 3 YAML files with all the data for your movie-scripts, books and software. For e.g the movie-scripts.yml:

- title: Back to the Future
  image-path: /images/movie-scripts/back-to-the-future.jpg
  url: http://www.imdb.com/title/tt0088763/
  short-description: This is a 1980s sci-fi classic about traveling through time
  year: 1980
  categorie: sci-fi

- title: Star Wars
  image-path: /images/movie-scripts/start-wars.jpg
  url: http://www.imdb.com/title/tt0076759/
  short-description: Star Wars is an American epic space opera franchise centered on a film series created by George Lucas
  year: 1977
  categorie: sci-fi

Create 3 HTML's pages to access your 3 collections (movie-scripts, books and software). For e.g. the movie-scripts, the 10 most recent additions to your site:

---
layout: page
permalink: /movie-scripts/top-ten/
---
{% for movie in site.data.movie-scripts limit:10 %}
    <li>
            <img src="{{ movie.image-path }}" alt="{{ movie.title }}"/>
        <a href="{{ movie.url }}">{{ movie.title }}</a>
        <p>{{ movie.short-description }}</p>
        <p>{{ movie.year }}</p>
        <p>{{ movie.categorie }}</p>
     </li>
{% endfor %}

Advice: If this is your first time, do baby steps. Try to do the first colection first, step by step, run the Jekyll server at each time and see if works, go to the next step...

Let me know if it help you, please!

Can I generate navigation from folder structure with Jekyll?

1 Answers