Menu

A menu provides a list of links which can be grouped according to categories.

The <dt-menu> is a generic navigation menu that supports item groups as well as individual items that do not belong to a group. It has a clear hierarchy and allows for a condensed way to help users to navigate or perform actions. It can be used as a standalone component, in a <dt-drawer> or in a <dt-context-dialog>.

´ Loading interactive demo...
<dt-menu aria-label="Default Menu Example" class="default-menu-example"> <dt-menu-group label="Dashboards & reports"> <a routerLink="/dashboards" dtMenuItem>Dashboards</a> <a routerLink="/customchart" dtMenuItem>Create custom chart</a> <a routerLink="/reports" dtMenuItem>Reports</a> <button (click)="doSomething()" dtMenuItem>Something else</button> </dt-menu-group> <dt-menu-group label="Analyze"> <a routerLink="/problems" dtMenuItem>Problems</a> <a routerLink="/usersessions" dtMenuItem>User sessions</a> <a routerLink="/smartscape" dtMenuItem>Smartscape topology</a> <a routerLink="/diagnostic" dtMenuItem>Diagnostic tools</a> </dt-menu-group> <a routerLink="/help" dtMenuItem>Item outside a group</a> </dt-menu> export class MenuDefaultExample { doSomething(): void { // noop } } <dt-menu aria-label="Default Menu Example" class="default-menu-example"> <dt-menu-group label="Dashboards & reports"> <a routerLink="/dashboards" dtMenuItem>Dashboards</a> <a routerLink="/customchart" dtMenuItem>Create custom chart</a> <a routerLink="/reports" dtMenuItem>Reports</a> <button (click)="doSomething()" dtMenuItem>Something else</button> </dt-menu-group> <dt-menu-group label="Analyze"> <a routerLink="/problems" dtMenuItem>Problems</a> <a routerLink="/usersessions" dtMenuItem>User sessions</a> <a routerLink="/smartscape" dtMenuItem>Smartscape topology</a> <a routerLink="/diagnostic" dtMenuItem>Diagnostic tools</a> </dt-menu-group> <a routerLink="/help" dtMenuItem>Item outside a group</a> </dt-menu> export class MenuDefaultExample { doSomething(): void { // noop } }

Imports

You have to import the DtMenuModule when you want to use the <dt-menu>.

@NgModule({
  imports: [DtMenuModule],
})
class MyModule {}

Initialization

To set the content for a menu component, the following tags are available:

  • <dt-menu-group> - A menu group with a label that can contain one or more menu items.
  • <a dtMenuItem>/<button dtMenuItem> - A menu item which can either be represented by an anchor (if the item is used for site navigation) or a button (in case the item should merely trigger some code).

DtMenu inputs

Name Type Default Description
aria-label string undefined An accessibility label describing the menu.

To make our components accessible it is obligatory to provide either an aria-label or aria-labelledby.

DtMenuGroup inputs

Name Type Default Description
label string undefined The header of the menu group.

This component is typically used for static menus, such as the global navigation menu in combination with a drawer or menus in overlays (e.g. user menu, or context dialog).

´ Loading interactive demo...
<dt-checkbox (change)="toggle()">Toggle drawer</dt-checkbox> <br /> <dt-drawer-container> <dt-drawer mode="side" position="start" class="menu-drawer"> <dt-menu aria-label="Menu inside Drawer Example"> <dt-menu-group label="Dashboards & reports"> <a routerLink="/dashboards" dtMenuItem>Dashboards</a> <a routerLink="/customchart" dtMenuItem>Create custom chart</a> <a routerLink="/reports" dtMenuItem>Reports</a> <button (click)="doSomething()" dtMenuItem>Something else</button> </dt-menu-group> <dt-menu-group label="Analyze"> <a routerLink="/problems" dtMenuItem>Problems</a> <a routerLink="/usersessions" dtMenuItem>User sessions</a> <a routerLink="/smartscape" dtMenuItem>Smartscape topology</a> <a routerLink="/diagnostic" dtMenuItem>Diagnostic tools</a> </dt-menu-group> <a routerLink="/help" dtMenuItem>Item outside a group</a> </dt-menu> </dt-drawer> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-drawer-container> export class MenuWithinDrawerExample { @ViewChild(DtDrawer, { static: true }) drawer: DtDrawer; toggle(): void { this.drawer.toggle(); } doSomething(): void { // noop } } <dt-checkbox (change)="toggle()">Toggle drawer</dt-checkbox> <br /> <dt-drawer-container> <dt-drawer mode="side" position="start" class="menu-drawer"> <dt-menu aria-label="Menu inside Drawer Example"> <dt-menu-group label="Dashboards & reports"> <a routerLink="/dashboards" dtMenuItem>Dashboards</a> <a routerLink="/customchart" dtMenuItem>Create custom chart</a> <a routerLink="/reports" dtMenuItem>Reports</a> <button (click)="doSomething()" dtMenuItem>Something else</button> </dt-menu-group> <dt-menu-group label="Analyze"> <a routerLink="/problems" dtMenuItem>Problems</a> <a routerLink="/usersessions" dtMenuItem>User sessions</a> <a routerLink="/smartscape" dtMenuItem>Smartscape topology</a> <a routerLink="/diagnostic" dtMenuItem>Diagnostic tools</a> </dt-menu-group> <a routerLink="/help" dtMenuItem>Item outside a group</a> </dt-menu> </dt-drawer> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </dt-drawer-container> export class MenuWithinDrawerExample { @ViewChild(DtDrawer, { static: true }) drawer: DtDrawer; toggle(): void { this.drawer.toggle(); } doSomething(): void { // noop } }
´ Loading interactive demo...
<dt-context-dialog aria-label="Show more details" aria-label-close-button="Close context dialog" > <dt-menu aria-label="Menu inside Popup Example"> <dt-menu-group label="Dashboards & reports"> <a routerLink="/dashboards" dtMenuItem>Dashboards</a> <a routerLink="/customchart" dtMenuItem>Create custom chart</a> <a routerLink="/reports" dtMenuItem>Reports</a> <button (click)="doSomething()" dtMenuItem>Something else</button> </dt-menu-group> <dt-menu-group label="Analyze"> <a routerLink="/problems" dtMenuItem>Problems</a> <a routerLink="/usersessions" dtMenuItem>User sessions</a> <a routerLink="/smartscape" dtMenuItem>Smartscape topology</a> <a routerLink="/diagnostic" dtMenuItem>Diagnostic tools</a> </dt-menu-group> <a routerLink="/help" dtMenuItem>Item outside a group</a> </dt-menu> </dt-context-dialog> export class MenuWithinContextDialogExample { doSomething(): void { // noop } } <dt-context-dialog aria-label="Show more details" aria-label-close-button="Close context dialog" > <dt-menu aria-label="Menu inside Popup Example"> <dt-menu-group label="Dashboards & reports"> <a routerLink="/dashboards" dtMenuItem>Dashboards</a> <a routerLink="/customchart" dtMenuItem>Create custom chart</a> <a routerLink="/reports" dtMenuItem>Reports</a> <button (click)="doSomething()" dtMenuItem>Something else</button> </dt-menu-group> <dt-menu-group label="Analyze"> <a routerLink="/problems" dtMenuItem>Problems</a> <a routerLink="/usersessions" dtMenuItem>User sessions</a> <a routerLink="/smartscape" dtMenuItem>Smartscape topology</a> <a routerLink="/diagnostic" dtMenuItem>Diagnostic tools</a> </dt-menu-group> <a routerLink="/help" dtMenuItem>Item outside a group</a> </dt-menu> </dt-context-dialog> export class MenuWithinContextDialogExample { doSomething(): void { // noop } }