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.

Navigation API Reference

ngs-navigation

The container for navigation items.

Prop	Type	Default
activeKey The key of the currently active navigation item.	any	–
dataSource Array of data to build the navigation dynamically.	any[]	–
itemTypeProperty The property name in the data source that determines the item type.	string	type
appearance The visual appearance style of the navigation.	any	–
activateByRoute Whether to automatically activate items based on the current router URL.	boolean	false
autoScrollToActiveItem Whether to automatically scroll the active item into view.	boolean	false

Event	Description
itemClicked	Event emitted when a navigation item is clicked.

ngs-navigation-item

An individual item within the navigation.

Prop	Type	Default
key Unique identifier for the item.	any	ngs-navigation-item-n
forceActive Whether to force the item into an active state.	boolean	false
badgeTextOnly Whether to display only the badge text without additional styling.	boolean	false

ngs-navigation-group

A group of navigation items.

Using this component in production?

Source code, templates, and commercial support

NgStarter includes source code, admin dashboard templates, and commercial support.