# Children :: Hugo Relearn Theme
List the child pages of a page
Author: Sören Weber

# Children

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

- page X
- page 1
- page 2
- page 3

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

### Parameter

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.

## Examples

### All Default

    {{% children  %}}

- page X
- page 1
- page 2
- page 3

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

- page X
- page 1
  - page 1-1
    - page 1-1-1 (hidden)
      - page 1-1-1-1
        - page 1-1-1-1-1 (hidden)
          - page 1-1-1-1-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
- page 4 (hidden)

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

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

page X
page 1
page 1-1
page 1-1-2
page 1-1-3
page 2
page 3
page 3-1