Renders the list of child pages of a given page.
Child lists are used to display a CMS object’s subpages as a navigation. Whether a page is a subpage of another page depends on the respective path properties of these pages. For example, the page whose path is “/en/about” is a subpage (child object) of the page whose path is “/en”.
This component attaches a context menu to such navigations, enabling editors to modify them (add or sort pages).
The order of the child pages is defined by the childOrder attribute of the parent page. This attribute is assumed to be of the referencelist type. If it’s missing in the corresponding page class definition, then the children are ordered randomly, and it will not be possible for editors to adjust this order.
Props
parent (Obj) (optional) – the page whose child pages should be rendered.Scrivito.currentPage().tag (String) (optional) – the name of the enclosing tag to use to wrap the generated list.renderChild: (Function) (optional) – a function that renders each child object.ChildListTag renders a list of child objects for a given page, for example:
By default, this renders a <ul> element containing the children of the page whose path is “/en”, wrapping each child in an <li> element and linking it to the corresponding child object. If the parent object is not explicitly specified, then the component uses the page returned by Scrivito.currentPage() as the parent page.
The speed at which a page is displayed largely depends on how many CMS objects need to be loaded for this. To keep this number low, it is best to avoid rendering secondary navigations in advance, to use a finer grained search instead of filtering search results, etc.
The resulting markup can be customized using the tag and renderChild props. The tag prop specifies the tag name of the outer HTML list element, which defaults to <ul>:
The renderChild function is used for rendering each individual child. When rendering the children, the component passes each child as an argument to the provided function and expects the function to return a React component.
If no renderChild function is provided, the default render function is used, which wraps each child in an <li> element and links it to the corresponding page:
Props specified in addition to the ones above are rendered as attributes of the resulting outer tag, so passing in a prop named className would let you apply CSS:
Here is an example of a simple Scrivito application that uses a ChildListTag component to render a navigation.
First, we create the component for the navigation, which renders the children of the homepage (in this example the page with the root path). The enclosing tag is given the “nav” CSS class. If the current page is part of the navigation, it is highlighted using the “active” CSS class.
Then we render the navigation inside a simple application, next to the current page and the error components:
Finally, we mount the application component to the DOM: