Implementation:FlowiseAI Flowise Breadcrumbs

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

Overview

Breadcrumbs is a React navigation breadcrumb component that auto-generates breadcrumb trails by matching the current URL path against a hierarchical navigation configuration object.

Description

This component traverses the provided navigation object's items tree to find the active menu item matching the current document.location.pathname (prefixed with the app's basename from config). It renders a Material UI Card containing a MuiBreadcrumbs trail with a "Dashboard" home link, an optional collapse parent link, and the current item. The component supports extensive customization: toggling card wrapper and divider display, showing icons (via icon for home-only or icons for all items), controlling title placement (top or bottom), right-aligning content, custom separators, and setting maximum visible breadcrumb items.

Usage

Use this component in the main layout to provide navigation context and breadcrumb trails based on the application's sidebar navigation structure.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/extended/Breadcrumbs.jsx
• Lines: 1-184

Signature

const Breadcrumbs = ({
    card, divider, icon, icons, maxItems,
    navigation, rightAlign, separator, title, titleBottom,
    ...others
}) => { ... }

Breadcrumbs.propTypes = {
    card: PropTypes.bool,
    divider: PropTypes.bool,
    icon: PropTypes.bool,
    icons: PropTypes.bool,
    maxItems: PropTypes.number,
    navigation: PropTypes.object,
    rightAlign: PropTypes.bool,
    separator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
    title: PropTypes.bool,
    titleBottom: PropTypes.bool
}

export default Breadcrumbs

Import

import Breadcrumbs from '@/ui-component/extended/Breadcrumbs'

I/O Contract

Inputs

Name	Type	Required	Description
navigation	object	Yes	Navigation configuration object with items array containing menu groups, collapses, and items with type, url, title, icon, and breadcrumbs properties
card	bool	No	Whether to render the breadcrumb inside a Card wrapper
divider	bool	No	Whether to show a divider below the breadcrumbs (when card is false)
icon	bool	No	Whether to show only the home icon (no text) for the dashboard link
icons	bool	No	Whether to show icons for all breadcrumb items
maxItems	number	No	Maximum number of breadcrumb items to display (default: 8)
rightAlign	bool	No	Whether to right-align the breadcrumb content
separator	func/object	No	Custom separator icon component (default: IconTallymark1)
title	bool	No	Whether to display the page title alongside the breadcrumbs
titleBottom	bool	No	Whether to position the title below the breadcrumb trail

Outputs

Name	Type	Description
React Element	JSX.Element	Renders a Card with breadcrumb navigation or an empty Typography element if no matching route is found

Usage Examples

Basic Usage

import Breadcrumbs from '@/ui-component/extended/Breadcrumbs'
import navigation from '@/menu-items'

const MyLayout = () => (
    <Breadcrumbs
        navigation={navigation}
        title={true}
        card={false}
        divider={false}
        rightAlign={true}
    />
)

Related Pages

• Principle:FlowiseAI_Flowise_Application_Layout