Barista - Secondary nav

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>

Setting an active section and link

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>

Setting external links

<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"
/>