Streaming live at 10am (PST)

How to create nested routes on dynamic collections?

I need to create a nested route for a collection to split up it’s page data.

For example, /jobs/software-engineer goes to /jobs/software-engineer/apply where “software-engineer” is dynamic to the collection.

How would I do this?

Not trying to be rude (just pointing out for you), but this is currently not possible.

Seems like the above two can be merged into one.

Yeah, seems like everything I try to do isn’t quite implemented yet… I’m slowly becoming impatient.

I wish I could do something about it :cry:

It’s not even for me here, it’s the fact that I feel bad for my client who isn’t getting the value they need. I really hope Webflow can step up their game and start shipping more of these features.

1 Like

It’s not perfect, but I was able to create a somewhat dynamic/nested page using query parameters. It just hides the elements on query parameters. Might help someone…

In this case, a job description page just listens for ?action=apply. When it pops in history, the javascript hides the description, shows a form, and scrolls to the top of the page. It’s decently robust on popstates.

Note: You could easily add other states in the switch statement, just add a new case and specify the action you want to listen for.


$(document).ready(function () {
  $('.a-button--apply').on('click', function (e) {
    history.pushState({ apply: true }, 'Apply', '?action=apply');


function listenToHistory() {
	$(window).on('popstate', function (e) {

function parseActions() {
	var action = '';

	if ( &&'action=') !== -1) {
  	var search =;
		action = search.slice(search.indexOf('action=') + 'action='.length)

  // listen for actions
	switch(action) {
  	case 'apply':
    	return (function () {
      	fadeOutSection('.job-description', function () {
    	return (function () {
      	fadeOutSection('.job-application-form', function () {

function fadeInSection(className) {
  var hiddenStyles = {
  	opacity: '0',
    transition: '1s all ease-in-out'
  var visibleStyles = { opacity: '1' };

    .animate(visibleStyles, 200, onFinish);

function fadeOutSection(className, cb) {
  var hideStyles = { opacity: '0' };

	if ($(className).hasClass('is-hidden')) {
  	return cb();

    .animate(hideStyles, 200, function () {

function onFinish() {
	$('html, body').animate({scrollTop: 0}, 200);