Tab Panel

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.

Basic tab panel

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.

Home

Code

Home content

Home

Code

Home content

Tab panel with panel inside

Place ngs-panel or other structured content inside the aside when the selected tool needs its own header, scrollable body, or footer.

Home

Code

Home Header

Home Content

Footer

Home

Code

Home Header

Home Content

Footer

Tab panel compact state

Use compact mode for icon-only workspace tools, app sections, account shortcuts, or workspace switchers. Add tooltips when text labels are hidden.

Dashboard content