Help grouping child routes


First, let me just say, I am primarily a designer but also part front-end developer so forgive me if this request seems elementary or is not appropriate for this forum. In a nutshell, I have child routes that I want to group and add a heading. I have reviewed the existing topics but didn’t find any matching what I am looking to do (or maybe I just don’t know enough to relate an existing topic to my request).

My route config file looks like this:

import { PLATFORM } from 'aurelia-framework';
const routes = [
    { route: ['', 'color'], name: 'colors',
        moduleId: PLATFORM.moduleName('./app/pages/colors'),
        nav: true,
        title: 'Colors',
        settings: {group: 'styles'}
    { route: 'typography', name: 'typography',
        moduleId: PLATFORM.moduleName('./app/pages/typography'),
        nav: true,
        title: 'Typography',
        settings: {group: 'styles'}
    { route: 'buttons', name: 'buttons',
        moduleId: PLATFORM.moduleName('./app/pages/buttons'),
        nav: true,
        title: 'Buttons,
        settings: {group: 'elements'}
    { route: 'links', name: 'links',
        moduleId: PLATFORM.moduleName('./app/pages/links'),
        nav: true,
        title: 'Links',
        settings: {group: 'elements'}
export {

And I would like it to render them like:

  • Colors
  • Typography


  • Buttons
  • Links

I am hoping there is a relatively easy way to do this but not certain if I can I utilize the “settings” group I have created or if I need to break them out into different child routes. If different child routes, do I need different viewports?


1 Like

One solution is to put up two things: a) a value converter to do the grouping itself. b) do the rendering using the particular css framework you are using.

Check this codesandbox:

Best regards.


Thank you @ormasoftchile! The example looks great! I don’t really know much about value converters (yet) and I will let you know how it goes!