Implementation:FlowiseAI Flowise NavItem

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

Overview

NavItem is a React component that renders a single clickable sidebar menu item, supporting internal routing via React Router Link, external URLs, file upload triggers, and active-state highlighting.

Description

The NavItem component renders a Material UI ListItemButton configured with an icon, title, optional caption, optional chip badge, and a beta indicator. Depending on the item configuration, the button acts as a React Router Link for internal navigation, an anchor tag for external URLs, or a label element for file upload (specifically for the loadChatflow action). On click, it dispatches a MENU_OPEN Redux action to update the active menu state. On small screens, it also closes the sidebar via SET_MENU. The component supports two navigation modes: MENU (dispatches Redux actions and updates URL) and SETTINGS (calls the provided onClick callback instead).

Usage

Use this component as a leaf-level sidebar navigation item. It is rendered by NavGroup and NavCollapse for each menu item with type: 'item'. It handles both the standard dashboard sidebar navigation and the canvas settings sidebar.

Code Reference

Source Location

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

Signature

const NavItem = ({ item, level, navType, onClick, onUploadFile }) => { ... }

NavItem.propTypes = {
    item: PropTypes.object,
    level: PropTypes.number,
    navType: PropTypes.string,
    onClick: PropTypes.func,
    onUploadFile: PropTypes.func
}

export default NavItem

Import

import NavItem from '../NavItem'

I/O Contract

Inputs

Name	Type	Required	Description
item	object	Yes	Menu item object containing id, title, url, icon, target, external, disabled, caption, chip (object with color/variant/size/label/avatar), and isBeta (boolean).
level	number	Yes	Nesting depth level, used to calculate left padding (*level 24px**) and control background/font styling.
navType	string	No	Navigation mode: MENU for sidebar navigation (dispatches Redux actions) or SETTINGS for canvas settings sidebar (calls onClick callback).
onClick	func	No	Callback invoked when navType is SETTINGS and the item is clicked (receives item.id as argument).
onUploadFile	func	No	Callback invoked when a file is selected via the hidden file input (for loadChatflow items). Receives the file content as a string.

Outputs

Name	Type	Description
JSX	React.ReactElement	A ListItemButton with icon, title text, optional caption, optional chip, and optional beta badge. May contain a hidden file input for the loadChatflow item.

Usage Examples

Basic Usage

import NavItem from '../NavItem'

const menuItem = {
    id: 'chatflows',
    title: 'Chatflows',
    type: 'item',
    url: '/chatflows',
    icon: IconHierarchy,
    breadcrumbs: true,
    permission: 'chatflows:view'
}

<NavItem item={menuItem} level={1} navType="MENU" />

Settings Mode Usage

<NavItem
    item={settingsItem}
    level={1}
    navType="SETTINGS"
    onClick={(id) => handleSettingAction(id)}
    onUploadFile={(content) => importChatflow(content)}
/>

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment