Scrivito.ChildListTag

Renders the list of child pages for a given page.

Copy
<Scrivito.ChildListTag />

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.
    Defaults to Scrivito.currentPage().
  • tag (String) (optional) – the name of the enclosing tag to use to wrap the generated list.
    Defaults to "ul".

  • renderChild: (Function) (optional) – a function that renders each child object.
    See below for the default behavior.

Basic usage

ChildListTag renders a list of child objects for a given page, for example:

Copy
<Scrivito.ChildListTag parent={ Scrivito.Obj.getByPath('/en') } />

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.currrentPage() as the parent page.

Customizing markup

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":

Copy
<Scrivito.ChildListTag tag="ol" />

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. 

Copy
<Scrivito.ChildListTag
    tag="div"        
    renderChild={ child => child.get('title') }
  />

If no renderChild function is provided, the default render function is used, which wraps each child in an "li" tag and links it to the corresponding page:

Copy
function renderChild(child) {  
  return (
    <li>
      <Scrivito.LinkTag to={ child }>
        { child.get('title') }
      </Scrivito.LinkTag>
    </li>
  );
}

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:

Copy
<Scrivito.ChildListTag className="nav" />

Full example

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.

Copy
// src/Components/navigation.jsx

import * as React from 'react';
import * as Scrivito from 'scrivito';

function renderChild(child) {
  let className = '';

  if (child.id === Scrivito.currentPage().id) {
    className = 'active';
  }

  return (
    <div className={ className }>
      <Scrivito.LinkTag to={ child }>
        { child.get('title') }
      </Scrivito.LinkTag>
    </div>   
  );
}

function Navigation() {
  return (
    <Scrivito.ChildListTag    
        parent={ Scrivito.Obj.root() }
        className="nav"        
        renderChild={ renderChild }
      />  
  );
}

export default Scrivito.connect(Navigation);

Then we render the navigation inside a simple application, next to the current page and the error components:

Copy
import * as React from 'react';
import * as Scrivito from 'scrivito';
import Navigation from 'src/Components/navigation.jsx';

function Application() {
  return (    
    <div>
      <Navigation />
      <Scrivito.CurrentPage />
      <Scrivito.NotFoundErrorPage />
    </div>  
  );
}

Finally, we mount the application component to the DOM:

Copy
ReactDOM.render(<Application />, document.getElementById('application'));