<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: 5px 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/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>