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.

<dt-secondary-nav aria-label="Default Secondary Nav Example">
  <dt-secondary-nav-title>Settings</dt-secondary-nav-title>
  <dt-secondary-nav-section>
    <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 dtSecondaryNavLinkActive routerLink="/">
      Monitored technologies
    </a>
    <a dtSecondaryNavLink routerLink="/">Monitoring overview</a>
    <a dtSecondaryNavLink routerLink="/">Host naming</a>
  </dt-secondary-nav-section>
  <dt-secondary-nav-section>
    <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>

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

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.

DtSecondaryNavLinkActive

Inputs

Name Type Description
dtSecondaryNavLinkActive boolean Whether or not a link should be active which would set the entire section to active.

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

<dt-secondary-nav aria-label="Multi Section Secondary Nav Example" multi>
  <dt-secondary-nav-title>Settings</dt-secondary-nav-title>
  <dt-secondary-nav-section multi>
    <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 dtSecondaryNavLinkActive routerLink="/">
      Monitored technologies
    </a>
    <a dtSecondaryNavLink routerLink="/">Monitoring overview</a>
    <a dtSecondaryNavLink routerLink="/">Host naming</a>
  </dt-secondary-nav-section>
  <dt-secondary-nav-section>
    <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>

In order to set the section to a highlighted active state, simply add the dtSecondaryNavLinkActive directive to any link in the nav, section, or groups. This will cause the element to be styled in the active design.

<dt-secondary-nav aria-label="Active Section Secondary Nav Example">
  <dt-secondary-nav-title>Settings</dt-secondary-nav-title>
  <dt-secondary-nav-section>
    <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 [dtSecondaryNavLinkActive]="true" routerLink="/">
      Monitored technologies
    </a>
    <a dtSecondaryNavLink routerLink="/">Monitoring overview</a>
    <a dtSecondaryNavLink routerLink="/">Host naming</a>
  </dt-secondary-nav-section>
</dt-secondary-nav>

Using Angular RouterLinkActive

In order to dynamically expand and activate a section or a link, you an use the routerLinkActive directive directly on a link inside or outside of a group.

<dt-secondary-nav aria-label="Router Link Active Secondary Nav Example">
  <dt-secondary-nav-title>Settings</dt-secondary-nav-title>
  <dt-secondary-nav-section>
    <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
      routerLinkActive
      dtSecondaryNavLink
      #rla="routerLinkActive"
      routerLink="/components/secondary-nav"
      [dtSecondaryNavLinkActive]="rla.isActive"
    >
      Monitored technologies
    </a>
    <a dtSecondaryNavLink routerLink="/">Monitoring overview</a>
    <a dtSecondaryNavLink routerLink="/">Host naming</a>
  </dt-secondary-nav-section>
</dt-secondary-nav>

<dt-secondary-nav> can be used to route to external links. Instead of using <dt-secondary-nav-section>, use an anchor with the dtSecondaryNavLink directive.

<dt-secondary-nav aria-label="External Links Secondary Nav Example">
  <dt-secondary-nav-title>Settings</dt-secondary-nav-title>
  <dt-secondary-nav-section>
    <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">
      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>
  <a dtSecondaryNavLink dtSecondaryNavLinkActive href="https://google.com">
    <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>
  </a>
</dt-secondary-nav>

Removing the title

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

<dt-secondary-nav aria-label="Title Secondary Nav Example">
  <dt-secondary-nav-title *ngIf="title">{{ title }}</dt-secondary-nav-title>
  <dt-secondary-nav-section>
    <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 dtSecondaryNavLinkActive routerLink="/">
      Monitored technologies
    </a>
    <a dtSecondaryNavLink routerLink="/">Monitoring overview</a>
    <a dtSecondaryNavLink routerLink="/">Host naming</a>
  </dt-secondary-nav-section>
</dt-secondary-nav>
<input
  class="dt-title-input"
  type="text"
  dtInput
  placeholder="Please insert title"
  aria-label="Please insert title"
  [(ngModel)]="title"
/>