Panel Menu
A vertical menu of collapsible sections for app navigation. The panel look puts every root item in a bordered panel with a toggle header; the sidebar look shows root items as section titles above their links, highlights the item of the current route and opens its parents.
Basic
Each root item is a panel; its header opens the nested items. Opening one panel closes the others. Items with children open in place.
Multiple
multiple keeps every panel you open open.
Expanded
[(expandedKeys)] holds the open items by key — the item id or its index path (0-1). expanded: true on an item opens it at the start.
Open: mail
Sidebar
variant="sidebar" is the app sidebar: root items become section titles, links get icons, badge counters (zero is hidden, more than badgeMax shows as 99+) and a lock when disabled. Opening a branch closes its siblings unless multiple is on.
Router links
Items with routerLink are router links. The item of the current route is highlighted (a subset match by default, routerLinkActiveOptions to change it) and its parents open when you navigate. Here each link writes a query parameter, so the page stays.
Commands
command runs when the item is clicked or picked with Enter; itemClick reports every click. url makes a plain link.
Nothing done yet · last click: none
Template
ng-template txPanelMenuItem draws every header and item; it gets the item, its level, active, expanded and hasSubmenu.
Design tokens
dt changes one menu — here flat panels without borders and a wider indent.