Navbar disappears when loading React Plugin (Airflow 3.1.x) #64149

thriveni986 · 2026-03-24T09:15:52Z

thriveni986
Mar 24, 2026

Description

I recently upgraded Apache Airflow from 2.10.5 to 3.1.7. After the upgrade. I migrated my plugin to use the new React Plugin system My plugin page is loading successfully, but I am facing an issue where the navigation bar (Home, DAGs, Browse, Admin) disappears after clicking on the plugin.

Expected Behavior

When opening the plugin page:

Airflow layout should remain intact
Top navbar (Home, DAGs, Browse, Admin) should be visible
Sidebar should remain visible
Plugin content should render inside the main content area

Actual Behavior

Plugin page loads successfully
But the top navbar disappears completely
The plugin seems to take over the full page instead of rendering within the Airflow layout

Screenshot

Question

Is there a recommended way to ensure the plugin renders inside the Airflow layout instead of replacing the entire page?

Any guidance or example structure would be really helpful.

Sagargupta16 · 2026-03-27T00:51:19Z

Sagargupta16
Mar 27, 2026

This is a common issue when migrating plugins to Airflow 3's React-based plugin system. The navbar disappears because the plugin is rendering outside the Airflow layout context.

Root cause

In Airflow 3, plugins need to integrate with the React shell rather than the old Flask blueprint pattern. If your plugin renders a full page (with its own <html> or root <div>), it replaces the entire layout including the navbar.

Fix

Make sure your plugin:

Uses the Airflow plugin API correctly - Your plugin should return a React component that gets mounted inside the existing layout, not replace it:

// Plugin should export a component, not a full page
export default function MyPlugin() {
  return (
    <div>
      {/* Your plugin content here - NO wrapping layout */}
      <h1>My Plugin</h1>
    </div>
  );
}

Don't use ReactDOM.render() or createRoot() - If you're manually mounting React, you'll override the Airflow shell. Instead, register your component through the plugin hooks.
Check your plugin registration - In Airflow 3, the plugin needs to declare its menu entries and views through the new API:

from airflow.plugins_manager import AirflowPlugin

class MyPlugin(AirflowPlugin):
    name = "my_plugin"
    appbuilder_views = [{
        "name": "My Plugin",
        "category": "Plugins",
        "view": my_view  # This should return content, not a full page
    }]

Check for CSS conflicts - If your plugin includes CSS that sets body or root-level styles, it can hide the navbar. Scope your CSS to your plugin's container.

Could you share your plugin's registration code and the React component? That would help pinpoint the exact issue.

0 replies

thriveni986 · 2026-03-30T07:03:42Z

thriveni986
Mar 30, 2026
Author

Thank you for the response!

I understand the distinction now. The example using appbuilder_views applies to the traditional Flask-based UI. However, I’m currently working with Apache Airflow 3.x and trying to build a plugin using the newer React-based plugin system (AIP-68), so I’m using react_apps instead.

from airflow.plugins_manager import AirflowPlugin

class NewPlugin(AirflowPlugin):
name = "newplugin"

react_apps = [
    {
        "name": "Sample Plugin",
        "category": "browser",
        "bundle_url": "/newplugin/main.js",
        "destination": "nav",
        "url_route": "newplugin"
    }
]

Note: If I use appbuilder_views, my plugin appears in the legacy views, not the modern Airflow 3.x UI. So I need to use react_apps for the new interface.

My question is: Are there any working examples or reference repositories that demonstrate a fully functional react_apps plugin rendering correctly inside the Airflow layout?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Navbar disappears when loading React Plugin (Airflow 3.1.x) #64149

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Navbar disappears when loading React Plugin (Airflow 3.1.x) #64149

Uh oh!

thriveni986 Mar 24, 2026

Replies: 2 comments

Uh oh!

Sagargupta16 Mar 27, 2026

Root cause

Fix

Uh oh!

thriveni986 Mar 30, 2026 Author

thriveni986
Mar 24, 2026

Sagargupta16
Mar 27, 2026

thriveni986
Mar 30, 2026
Author