How to extend jupyter ui by adding menus to main page?

See the image below:


I want write a jupyter ui extension that adds a new menu item like “Files”, “Running”, and “Clusters”. All of the documentation and examples I’ve seen show how to add extensions to the notebook pages themselves, but I haven’t found anything about how to change the main page.

Can anyone help point me in the write direction? Thanks!

1 Like

I would strongly recommend targeting the new, safer plugin system included in the upcoming notebook v7 (you can check the latest build online, here); in v7 the tabs are in the same place as before:

and are defined the notebookTreeWidget plugin which provides INotebookTree token:

To add a custom tab you would need to request that token and call addWidget() and tabBar.addTab(), roughly:

import {
} from '@jupyterlab/application';
import { INotebookTree } from '@jupyter-notebook/tree';
import { Widget } from '@lumino/widgets';

// from
class ExampleWidget extends Widget {
  constructor() {
    this.addClass('my-extension-example-widget'); = 'simple-widget-example';
    this.title.label = 'Widget Example';
    this.title.closable = false;

const plugin: JupyterFrontEndPlugin<void> = {
  id: 'my-extension:plugin',
  autoStart: true,
  requires: [INotebookTree],
  activate: (app: JupyterFrontEnd, nbTreeWidget: INotebookTree) => {
    const myWidget = new ExampleWidget();

export default plugin;

For reference, there is Extension Developer Guide — JupyterLab 3.4.5 documentation; following the tutorial for JupyterLab extensions which should clarify things. More examples and resources may appear on Custom front-end extensions — Jupyter Notebook 7.0.0a5 documentation with time. If you have any questions let me know.