How Do I Add A Location Header To My Kibana App?

hyattc · March 18, 2022, 4:35am

I've created a custom app plugin for Kibana 7.16.3. I'd like to add a header similar to other apps in Kibana. For example...

Dev Tools has a header that works like a link. I'd like to do something similar for my app that shows the app's home, it's sub windows, etc. Can you point me to some code that shows how to do this?

Thanks,
Chris

matw · March 18, 2022, 12:31pm

Hi and welcome to our community

You can modify Kibana's breadcrumb like here:

github.com

elastic/kibana/blob/main/src/plugins/discover/public/utils/breadcrumbs.ts

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */

import { ChromeStart } from 'kibana/public';
import { i18n } from '@kbn/i18n';
import { SavedSearch } from '../services/saved_searches';

export function getRootBreadcrumbs(breadcrumb?: string) {
  return [
    {
      text: i18n.translate('discover.rootBreadcrumb', {
        defaultMessage: 'Discover',
      }),
      href: breadcrumb || '#/',
    },

This file has been truncated. show original

In short: you've to use chrome.setBreadcrumbs for that

Best,
Matthias

hyattc · March 18, 2022, 5:34pm

That worked. Thanks.

system · April 15, 2022, 5:34pm

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.