Skip to content Herbst UI beta

Component

Navigation menu

A site navigation bar with dropdown panels. Triggers open on hover or keyboard, panels render in a shared viewport or inline, and the active item is a two-way bound value. Lay it out horizontally or vertically.

Triggers, panels & links

About
import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbNavigationMenuImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-navigation-menu-basic',
  imports: [HbNavigationMenuImports],
  template: `
    <div class="flex min-h-72 w-full items-start justify-center pt-2">
      <hb-navigation-menu>
        <hb-navigation-menu-list>
          <hb-navigation-menu-item hbValue="collection">
            <hb-navigation-menu-trigger>Photos</hb-navigation-menu-trigger>
            <hb-navigation-menu-content>
              <ul class="grid min-w-56 gap-1">
                <li>
                  <a hbNavigationMenuLink hbActive href="#" (click)="$event.preventDefault()"
                    >All photos</a
                  >
                </li>
                <li>
                  <a hbNavigationMenuLink href="#" (click)="$event.preventDefault()">Forests</a>
                </li>
                <li>
                  <a hbNavigationMenuLink href="#" (click)="$event.preventDefault()">Cities</a>
                </li>
              </ul>
            </hb-navigation-menu-content>
          </hb-navigation-menu-item>

          <hb-navigation-menu-item hbValue="resources">
            <hb-navigation-menu-trigger>Resources</hb-navigation-menu-trigger>
            <hb-navigation-menu-content>
              <ul class="grid min-w-56 gap-1">
                <li>
                  <a hbNavigationMenuLink href="#" (click)="$event.preventDefault()"
                    >Autumn guide</a
                  >
                </li>
                <li>
                  <a hbNavigationMenuLink href="#" (click)="$event.preventDefault()">Camera tips</a>
                </li>
              </ul>
            </hb-navigation-menu-content>
          </hb-navigation-menu-item>

          <hb-navigation-menu-item>
            <a hbNavigationMenuLink href="#" (click)="$event.preventDefault()">About</a>
          </hb-navigation-menu-item>

          <hb-navigation-menu-indicator />
        </hb-navigation-menu-list>
      </hb-navigation-menu>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoNavigationMenuBasicComponent {}

Controlled value & delays

active: —

Vertical & inline panels

Help

API reference

hb-navigation-menu

PropertyDescriptionTypeDefault
[(hbValue)] The value of the open item, or null when closed. Two-way bindable to drive it externally. string | null null
[hbOrientation] Lay the list out as a row or a column. 'horizontal' | 'vertical' 'horizontal'
[hbSide] Which side of the trigger the content panel opens on. 'top' | 'bottom' | 'left' | 'right' 'bottom'
[hbViewport] Render panels in a single shared viewport (with a morphing transition), or false to render each inline under its item. boolean true
[hbDelayDuration] Milliseconds to wait before opening a panel on hover. number 200
[hbSkipDelayDuration] Window in which moving between triggers opens instantly, skipping the hover delay. number 300

Structure

PropertyDescriptionTypeDefault
hb-navigation-menu-list The row/column of items. component —
hb-navigation-menu-item [hbValue] A single entry. Its value keys the open state (auto-generated if omitted). string ''
hb-navigation-menu-trigger The button that toggles an item’s content panel; renders a caret. component —
hb-navigation-menu-content The dropdown panel body for an item. component —
a[hbNavigationMenuLink] [hbActive] A styled navigation link, inside a panel or standing alone as an item; hbActive marks the current page. boolean false
hb-navigation-menu-indicator An arrow that points at the active trigger, sliding between them. component —