Children

The children shortcode lists the child pages of the current page and its descendants.

Usage

While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.

{{% children sort="weight" %}}

{{ partial "shortcodes/children.html" (dict
  "page" .
  "sort" "weight"
)}}

Name	Default	Notes
containerstyle	`ul`	Choose the style used to group all children. It could be any HTML tag name.
style	`li`	Choose the style used to display each descendant. It could be any HTML tag name.
showhidden	`false`	When `true`, child pages hidden from the menu will be displayed as well.
description	`false`	When `true` shows a short text under each page in the list. When no description or summary exists for the page, the first 70 words of the content is taken - read more info about summaries on gohugo.io.
depth	`1`	The depth of descendants to display. For example, if the value is `2`, the shortcode will display two levels of child pages. To get all descendants, set this value to a high number eg. `999`.
sort	`auto`	The sort criteria of the displayed list. - `auto` defaults to `ordersectionsby` of the pages frontmatter or to `ordersectionsby` of the site configuration or to `weight` - `weight` - `title` - `linktitle` - `modifieddate` - `expirydate` - `publishdate` - `date` - `length` - `default` adhering to Hugo’s default sort criteria

{{% children  %}}

{{% children description="true" %}}

page X
This is a plain page test, and the beginning of a YAML multiline description...
page 1
This is a demo child page
page 2
This is a demo child page with no description. So its content is used as description.
page 3
This is a demo child page

{{% children depth="999" showhidden="true" %}}

{{% children containerstyle="div" style="h2" depth="3" description="true" %}}

This is a plain page test, and the beginning of a YAML multiline description...

This is a demo child page

This is a demo child page

This is a demo child page

This is a demo child page

This is a demo child page with no description. So its content is used as description.

This is a demo child page

This is a plain page test nested in a parent

{{% children containerstyle="div" style="div" depth="3" %}}

page 1-1-2 (headless)