Grav Page Linking - Grav

How to do Page Linking in Grav

Grav has many responsive linking options.Given below is a basic example of a Grav site's Pages directory. We will use the following directory as an example as shown in the image.
Common components of Grav link.
  • []:Specifies to write the text or alternate content that is linked. In HTML we use <a href=""> and </a> to place the content.

  • (): URL is placed in this bracket, which is directly placed after the square bracket.

  • ../: Indicates a move up by one directory.

There are 4 types of links used in the content as listed below:
  • Slug Relative

  • Directory Relative

  • Absolute

  • Remote

Slug Relative

Internal links are not limited to some names within your file/directory structure. Grav can pull slugs from both header and fallback directory name, This helps to create links easily as there is no need of remembering any specific filename but can remember a relevant slug. The grav's templating engine uses names of file to know which template to apply.
The following code gives you the result as shown below:
slug relative
In the above example you must move up a directory and load the default page that is located in the pages/01.home/02.nature/ directory from pages/01.home/ The file, does not have assigned slug, so Grav uses the directory name.
Next, you find a similar example, linking from pages/01.home/ to pages/, but when it loads the file, a slug will be assigned to the file of
The following code gives you the result as shown below:
black slug
Now, you will see the default slug folder name will be replaced with black slug in the header of

Directory relative

Destinations set relative is used to the current page which can be an image file or any other file as required. The location of the file is as important as that of the destination. If the file is moved while changing the path, the link can be broken. As long as a file remains consistent you can switch easily between a local development server and a live server with different domain name. Links should work without any issues.
You will point the link of your file directly by name, instead of its directory or slug. You can create a link from pages/01.home/ to pages/ use the command as shown below.
The following code gives you the result as shown below:
directory relative
Both the folders are moved up, as shown by ../../, and then at the bottom two folders, pointing directly to file.

Absolute links

It is similar to relative links except that they are relative too the root of the site. It is based in your /user/pages/ directory in Grav. Further, this can be done with two methods.
  • Slug Relative style

  • Directory Relative style

Slug Relative style: This is done similar to the slug relative type. It uses the directory name in the path. It eliminates the errors of order and changes later by breaking the link. It changes the number of the folder name at the start that leads in breaking of link.
Given below is an example of absolute link, the link opens with /. It specifies that absolute link is made in pages/01.home/ in the Slug style.
The following code gives you the result as shown below:
slug relative style
Directory relative style is more consistent when it is used with services like GitHub. They don't have the benefit of Grav's flexibility . Below you can see an example of an absolute link made to pages/01.home/ using Directory Relative style.


Remote links allows you to link directly to any file or document through its URL. There is no need to include your own site's content.
Below is an example, how to link to WisdomJobs page.
The following code gives you the result as shown below:

You can link directly to any URL , including secured HTTPS links.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Grav Topics