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

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

<style>
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
  }

  li {
    margin: 10px 0;
    font-size: 1em;
  }

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

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

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

  const NAV_ITEMS = {
    home: {
      name: 'home',
      href: '/settings',
      label: 'Settings'
    },
    about: {
      name: 'about',
      href: '/settings/about',
      label: 'About Pinafore'
    },
    instances: {
      name: 'instances',
      href: '/settings/instances',
      label: 'Instances'
    }
  }

  export default {
    components: {
      SettingsNavItem
    },
    computed: {
      navItems: page => {
        let res = [NAV_ITEMS.home]
        if (page === 'home') {
          return res
        }
        res.push(NAV_ITEMS[page])
        return res
      }
    }
  }
</script>