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>.
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.
Menu in use
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-drawermode="side"position="start"class="menu-drawer"><dt-menuaria-label="Menu inside Drawer Example"><dt-menu-grouplabel="Dashboards & reports"><arouterLink="/dashboards"dtMenuItem>Dashboards</a><arouterLink="/customchart"dtMenuItem>Create custom chart</a><arouterLink="/reports"dtMenuItem>Reports</a><button (click)="doSomething()"dtMenuItem>Something else</button></dt-menu-group><dt-menu-grouplabel="Analyze"><arouterLink="/problems"dtMenuItem>Problems</a><arouterLink="/usersessions"dtMenuItem>User sessions</a><arouterLink="/smartscape"dtMenuItem>Smartscape topology</a><arouterLink="/diagnostic"dtMenuItem>Diagnostic tools</a></dt-menu-group><arouterLink="/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>exportclass 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
}
}
