Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

Side Panel

Side Panel provides an embedded side utility panel with a vertical strip of icon tabs and an expandable content area. Use it inside app or workspace layouts when the main page needs persistent secondary tools or inspectors beside the primary content.

Use ngs-side-panel with ngs-side-panel-tab for panels such as info, outline, layers, activity, comments, assets, properties, preview settings, and quick tools. Each tab has a tabId, label, and optional icon name or custom icon template.

Do not use Side Panel as a temporary overlay, modal workflow, confirmation dialog, generic page section, primary navigation, content tabs, or action menu. Use Drawer, Dialog, Confirm, Panel, Sidebar, Sidenav, Navigation, RailNav, Tabs, or Menu when those match the job better.

The NgStarter Angular Side Panel component lets you provide an embedded side utility panel with tabbed tools beside the main content. Use ngs-side-panel inside an app or workspace layout when the page needs persistent secondary tools or inspectors next to the primary content. It includes examples for Basic side panel.

Basic side panel

Use SidePanel when a workspace needs persistent secondary tabbed tools beside the main content.

Header
Body content