Draft: Nested collections

Is your feature request related to a problem? Please describe.

A site’s page hierarchy can require pages and groups of pages to be created in a nested structure. A content editor working with such a site may need to:

• create new pages at various levels of the hierarchy
• create entirely new hierarchy levels within existing levels

Netlify CMS allows new entries to be created in folder type collections, but all entries are more or less siblings in the collection folder. Collections must be added to the CMS configuration for each level of hierarchy.

Describe the solution you’d like

Known use cases involve a single collection description requiring hierarchy only - not distinctly defined collections within other collections. Satisfying this feature request should be doable by simply “enabling nesting” on a folder collection.

• Allow a collection to contain nested directories
• Allow nested directories to be created through the CMS UI
• Allow entries and nested directories to exist in the same parent directory

Configuration

• Activate by setting an allow_nesting property to true on a collection
• An optional max_depth setting limiting how deep the hierarchy can go
• max_depth should default to something sane like 3
• max_depth should have an internally enforced and documented limit, maybe 5
• label_singular can apply to all nested directories

UI

• Collections with nested directories should show as dropdowns in the left sidebar
• The dropdown should only show directories, not entries
• A single folder can be selected at a time
• Only entries directly located in the currently selected folder are visible in the main entries pane
• An “add” button should show underneath the last nested directory at any level (when expanded)
• When clicked, a new directory icon is created in its place with an input for naming the new folder

Stretch Goals

• Drag and drop directory movement in the tree (perhaps w/ react-sortable-tree)

Implementation Considerations

• Nested entries accessed directly via the /edit/ route, the entryName segment currently refers to the filename, but should refer to the path from collection folder to file for nested collections

Open Questions

• We need a way to rename and delete directories in the UI
• Creating and editing directories can often result in URL changes, admins will need a way to guard this functionality
• How do we avoid using raw folder names in the left sidebar? Nested content structures often have a _index.md or index.md file at each level, ideally we could pull values from there for string replacements in the label and description fields.
• If index.md style files start playing an important role, we need a way to require them in new directories

Describe alternatives you’ve considered

• Not supporting nested directory creation
• Supporting distinct collections nested with other collections
• Adding a config UI to the CMS (#341) and allowing collection creation there

Additional context

Related to: #513

[alex-shpak]

Hi! @erezrokah Thank you for your huge effort, not having nested collections was stopping me from using netlifycms.

Question in regard file structure mentioned above, would structure like that work?

level1/
  _index.md
  level2/
     _index.md
     level3.md
     otherPage.md

A mix of regular pages and _index.md pages, (Hugo in this case). Or every page must be a folder with _index.md?

[joshdcomp]

Voted, but also wanted to voice support for this feature…we’re doing quite a bit of hoop-jumping to get around the limitation of no nested dirs in folder collections