GET STARTED

Import

Import the canonical standalone component. Legacy Component-suffixed exports remain compatibility aliases.

import { NeuralPanelMenu, type NeuralPanelMenuEntry } from '@neural-ng/core/panel-menu';

@Component({ imports: [NeuralPanelMenu] })

Data-driven hierarchy

Stable keys control expansion without mutating the immutable source array. Leaves emit selection; branches emit toggle state.

Angular RouterLink

Use routerLink for SPA navigation without a document reload. Query params, fragments, history behavior and navigation state use Angular Router's normal contract; href remains available for native and external links.

Multiple roots and deep branches

multiple keeps several root panels open. Nested branches preserve their independent state.

Projected composition

Use item and separator components when the hierarchy belongs directly in the template.

Disabled and link states

Disabled branches and leaves stay perceivable but cannot toggle or emit. Leaf entries may render native anchors through href, target and rel.

Unstyled and typed classes

Headless mode retains tree semantics, focus, expansion and animation structure while Tailwind owns every visible choice.

Component boundary

PanelMenu is always inline. Menu owns flat command lists, while Drawer owns an edge-based layout container that may contain a PanelMenu.

Tree semantics

Branches expose aria-expanded and aria-controls. Levels use aria-level, collapsed groups are inert, and disabled entries expose aria-disabled.

Keyboard behavior

Up/Down traverses visible items, Right expands or enters, Left collapses or returns, Home/End reaches boundaries, Enter/Space activates, and typing performs typeahead.

Focus and reduced motion

Focus returns to a deterministic visible item. Animation durations collapse under prefers-reduced-motion without removing state changes.

Inputs and models

Events

Entry model

NeuralPanelMenuAction supports key, label, iconClass, badge, shortcut, disabled, href, routerLink and its Router options, target, rel, itemClass and recursive items. A separator uses { separator: true }.

Typed class slots