Menu

A menu provides a list of links which can be grouped according to categories. It has a clear hierarchy and allows for a condensed way to help users to navigate or perform actions.

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 } }

States

Menu entries that can be selected are highlighted in a darker colour when in hover state.

Responsive behavior

A menu inherits the width of its parent element. If the width of the parent element is smaller than the longest entry in the menu, the text of this entry is truncated and followed by an ellipses.

This component is typically used for static menus, such as the global navigation menu 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 } }

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 } }

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 can be used as a

standalone component, in a <dt-drawer> or in a <dt-context-dialog>.

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 moremenu items
<a dtMenuItem>/<button dtMenuItem> - A menu item which can either berepresented by an anchor (if the item is used for site navigation) or a button(in case the item should merely trigger some code)

Loading interactive demo...

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 {}

DtMenu Inputs

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

DtMenuGroup Inputs

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

Examples

Uses a menu within a context dialog component.

Loading interactive demo...

export class MenuWithinContextDialogExample { doSomething(): void { // noop } }

Uses a menu within a drawer component.

Loading interactive demo...

export class MenuWithinDrawerExample { @ViewChild(DtDrawer, { static: true }) drawer: DtDrawer; toggle(): void { this.drawer.toggle(); } doSomething(): void { // noop } }

States

Responsive behavior

Menu in use

Imports

DtMenu Inputs

DtMenuGroup Inputs

Examples