Implementation:FlowiseAI Flowise OrgWorkspaceBreadcrumbs

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Navigation
Last Updated	2026-02-12 07:00 GMT

Overview

This React component renders a breadcrumb navigation bar allowing authenticated users to switch between organizations and workspaces in the Flowise cloud environment.

Description

The OrgWorkspaceBreadcrumbs component uses MUI Breadcrumbs with styled Chip elements (StyledBreadcrumb) to display the currently active organization and workspace. Each breadcrumb is clickable, opening a StyledMenu dropdown that lists all available organizations or workspaces for the current user. Switching between organizations triggers an automatic workspace fetch and switch. The component includes loading dialogs displayed during organization and workspace switching, as well as a Workspace Unavailable dialog that appears when the user's current workspace is no longer accessible.

Usage

This component is used in the main application header specifically for the Flowise Cloud deployment. It is rendered when the user is authenticated and the application is running in cloud mode (as opposed to enterprise or open-source modes).

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/layout/MainLayout/Header/OrgWorkspaceBreadcrumbs/index.jsx
• Lines: 1-435

Signature

const OrgWorkspaceBreadcrumbs = () => {
    // No props - reads state from Redux store
    const user = useSelector((state) => state.auth.user)
    const isAuthenticated = useSelector((state) => state.auth.isAuthenticated)
    const customization = useSelector((state) => state.customization)
    // ...
}

OrgWorkspaceBreadcrumbs.propTypes = {}

export default OrgWorkspaceBreadcrumbs

Import

import OrgWorkspaceBreadcrumbs from '@/layout/MainLayout/Header/OrgWorkspaceBreadcrumbs'

I/O Contract

Inputs

Name	Type	Required	Description
(none)	N/A	N/A	Component takes no props; reads from Redux store (auth.user, auth.isAuthenticated, customization)

Outputs

Name	Type	Description
Breadcrumbs UI	JSX.Element	MUI Breadcrumbs with Organization and Workspace chip selectors
Organization switching dialog	JSX.Element	Loading dialog displayed while switching organizations
Workspace switching dialog	JSX.Element	Loading dialog displayed while switching workspaces
Workspace unavailable dialog	JSX.Element	Selection dialog shown when current workspace is no longer available

Usage Examples

Basic Usage

import OrgWorkspaceBreadcrumbs from '@/layout/MainLayout/Header/OrgWorkspaceBreadcrumbs'

// In the Header component (cloud mode only):
const Header = () => {
    const { isCloud } = useConfig()
    const isAuthenticated = useSelector((state) => state.auth.isAuthenticated)

    return (
        <>
            {isCloud && isAuthenticated && <OrgWorkspaceBreadcrumbs />}
        </>
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Workspace_Navigation