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"
)}}

Parameter

NameDefaultNotes
containerstyleulChoose the style used to group all children. It could be any HTML tag name.
styleliChoose the style used to display each descendant. It could be any HTML tag name.
showhiddenfalseWhen true, child pages hidden from the menu will be displayed as well.
descriptionfalseWhen 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.
depth1The 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.
sortautoThe 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

Examples

All Default

{{% children  %}}

With Description

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

Infinite Depth and Hidden Pages

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

Heading Styles for Container and Elements

{{% 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 (headless)

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

Divs for Group and Element Styles

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

Subsections of Children

page X

This is a plain demo child page.

Subsections of page 1

Subsections of page 1-1

page 1-1-1 (hidden)

This is a hidden demo child page. This page and all its children are hidden in the menu, arrow navigation and children shortcode as long as you aren’t viewing this page or its children directly.

Subpages of this page

Subsections of page 1-1-1 (hidden)

Subsections of page 1-1-1-1

page 1-1-1-1-1 (hidden)

This is a hidden demo child page. This page and all its children are hidden in the menu, arrow navigation and children shortcode as long as you aren’t viewing this page or its children directly.

Subpages of this page

Subsections of page 1-1-1-1-1 (hidden)

page 1-1-1-1-1-1

This is a non-hidden demo child page of a hidden parent page.

Subsections of page 1-1-2 (headless)

page 2

This is a demo child page with no description.

So its content is used as description.

Subsections of page 3

page 4 (hidden)

This is a hidden demo child page. This page and all its children are hidden in the menu, arrow navigation and children shortcode as long as you aren’t viewing this page or its children directly.