Children

Use the children shortcode to list the child pages of a page and the further descendants (children’s children). By default, the shortcode displays links to the child pages.

Usage

Parameter Default Description
page current Specify the page name (section name) to display children for
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
description “false” Allows you to include a short text under each page in the list. When no description exists for the page, children shortcode takes the first 70 words of your content. Read more info about summaries on gohugo.io
depth 1 Enter a number to specify the depth of descendants to display. For example, if the value is 2, the shortcode will display 2 levels of child pages. Tips: set 999 to get all descendants
sort ordersectionsby Sort children by weight, to sort on menu order - title, to sort alphabetically on menu label. If not set it is sorted by the ordersectionsby setting of the site and the pages frontmatter

Demo

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

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 1-1

This is a demo child page

page 1-1-2

This is a demo child page

page 1-1-3

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

page 3-1

This is a plain page test nested in a parent

{{% children containerstyle="div" style="div" depth="999" %}}
page X
page 1
page 1-1
page 1-1-2
page 1-1-2-1
page 1-1-2-2
page 1-1-3
page 2
page 3
page 3-1