4. Add Menus

Add pages or links to the main, social, docs, or footer menu. Set page level navigation.

On this page

Navigation Mobile Navigation Structure Mobile

Open ./config/_default/menus/menus.en.toml in your code editor.

Global navigation

Add to main menu

  1. [[main]]
  2.   name = "Docs"
  3.   url = "/docs/prologue/introduction/"
  4.   weight = 10
  6. [[main]]
  7.   name = "Blog"
  8.   url = "/blog/"
  9.   weight = 20
  11. [[main]]
  12.   name = "Community"
  13.   url = "https://github.com/h-enk/doks/discussions"
  14.   weight = 50

Add to social menu

👉

Doks uses Feather Icons

  1. [[social]]
  2.   name = "Twitter"
  3.   pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-twitter\"><path d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"></path></svg>"
  4.   url = "https://twitter.com/gethyas"
  5.   weight = 10
  7. [[social]]
  8.   name = "GitHub"
  9.   pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-github\"><path d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22\"></path></svg>"
  10.   url = "https://github.com/h-enk/doks"
  11.   post = "v0.1.0"
  12.   weight = 20

Section navigation

Add to docs menu

Add first level menu items (make sure the identifiers are unique):

  1. [[docs]]
  2.   name = "Prologue"
  3.   weight = 10
  4.   identifier = "prologue"
  5.   url = "/docs/prologue/"
  7. [[docs]]
  8.   name = "Recipes"
  9.   weight = 20
  10.   identifier = "recipes"
  11.   url = "/docs/recipes/"
  13. [[docs]]
  14.   name = "Help"
  15.   weight = 50
  16.   identifier = "help"
  17.   url = "/docs/help/"

Add second level menu items in the frontmatter of a documentation page, by referencing a first level menu item (using it’s identifier):

  1. ..
  2. menu:
  3.   docs:
  4.     parent: "prologue"
  5. weight: 010
  6. ..

Page navigation

Set levels

The On this page (Table of Contents) section is automatically generated. In ./config/_default/markup.toml, set the levels you’d like to show (default only <h2> and <h3> headings are shown):

  1. [tableOfContents]
  2.   endLevel = 3
  3.   ordered = false
  4.   startLevel = 2
  1. [[footer]]
  2.   name = "Privacy"
  3.   url = "/privacy-policy/"
  4.   weight = 10