GitHub logoGitHub RepoNPM logoNPM Package


npm install @curi/route-ancestors

Prefer inline scripts? A full (.umd.js) and minified (.min.js) script is available for every version through Unpkg. You can access the package's exports using window.CuriRouteAncestors.


The @curi/route-ancestors route interaction returns the names of ancestor routes, which can be useful for generating breadcrumb links.



A function to create the ancestors route interaction. When you create your router, the result is passed to the router using the route option, which will add an ancestors function to the router's route interactions.

The interaction returns the name of an ancestor route a given level "up" from the route. If no level is provided, then it will return an array of the names of all ancestor routes (from most ancient to parent).

import { curi } from '@curi/router';
import ancestors from '@curi/route-ancestors';

const routes = prepare_routes([
    name: 'Grandparent', path: 'g',
    children: [
        name: 'Parent', path: 'p',
        children: [
          { name: 'Child', path: 'c' }

const router = curi(history,routes, {
  route: [ancestors()]


namethe name of the route to get ancestors of
levela number of levels "up" to get the ancestor name of. If this argument is not provided, the interaction will return an array of all ancestor routes names (from most ancient to parent).
const parent = router.route.ancestors('Child', 1);
// parent === 'Parent'
const ancestors = router.route.ancestors('Child');
// ancestors === ['Grandparent', 'Parent']