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

<dt-menu aria-label="Default Menu Example" class="dt-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>

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).

<dt-checkbox (change)="toggle()">Toggle drawer</dt-checkbox>
<br />
<dt-drawer-container>
  <dt-drawer mode="side" position="start" class="dt-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>
 
<dt-context-dialog
  aria-label="Show more details"
  ariaLabelClose="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>