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

Navigation

Navigation renders a persistent product navigation structure when ngs-sidebar is not used. Use it for custom navigation areas, section navigation, settings navigation, admin navigation, and nested navigation groups.

ngs-sidebar has its own navigation model, so do not duplicate this component inside ngs-sidebar. Use Navigation when you need the same kind of navigation outside of Sidebar.

Navigation supports active items, route-based activation, headings, dividers, icons, badges, nested groups, auto-scroll to the active item, and dynamic data sources.

Do not use Navigation for trigger-based action menus, ordinary row lists, breadcrumbs, tabs, wizard steps, form selection, or table row actions.

The NgStarter Angular Navigation component lets you render a persistent product navigation structure when ngs-sidebar is not used. Use ngs-navigation for custom navigation areas, section navigation, settings navigation, admin navigation, and nested navigation groups when the screen needs product links but does not use ngs-sidebar. It includes examples for Basic Navigation, Navigation with heading, Navigation with divider, and Navigation with icons.

Basic Navigation

Use basic navigation for a persistent set of product links when ngs-sidebar is not used.

Dashboard
Projects
Tasks
Really long menu item text, really long menu item text
Support

Navigation with heading

Use headings to label sections in a longer navigation list.

Main
Dashboard
Projects
Customization
Tasks
Really long menu item text, really long menu item text
Support

Navigation with divider

Use dividers to separate related navigation groups.

Dashboard
Projects
Tasks
Support

Navigation with icons

Use icons when navigation items need faster scanning or stronger visual anchors.

Dashboard
Projects
Tasks
Really long menu item text, really long menu item text
Support

Navigation with nested menu

Use nested groups when a navigation section expands to reveal child destinations.

Dashboard
Projects
Tasks
Settings
Profile
Security
Teams
Team 1
Team 2
Support

Navigation with badges

Use badges for small counts, labels, or state hints attached to navigation items.

Dashboard
1
Projects
Tasks
Settings
3
Profile
Security
Support