Implementation:FlowiseAI Flowise NavCollapse

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

Overview

NavCollapse is a React component that renders a collapsible sidebar menu item with nested child items, supporting both recursive collapse groups and individual nav items.

Description

The NavCollapse component renders a ListItemButton from Material UI that toggles a Collapse region when clicked. It iterates over the menu.children array and recursively renders NavCollapse for children of type collapse or NavItem for children of type item. The component displays a chevron icon indicating the open/closed state, and uses the customization Redux state for border radius styling. A vertical line pseudo-element is drawn along the left edge of the expanded children list for visual hierarchy.

Usage

Use this component when a sidebar menu group needs to be collapsible, with nested sub-items revealed on click. It is rendered by NavGroup whenever a menu child has type: 'collapse'.

Code Reference

Source Location

Repository: FlowiseAI Flowise
File: packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.jsx
Lines: 1-124

Signature

const NavCollapse = ({ menu, level }) => { ... }

NavCollapse.propTypes = {
    menu: PropTypes.object,
    level: PropTypes.number
}

export default NavCollapse

Import

import NavCollapse from '../NavCollapse'

I/O Contract

Inputs

Name	Type	Required	Description
menu	object	Yes	Menu definition object containing id, title, icon, caption, children (array of child menu items), and type.
level	number	Yes	The nesting depth level, used to calculate left padding (*level 24px**) and control background transparency.

Outputs

Name	Type	Description
JSX	React.ReactElement	A ListItemButton that toggles a Collapse region rendering its children as NavItem or recursive NavCollapse components.

Usage Examples

Basic Usage

import NavCollapse from '../NavCollapse'

const menuItem = {
    id: 'settings-group',
    title: 'Settings',
    type: 'collapse',
    icon: IconSettings,
    children: [
        { id: 'general', title: 'General', type: 'item', url: '/settings/general' },
        { id: 'security', title: 'Security', type: 'item', url: '/settings/security' }
    ]
}

<NavCollapse menu={menuItem} level={1} />

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment