GitHub user Sagargupta16 added a comment to the discussion: Navbar disappears
when loading React Plugin (Airflow 3.1.x)
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:
1. **Uses the Airflow plugin API correctly** - Your plugin should return a
React component that gets mounted *inside* the existing layout, not replace it:
```javascript
// 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>
);
}
```
2. **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.
3. **Check your plugin registration** - In Airflow 3, the plugin needs to
declare its menu entries and views through the new API:
```python
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
}]
```
4. **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.
GitHub link:
https://github.com/apache/airflow/discussions/64149#discussioncomment-16335049
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to: [email protected]
