Pinafore-Web-Client-Frontend/routes/_components/settings/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 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>