Context Menu overview

NbContextMenuDirective

Full featured context menu directive.

Just pass menu items array:

<button [nbContextMenu]="items"></button>
...
items = [{ title: 'Profile' }, { title: 'Log out' }];

Installation

Import NbContextMenuModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbContextMenuModule,
  ],
})
export class PageModule { }

Also make sure NbMenuModule is imported to your app.module.

@NgModule({
  imports: [
    // ...
    NbMenuModule.forRoot(),
  ],
})
export class AppModule { }

Usage

If you want to handle context menu clicks you have to pass nbContextMenuTag param and register to events using NbMenuService. NbContextMenu renders plain NbMenu inside, so you have to work with it just like with NbMenu component:

Context menu has different placements, such as: top, bottom, left and right which can be used as following:

<button [nbContextMenu]="items" nbContextMenuPlacement="right"></button>

items = [{ title: 'Profile' }, { title: 'Log out' }];

By default context menu will try to adjust itself to maximally fit viewport and provide the best user experience. It will try to change position of the context menu. If you wanna disable this behaviour just set it falsy value.

<button [nbContextMenu]="items" nbContextMenuAdjustment="counterclockwise"></button>

items = [{ title: 'Profile' }, { title: 'Log out' }];

Context menu has a number of triggers which provides an ability to show and hide the component in different ways:

• Click mode shows the component when a user clicks on the host element and hides when the user clicks somewhere on the document outside the component.
• Hint provides capability to show the component when the user hovers over the host element and hide when the user hovers out of the host.
• Hover works like hint mode with one exception - when the user moves mouse from host element to the container element the component remains open, so that it is possible to interact with it content.
• Focus mode is applied when user focuses the element.
• Noop mode - the component won't react to the user interaction.

Noop mode is especially useful when you need to control Popover programmatically, for example show/hide as a result of some third-party action, like HTTP request or validation check: