Manage routes and navigation

The folder structure of your Ontario.ca Frontend project plays an important role in configuring your application's routes, so you will want to organize your project with a clear hierarchy.

Creating routes

Ontario.ca Frontend automatically generates routes based on the structure of your source files. Ensure that your page files are organized appropriately within the src directory to reflect your desired URL structure.

src/|-- _data/|-- _includes/|-- assets/|-- english/|  |-- index.njk|  |-- about/|  |  |-- index.njk|-- francais/|  |-- index.njk|  |-- a-propos/|  |  |-- index.njk

Here we have two directories in our src directory, english and francais. english/index.njk will generate a URL of /english/, and francais/index.njk will generate a URL of /french/.

We've also nested a subdirectory under each: about and a-propos. about/index.njk will generate a URL of /english/about/, and a-propos/index.njk will do the same at /francais/a-propos/.

Managing navigation links

You can use standard HTML anchor tags in your layout templates to create navigation links.

src/_includes/app/sidebar.njk

<aside>  <ul>    <li><a href="/">Home</a></li>    <li><a href="/about/">About</a></li>  </ul></aside>

Dynamically generating navigation links

While using standard HTML anchor tags is an easy way to quickly link to a route in your application, it requires your links to be hard coded. This isn't ideal for layouts or components that you want to reuse across your application (such as creating a sidebar component that can be used on both English and French pages). For these cases, you can dynamically generate navigation items based on the content of your site.

Use the _data folder to create data files that define dynamic navigation items.

src/_data/navigation.json

{  "en": [      { "title": "Home", "url": "/" },      { "title": "About", "url": "/about" },    ],  "fr": [    { "title": "Accueil", "url": "/" },    { "title": "À propos", "url": "/a-propos" },  ]}

You can then load the navigation data in your layout template and generate the navigation links dynamically.

src/_includes/app/sidebar.njk

<aside>  {% for item in navigation[lang] %}    <a href="{{ item.url }}">{{ item.title }}</a>  {% endfor %}</aside>

When you build your Ontario.ca Frontend project, it will generate pages with dynamic navigation based on the specified language in the front matter of the page.

Handling 404 pages

You can create a custom 404 page to handle missing content gracefully. Create an 404.njk file in your src directory, or use a custom layout for 404 pages.