The ngs-tab-panel component creates a compact vertical tool or navigation panel with a linked aside content area. Use it in workspace and editor screens where selecting an item in the rail should show the matching tool, inspector, asset list, settings section, or panel content beside it.
The NgStarter Angular Tab Panel component lets you create a compact vertical tool or navigation panel with a linked aside content area. Use ngs-tab-panel when a workspace or editor needs a vertical set of icon/text items that controls adjacent aside content. It includes examples for Basic tab panel, Tab panel with panel inside, Tab panel compact state, and Tab panel with panels inside.
Use tab panel when a compact vertical item list controls a related aside area. Each ngs-tab-panel-item points to matching ngsTabPanelAsideContent by id.
Place ngs-panel or other structured content inside the aside when the selected tool needs its own header, scrollable body, or footer.
Use compact mode for icon-only workspace tools, app sections, account shortcuts, or workspace switchers. Add tooltips when text labels are hidden.
Using this component in production?
NgStarter includes source code, admin dashboard templates, and commercial support.