A navigation menu component for site-wide navigation with dropdown content panels.
Import
Import the Navigation Menu primitives from ng-primitives/navigation-menu.
import { NgpNavigationMenu, NgpNavigationMenuList, NgpNavigationMenuItem, NgpNavigationMenuTrigger, NgpNavigationMenuContent, NgpNavigationMenuContentItem, NgpNavigationMenuLink, } from 'ng-primitives/navigation-menu' ; Usage
Assemble the navigation menu directives in your template.
< nav ngpNavigationMenu > < ul ngpNavigationMenuList > < li ngpNavigationMenuItem > < button [ngpNavigationMenuTrigger] = "productsMenu" >Products</ button > < ng-template #productsMenu > < div ngpNavigationMenuContent > < a ngpNavigationMenuContentItem href = "/analytics" >Analytics</ a > < a ngpNavigationMenuContentItem href = "/automation" >Automation</ a > < a ngpNavigationMenuContentItem href = "/insights" >Insights</ a > </ div > </ ng-template > </ li > < li > < a ngpNavigationMenuLink href = "/pricing" >Pricing</ a > </ li > < li > < a ngpNavigationMenuLink href = "/about" >About</ a > </ li > </ ul > </ nav > Examples
A vertical navigation menu is useful for sidebar navigation. Use the ngpNavigationMenuOrientation input to change the orientation and adjust the trigger placement accordingly.
API Reference
The following directives are available to import from the ng-primitives/navigation-menu package:
The root container for the navigation menu. Apply this to a
element for proper semantics.
Data Attributes
Attribute
Description
data-orientationThe orientation of the navigation menu (horizontal/vertical)
A container for navigation menu items. It manages roving focus between menu triggers and links.
Data Attributes
Attribute
Description
data-orientationThe orientation of the navigation menu (horizontal/vertical)
A container for a menu trigger and its content. It manages the open/close state for a specific menu item.
Data Attributes
Attribute
Description
data-activeApplied when the menu item is open
A button that opens navigation menu content on hover/focus.
Data Attributes
Attribute
Description
data-openApplied when the content is open
data-disabledApplied when the trigger is disabled
The dropdown panel displayed when a trigger is activated.
Data Attributes
Attribute
Description
data-openApplied when the content is visible
data-placementThe final rendered placement of the content
A standalone navigation link within the menu list.
Data Attributes
Attribute
Description
data-activeApplied when the link represents the current page
data-disabledApplied when the link is disabled
Keyboard Navigation
Key
Action
ArrowRight / ArrowLeftNavigate between triggers (horizontal orientation)
ArrowUp / ArrowDownNavigate between triggers (vertical orientation)
ArrowDown (horizontal)Open content and focus first item
ArrowRight (vertical)Open content and focus first item
Enter / SpaceOpen content and focus first item, or activate link
EscapeClose content and return focus to trigger
Home / EndNavigate to first/last trigger
TabMove focus out of the navigation menu
Styling
The navigation menu content uses a portal and should be positioned using position: fixed or position: absolute.
[ ngpNavigationMenuContent ] { position : fixed ; background : white ; border : 1 px solid #e0e0e0 ; border-radius : 8 px ; padding : 16 px ; box-shadow : 0 4 px 12 px rgba ( 0 , 0 , 0 , 0.15 ); } Animations
The content panel supports enter/exit animations using the data-enter and data-exit attributes.
[ ngpNavigationMenuContent ][ data-enter ] { animation : fade-in 0.2 s ease-out ; } [ ngpNavigationMenuContent ][ data-exit ] { animation : fade-out 0.15 s ease-in ; } Instant Transitions (Cooldown)
When users quickly move between menu triggers, the cooldown feature provides instant transitions without animation delays. During the cooldown period (default 300ms), the previous menu is immediately removed and the new menu appears instantly.
Use the data-instant attribute in CSS to handle these instant transitions:
/* Skip animations during instant transitions */ [ ngpNavigationMenuContent ][ data-instant ][ data-enter ], [ ngpNavigationMenuContent ][ data-instant ][ data-exit ] { animation : none ; } To disable cooldown and always show animations, set cooldown to 0 on the trigger:
< button [ngpNavigationMenuTrigger] = "menu" [ngpNavigationMenuTriggerCooldown] = "0" >Menu</ button > Global Configuration
You can configure the default options for all navigation menus in your application using the provideNavigationMenuConfig function.
import { provideNavigationMenuConfig } from 'ng-primitives/navigation-menu' ; bootstrapApplication (AppComponent, { providers: [ provideNavigationMenuConfig ({ orientation: 'horizontal' , showDelay: 200 , hideDelay: 150 , placement: 'bottom-start' , offset: 4 , flip: true , shift: true , wrap: true , cooldown: 300 , }), ], });
Define the orientation of the navigation menu.
Define the delay in milliseconds before showing content on hover.
Define the delay in milliseconds before hiding content.
Define the placement of the content relative to the trigger.
Define the offset from the trigger element.
Define if the content should flip when it reaches the edge of the viewport.
Define if focus should wrap around when navigating with arrow keys.
Configure shift behavior to keep the content in view when it would overflow the viewport.
Define the cooldown duration in milliseconds. When moving from one menu item to another within this duration, the showDelay is skipped and transitions are instant.