Secondary nav

The secondary nav component is a navigation menu that can contain internal and external links.

The secondary nav component provides a navigation menu which has a clear hierarchy and allows for a condensed way to help users navigate in-app routing or external links.

´ Loading interactive demo...
<dt-secondary-nav aria-label="Default Secondary Nav Example"> <dt-secondary-nav-title>Settings</dt-secondary-nav-title> <dt-secondary-nav-section expandable active> <dt-secondary-nav-section-title> Monitoring </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Setup and overview </dt-secondary-nav-section-description> <a dtSecondaryNavLink routerLink="/" class="dt-secondary-nav-active"> Monitored technologies </a> <a dtSecondaryNavLink routerLink="/">Monitoring overview</a> <a dtSecondaryNavLink routerLink="/">Host naming</a> </dt-secondary-nav-section> <dt-secondary-nav-section expandable> <dt-secondary-nav-section-title> Processes and containers </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Detection and naming </dt-secondary-nav-section-description> <dt-secondary-nav-group label="Processes"> <a dtSecondaryNavLink routerLink="/">Process group monitoring</a> <a dtSecondaryNavLink routerLink="/">Process group detection</a> <a dtSecondaryNavLink routerLink="/">Process group naming</a> </dt-secondary-nav-group> <dt-secondary-nav-group label="Containers"> <a dtSecondaryNavLink routerLink="/">Container monitoring</a> </dt-secondary-nav-group> </dt-secondary-nav-section> </dt-secondary-nav> export class SecondaryNavDefaultExample {} <dt-secondary-nav aria-label="Default Secondary Nav Example"> <dt-secondary-nav-title>Settings</dt-secondary-nav-title> <dt-secondary-nav-section expandable active> <dt-secondary-nav-section-title> Monitoring </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Setup and overview </dt-secondary-nav-section-description> <a dtSecondaryNavLink routerLink="/" class="dt-secondary-nav-active"> Monitored technologies </a> <a dtSecondaryNavLink routerLink="/">Monitoring overview</a> <a dtSecondaryNavLink routerLink="/">Host naming</a> </dt-secondary-nav-section> <dt-secondary-nav-section expandable> <dt-secondary-nav-section-title> Processes and containers </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Detection and naming </dt-secondary-nav-section-description> <dt-secondary-nav-group label="Processes"> <a dtSecondaryNavLink routerLink="/">Process group monitoring</a> <a dtSecondaryNavLink routerLink="/">Process group detection</a> <a dtSecondaryNavLink routerLink="/">Process group naming</a> </dt-secondary-nav-group> <dt-secondary-nav-group label="Containers"> <a dtSecondaryNavLink routerLink="/">Container monitoring</a> </dt-secondary-nav-group> </dt-secondary-nav-section> </dt-secondary-nav> export class SecondaryNavDefaultExample {}

A title for the secondary nav is optional. The secondary nav contains individual expandable and non-expandable menu sections. Within a section the title is mandatory whereas a description is optional. Links within a section can be a list or grouped according to categories.

Imports

You have to import the DtSecondaryNavModule when you want to use the <dt-secondary-nav>.

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

Initialization

Use the <dt-secondary-nav> to add a secondary nav element to your page. Add a <dt-secondary-nav-title> element if the secondary nav should have a headline.

By using the <dt-secondary-nav-section> element, which is provided in the secondary-nav module, you can add individual expandable and non-expandable menu items. Within each section element, you must provide a <dt-secondary-nav-section-title>, and you can provide the optional <dt-secondary-nav-section-description> for titles and descriptions.

Within the section element, you define links with <a dtSecondaryNavLink> directive elements. Links can be wrapped in groups with the <dt-secondary-nav-group> element. The dtSecondaryNavLink directive must be included on inner section links in order to style them.

DtSecondaryNav

Inputs

Name Type Description
aria-label string An accessibility label describing the menu.
multi boolean Whether or not the nav allows multiple sections to be opened simultaneously.

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

DtSecondaryNavSection

Inputs

Name Type Description
expanded boolean Whether or not the section is expanded.
expandable boolean Whether or not the section can be expanded.
active boolean Whether or not the section is active and is highlighted.
external boolean Whether or not the section link routes internally or externally.
href string The router path or URL used for navigation.

Outputs

Name Type Description
expandChange EventEmitter<boolean> Emits an event when the expanded state changes.
expanded EventEmitter<void> Event emitted when the section is expanded.
collapsed EventEmitter<void> Event emitted when the section is collapsed.

DtSecondaryNavGroup

Inputs

Name Type Description
label string The value used in the group label, displayed above the cluster of links.

Multiple sections open simultaneously

By default, only one section can be opened at a time unless the multi input is added to <dt-secondary-nav>.

´ Loading interactive demo...
<dt-secondary-nav aria-label="Multi Section Secondary Nav Example" multi> <dt-secondary-nav-title>Settings</dt-secondary-nav-title> <dt-secondary-nav-section expandable active> <dt-secondary-nav-section-title> Monitoring </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Setup and overview </dt-secondary-nav-section-description> <a dtSecondaryNavLink routerLink="/" class="dt-secondary-nav-active"> Monitored technologies </a> <a dtSecondaryNavLink routerLink="/">Monitoring overview</a> <a dtSecondaryNavLink routerLink="/">Host naming</a> </dt-secondary-nav-section> <dt-secondary-nav-section expandable> <dt-secondary-nav-section-title> Processes and containers </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Detection and naming </dt-secondary-nav-section-description> <dt-secondary-nav-group label="Processes"> <a dtSecondaryNavLink routerLink="/">Process group monitoring</a> <a dtSecondaryNavLink routerLink="/">Process group detection</a> <a dtSecondaryNavLink routerLink="/">Process group naming</a> </dt-secondary-nav-group> <dt-secondary-nav-group label="Containers"> <a dtSecondaryNavLink routerLink="/">Container monitoring</a> </dt-secondary-nav-group> </dt-secondary-nav-section> </dt-secondary-nav> export class SecondaryNavMultiExample {} <dt-secondary-nav aria-label="Multi Section Secondary Nav Example" multi> <dt-secondary-nav-title>Settings</dt-secondary-nav-title> <dt-secondary-nav-section expandable active> <dt-secondary-nav-section-title> Monitoring </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Setup and overview </dt-secondary-nav-section-description> <a dtSecondaryNavLink routerLink="/" class="dt-secondary-nav-active"> Monitored technologies </a> <a dtSecondaryNavLink routerLink="/">Monitoring overview</a> <a dtSecondaryNavLink routerLink="/">Host naming</a> </dt-secondary-nav-section> <dt-secondary-nav-section expandable> <dt-secondary-nav-section-title> Processes and containers </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Detection and naming </dt-secondary-nav-section-description> <dt-secondary-nav-group label="Processes"> <a dtSecondaryNavLink routerLink="/">Process group monitoring</a> <a dtSecondaryNavLink routerLink="/">Process group detection</a> <a dtSecondaryNavLink routerLink="/">Process group naming</a> </dt-secondary-nav-group> <dt-secondary-nav-group label="Containers"> <a dtSecondaryNavLink routerLink="/">Container monitoring</a> </dt-secondary-nav-group> </dt-secondary-nav-section> </dt-secondary-nav> export class SecondaryNavMultiExample {}

In order to set the section to a highlighted active state, the <dt-secondary-nav-section> has a active input that can be used as a directive or as an input. In order to set a dtSecondaryNavLink to a highlighted active state, you must add the following css class: dt-secondary-nav-active.

´ Loading interactive demo...
<dt-secondary-nav aria-label="Active Section Secondary Nav Example"> <dt-secondary-nav-title>Settings</dt-secondary-nav-title> <dt-secondary-nav-section expandable [active]="active"> <dt-secondary-nav-section-title> Monitoring </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Setup and overview </dt-secondary-nav-section-description> <a dtSecondaryNavLink routerLink="/" [class.dt-secondary-nav-active]="active" > Monitored technologies </a> <a dtSecondaryNavLink routerLink="/">Monitoring overview</a> <a dtSecondaryNavLink routerLink="/">Host naming</a> </dt-secondary-nav-section> </dt-secondary-nav> <button dt-button (click)="active = !active">toggle active</button> export class SecondaryNavActiveExample { active = true; } <dt-secondary-nav aria-label="Active Section Secondary Nav Example"> <dt-secondary-nav-title>Settings</dt-secondary-nav-title> <dt-secondary-nav-section expandable [active]="active"> <dt-secondary-nav-section-title> Monitoring </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Setup and overview </dt-secondary-nav-section-description> <a dtSecondaryNavLink routerLink="/" [class.dt-secondary-nav-active]="active" > Monitored technologies </a> <a dtSecondaryNavLink routerLink="/">Monitoring overview</a> <a dtSecondaryNavLink routerLink="/">Host naming</a> </dt-secondary-nav-section> </dt-secondary-nav> <button dt-button (click)="active = !active">toggle active</button> export class SecondaryNavActiveExample { active = true; }

<dt-secondary-nav> can be used to route to external links when the expandable input is not included or set to false. Then you must use the external input.

´ Loading interactive demo...
<dt-secondary-nav aria-label="External Links Secondary Nav Example"> <dt-secondary-nav-title>Settings</dt-secondary-nav-title> <dt-secondary-nav-section expandable active> <dt-secondary-nav-section-title> Monitoring </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Setup and overview </dt-secondary-nav-section-description> <a dtSecondaryNavLink href="https://google.com" class="dt-secondary-nav-active" > Monitored technologies </a> <a dtSecondaryNavLink href="https://google.com">Monitoring overview</a> <a dtSecondaryNavLink href="https://google.com">Host naming</a> </dt-secondary-nav-section> <dt-secondary-nav-section href="https://google.com" [external]="true"> <dt-secondary-nav-section-title >External Link</dt-secondary-nav-section-title > <dt-secondary-nav-section-description >Non expanding section</dt-secondary-nav-section-description > </dt-secondary-nav-section> </dt-secondary-nav> export class SecondaryNavExternalExample {} <dt-secondary-nav aria-label="External Links Secondary Nav Example"> <dt-secondary-nav-title>Settings</dt-secondary-nav-title> <dt-secondary-nav-section expandable active> <dt-secondary-nav-section-title> Monitoring </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Setup and overview </dt-secondary-nav-section-description> <a dtSecondaryNavLink href="https://google.com" class="dt-secondary-nav-active" > Monitored technologies </a> <a dtSecondaryNavLink href="https://google.com">Monitoring overview</a> <a dtSecondaryNavLink href="https://google.com">Host naming</a> </dt-secondary-nav-section> <dt-secondary-nav-section href="https://google.com" [external]="true"> <dt-secondary-nav-section-title >External Link</dt-secondary-nav-section-title > <dt-secondary-nav-section-description >Non expanding section</dt-secondary-nav-section-description > </dt-secondary-nav-section> </dt-secondary-nav> export class SecondaryNavExternalExample {}

Disabling expandable sections

In order to disable the expanding behavior of a section and use it as a regular menu link, do not include the expandable input on <dt-secondary-nav-section>.

´ Loading interactive demo...
<dt-secondary-nav aria-label="Expandable Secondary Nav Example"> <dt-secondary-nav-title>Settings</dt-secondary-nav-title> <dt-secondary-nav-section href="/" active> <dt-secondary-nav-section-title> Monitoring </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Setup and overview </dt-secondary-nav-section-description> </dt-secondary-nav-section> <dt-secondary-nav-section href="/"> <dt-secondary-nav-section-title> Processes and containers </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Detection and naming </dt-secondary-nav-section-description> </dt-secondary-nav-section> <dt-secondary-nav-section href="/"> <dt-secondary-nav-section-title> Link without description </dt-secondary-nav-section-title> </dt-secondary-nav-section> </dt-secondary-nav> export class SecondaryNavExpandableExample {} <dt-secondary-nav aria-label="Expandable Secondary Nav Example"> <dt-secondary-nav-title>Settings</dt-secondary-nav-title> <dt-secondary-nav-section href="/" active> <dt-secondary-nav-section-title> Monitoring </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Setup and overview </dt-secondary-nav-section-description> </dt-secondary-nav-section> <dt-secondary-nav-section href="/"> <dt-secondary-nav-section-title> Processes and containers </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Detection and naming </dt-secondary-nav-section-description> </dt-secondary-nav-section> <dt-secondary-nav-section href="/"> <dt-secondary-nav-section-title> Link without description </dt-secondary-nav-section-title> </dt-secondary-nav-section> </dt-secondary-nav> export class SecondaryNavExpandableExample {}

Removing the title

<dt-secondary-nav-title> is optional and can safely be excluded in order to hide the nav header.

´ Loading interactive demo...
<dt-secondary-nav aria-label="Title Secondary Nav Example"> <dt-secondary-nav-title *ngIf="title">{{ title }}</dt-secondary-nav-title> <dt-secondary-nav-section expandable> <dt-secondary-nav-section-title> Monitoring </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Setup and overview </dt-secondary-nav-section-description> <a dtSecondaryNavLink routerLink="/"> Monitored technologies </a> <a dtSecondaryNavLink routerLink="/">Monitoring overview</a> <a dtSecondaryNavLink routerLink="/">Host naming</a> </dt-secondary-nav-section> </dt-secondary-nav> <input type="text" dtInput placeholder="Please insert title" aria-label="Please insert title" [(ngModel)]="title" /> export class SecondaryNavTitleExample { title = 'Settings'; } <dt-secondary-nav aria-label="Title Secondary Nav Example"> <dt-secondary-nav-title *ngIf="title">{{ title }}</dt-secondary-nav-title> <dt-secondary-nav-section expandable> <dt-secondary-nav-section-title> Monitoring </dt-secondary-nav-section-title> <dt-secondary-nav-section-description> Setup and overview </dt-secondary-nav-section-description> <a dtSecondaryNavLink routerLink="/"> Monitored technologies </a> <a dtSecondaryNavLink routerLink="/">Monitoring overview</a> <a dtSecondaryNavLink routerLink="/">Host naming</a> </dt-secondary-nav-section> </dt-secondary-nav> <input type="text" dtInput placeholder="Please insert title" aria-label="Please insert title" [(ngModel)]="title" /> export class SecondaryNavTitleExample { title = 'Settings'; }