JSFiddle - React, Tailwind, and code Playground

JavaScript

const links = [
  {
    "href": "/about/name/history",
    "title": "Our name's history",
    "hierarchy": ["1","0","0"],
    "drupal-menu-machine-name": ["main"]
  },
  {
    "href": "/about",
    "title": "About us",
    "hierarchy": ["1"],
    "drupal-menu-machine-name": ["main"]
  },
  {
    "href": "/about/bob",
    "title": "All about Bob",
    "hierarchy": ["1","1"],
    "drupal-menu-machine-name": ["main"]
  },
  {
    "href": "/",
    "title": "Home",
    "hierarchy": ["0"],
    "drupal-menu-machine-name": ["main"]
  },
  {
    "href": "/about/name",
    "title": "Our name",
    "hierarchy": ["1","0"],
    "drupal-menu-machine-name": ["main"]
  },
];

// Sort
function hierarchyCompare(a, b) {
  if (a.length === 0 && b.length === 0) return 0; // Nothing to sort
  if (a.length === 0 && b.length > 0) return -1; // End of A hierarchy
  if (a.length > 0 && b.length === 0) return 1;  // End of B hierarchy
  // Compare the end of both hierarchies
  if (a.length === 1 && b.length === 1 ) return parseInt(a[0]) - parseInt(b[0]);
  // If the top levels are equal, compare the children
  if (a[0] === b[0]) return hierarchyCompare(a.slice(1), b.slice(1))
  // Compare the top levels
  return parseInt(a[0]) - parseInt(b[0]);
}
links.sort((a,b) => hierarchyCompare(a.hierarchy,b.hierarchy))
console.log("Sort", links);


const getAncestor = (link, levels = 1) => link.hierarchy.slice(0, -levels);
const getParent = (link) => getAncestor(link, 1);

// Get subtree of "/about"
const aboutSubtree = links.filter(link => link.hierarchy.slice(0,links[1].hierarchy.length).join('.') === links[1].hierarchy.join('.'));
console.log("About Subtree", aboutSubtree)

// Get Parent of /about/name/history
const histParent = links.find(link => link.hierarchy.join('.') == getParent(links[3]).join('.'));
console.log("Get Parent", histParent)

// Get Grandparent of /about/name/history
const histGrandParent = links.find(link => link.hierarchy.join('.') == getAncestor(links[3],...