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
  "context" .
  "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	see notes	The sort order of the displayed list. If not set it is sorted by the `ordersectionsby` setting of the site and the pages frontmatter - `weight`: to sort on menu order - `title`: to sort alphabetically on menu label.

{{% 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" %}}