Implementation:FlowiseAI Flowise MainHeader
| Knowledge Sources | |
|---|---|
| Domains | UI Components, Layout |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
This React component renders the main application header bar, composing the logo, sidebar toggle, GitHub star button, workspace/organization switchers, dark mode toggle, upgrade button, and profile section.
Description
The Header component serves as the top-level navigation bar for the Flowise application. It renders the LogoSection and a sidebar toggle button (IconMenu2) on the left, and conditionally displays a GitHubStarButton (for cloud and open-source modes) that fetches the live star count from the GitHub API. The center and right areas contain the WorkspaceSwitcher (enterprise mode), OrgWorkspaceBreadcrumbs (cloud mode), an Upgrade button with gradient styling (for cloud organization admins opening a PricingDialog), a MaterialUISwitch for dark/light mode toggling that persists to localStorage, and the ProfileSection dropdown. The component also handles logout by calling the account API and dispatching logoutSuccess to Redux.
Usage
This component is used as the header within the MainLayout component and is rendered on every authenticated page of the Flowise application. It adapts its content based on the deployment mode (cloud, enterprise, or open-source).
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/layout/MainLayout/Header/index.jsx
- Lines: 1-323
Signature
const Header = ({ handleLeftDrawerToggle }) => {
const theme = useTheme()
const navigate = useNavigate()
const customization = useSelector((state) => state.customization)
const logoutApi = useApi(accountApi.logout)
const [isDark, setIsDark] = useState(customization.isDarkMode)
const { isEnterpriseLicensed, isCloud, isOpenSource } = useConfig()
// ...
}
Header.propTypes = {
handleLeftDrawerToggle: PropTypes.func
}
export default Header
Import
import Header from '@/layout/MainLayout/Header'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| handleLeftDrawerToggle | function | Yes | Callback function to toggle the left sidebar drawer open/closed |
Outputs
| Name | Type | Description |
|---|---|---|
| LogoSection | JSX.Element | Application logo displayed on the left side (hidden on mobile) |
| Sidebar toggle button | JSX.Element | Avatar button with menu icon that calls handleLeftDrawerToggle |
| GitHubStarButton | JSX.Element | GitHub star badge with live count (cloud and open-source modes only) |
| WorkspaceSwitcher | JSX.Element | Workspace dropdown (enterprise licensed mode only) |
| OrgWorkspaceBreadcrumbs | JSX.Element | Organization/workspace breadcrumbs (cloud mode only) |
| Upgrade button | JSX.Element | Gradient button opening PricingDialog (cloud org admins only) |
| MaterialUISwitch | JSX.Element | Dark/light mode toggle switch |
| ProfileSection | JSX.Element | Settings dropdown with export, import, account, and logout options |
Usage Examples
Basic Usage
import Header from '@/layout/MainLayout/Header'
const MainLayout = () => {
const handleLeftDrawerToggle = () => {
// Toggle sidebar state
dispatch({ type: SET_MENU, opened: !leftDrawerOpened })
}
return (
<AppBar position="fixed">
<Toolbar>
<Header handleLeftDrawerToggle={handleLeftDrawerToggle} />
</Toolbar>
</AppBar>
)
}