Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt
Use this file to discover all available pages before exploring further.
The PanelMenu component is a collapsible, accordion-style vertical navigation tree. Each top-level entry is an expandable panel with its own header; child items are nested below with configurable indentation. Nettalco Theme introduces a transition: none override on both the panel header content and the individual item content elements, eliminating hover animation delays across the entire component.
Usage
<p-panelMenu [model]="items" [multiple]="false" />
import { MenuItem } from 'primeng/api';
items: MenuItem[] = [
{
label: 'Dashboard',
icon: 'pi pi-home',
items: [
{ label: 'Overview', icon: 'pi pi-chart-bar' },
{ label: 'Analytics', icon: 'pi pi-chart-line' }
]
},
{
label: 'Settings',
icon: 'pi pi-cog',
items: [
{ label: 'Profile', icon: 'pi pi-user' },
{ label: 'Notifications', icon: 'pi pi-bell' }
]
}
];
Design Tokens
Root
| Token | Value |
|---|
root.gap | 0.5rem |
root.transitionDuration | {transition.duration} |
Panel
| Token | Value |
|---|
panel.background | {content.background} |
panel.borderColor | {content.border.color} |
panel.borderWidth | 1px |
panel.color | {content.color} |
panel.padding | 0.25rem 0.25rem |
panel.borderRadius | {content.border.radius} |
panel.first.borderWidth | 1px |
panel.first.topBorderRadius | {content.border.radius} |
panel.last.borderWidth | 1px |
panel.last.bottomBorderRadius | {content.border.radius} |
Item
| Token | Value |
|---|
item.focusBackground | {navigation.item.focus.background} |
item.color | {navigation.item.color} |
item.focusColor | {navigation.item.focus.color} |
item.gap | 0.5rem |
item.padding | {navigation.item.padding} |
item.borderRadius | {content.border.radius} |
item.icon.color | {navigation.item.icon.color} |
item.icon.focusColor | {navigation.item.icon.focus.color} |
| Token | Value |
|---|
submenu.indent | 1rem |
| Token | Value |
|---|
submenuIcon.color | {navigation.submenu.icon.color} |
submenuIcon.focusColor | {navigation.submenu.icon.focus.color} |
Theme Notes
Transition Override
Nettalco Theme applies transition: none to both the panel header content and the nested item content in PanelMenu. This is unique among the menu-family components in that it targets two distinct CSS selectors:
/* Panel header row */
div.p-panelmenu-header-content {
transition: none;
}
/* Individual item rows within expanded panels */
div.p-panelmenu-item-content {
transition: none;
}
