Как выводить breadcrumbs в react?

const categories = [
  {
    name: 'Новости',
    categories: [
      {
        name: 'Главные Новости',
        url: '/news',
      },
    ],
  },
  {
    name: 'Меню',
    categories: [
      {
        name: 'Меню 1',
        url: '/menu1',
        categories: [
          {
            name: 'Меню 11',
            url: '/menu11',
          },
        ],
      },
      {
        name: 'Меню 2',
        url: '/menu2',
      },
      {
        name: 'Меню 3',
        url: '/menu3',
      },
    ],
  },
];

const findParents = (url, items = categories) => {
    let i = 0;
  
    do {
      const item = items[i];
      const isFindedUrl = url === item.url;
      
      if (isFindedUrl) {
        return [item];
      }
      
      if (item.categories) {
        const childs = findParents(url, item.categories);
        
        if (childs) {
          return [item, ...childs];
        }
      }
      
      i++;
    } while (items.length !== i)
             
    return;
};

const currentUrl = '/menu11';

console.log(findParents(currentUrl));

Как сделать выделение элемента как на примере?

Подчеркивание, это отдельный див-елемент, который попросту меняет позицию при смене активного елемента меню
Соответственно, что бы сменить позицию с 1го к 3му елементу, нужно пройти через 2ой
Все намного проще)