Pinafore-Web-Client-Frontend/routes/settings/_components/SettingsNav.html

<nav class="settings-nav">
  <ul>
    {{#each navItems as navItem}}
    <li>
      <SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}" />
    </li>
    {{/each}}
    <li>
      <SettingsNavItem :page name="{{page}}" href="/{{page}}" :label />
    </li>
  </ul>
</nav>

<style>
  .settings-nav ul {
    margin: 20px 20px;
    padding: 0;
    list-style: none;
  }

  .settings-nav li {
    margin: 5px 0;
    font-size: 1em;
    display: inline-block;
  }

  .settings-nav li::after {
    content: '>';
    margin: 0 15px;
    color: var(--anchor-text);
  }

  .settings-nav li:last-child::after {
    content: '';
    margin-left: 0;
    font-size: 1em;
  }

</style>
<script>
  import SettingsNavItem from './SettingsNavItem.html'

  const NAV_ITEMS = {
    'settings': 'Settings',
    'settings/about': 'About Pinafore',
    'settings/general': 'General',
    'settings/instances': 'Instances',
    'settings/instances/add': 'Add an instance',
  }

  export default {
    components: {
      SettingsNavItem
    },
    computed: {
      navItems: page => {
        let res = []
        let breadcrumbs = page.split('/')
        let path = ''
        for (let i = 0; i < breadcrumbs.length - 1; i++) {
          let currentPage = breadcrumbs[i]
          path += currentPage
          res.push({
            label: NAV_ITEMS[path],
            href: `/${path}`,
            name: path
          })
          path += '/'
        }
        return res
      }
    }
  }
</script>