Implementation:FlowiseAI Flowise NavGroup
| Knowledge Sources | |
|---|---|
| Domains | UI Navigation, Authorization |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
NavGroup is a React component that renders a group of sidebar menu items, separating them into a primary section and permission-filtered secondary sections with dividers and group titles.
Description
The NavGroup component accepts an item prop representing a top-level menu group from the dashboard menu configuration. It splits children into a primary group (rendered unconditionally) and non-primary groups (filtered by permission and display flags using the useAuth hook). Each non-primary group is wrapped in an Available RBAC component that checks combined permissions. Empty groups (where all children lack permission) are excluded from rendering. The component uses NavItem for leaf items and NavCollapse for collapsible sub-groups.
Usage
Use this component to render top-level menu groups in the sidebar MenuList. It is the primary structural component that organizes the sidebar into logical sections (e.g., primary navigation, evaluations, management, others) with proper permission gating.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.jsx
- Lines: 1-119
Signature
const NavGroup = ({ item }) => { ... }
NavGroup.propTypes = {
item: PropTypes.object
}
export default NavGroup
Import
import NavGroup from '../NavGroup'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| item | object | Yes | A top-level menu group object with id, title, caption, type (should be group), and children (array containing a primary sub-group and optional named sub-groups like evaluations, management, etc.). |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX | React.ReactElement | A List for primary items followed by divider-separated List sections for each non-primary group, each wrapped in an Available RBAC guard. |
Usage Examples
Basic Usage
import NavGroup from './MenuList/NavGroup'
import dashboard from '@/menu-items/dashboard'
const MenuList = () => {
return <NavGroup item={dashboard} />
}