Pular para o conteúdo Herbst UI beta

Componente

Navigation menu

Uma barra de navegação com painéis dropdown. Os gatilhos abrem no hover ou pelo teclado, os painéis renderizam num viewport compartilhado ou inline, e o item ativo é um valor bidirecional. Disponha-a horizontal ou verticalmente.

Gatilhos, painéis e 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 {}

Valor controlado e atrasos

active: —

Vertical e painéis inline

Help

Referência de API

hb-navigation-menu

PropriedadeDescriçãoTipoPadrão
[(hbValue)] O valor do item aberto, ou null quando fechado. Bindável nos dois sentidos para controlá-lo externamente. string | null null
[hbOrientation] Dispõe a lista como uma linha ou uma coluna. 'horizontal' | 'vertical' 'horizontal'
[hbSide] De que lado do gatilho o painel de conteúdo abre. 'top' | 'bottom' | 'left' | 'right' 'bottom'
[hbViewport] Renderiza os painéis num único viewport compartilhado (com transição), ou false para renderizar cada um inline sob seu item. boolean true
[hbDelayDuration] Milissegundos a esperar antes de abrir um painel no hover. number 200
[hbSkipDelayDuration] Janela em que mover entre gatilhos abre instantaneamente, pulando o atraso de hover. number 300

Structure

PropriedadeDescriçãoTipoPadrão
hb-navigation-menu-list A linha/coluna de itens. component —
hb-navigation-menu-item [hbValue] Uma entrada. Seu valor identifica o estado aberto (gerado automaticamente se omitido). string ''
hb-navigation-menu-trigger O botão que alterna o painel de conteúdo de um item; renderiza um caret. component —
hb-navigation-menu-content O corpo do painel dropdown de um item. component —
a[hbNavigationMenuLink] [hbActive] Um link de navegação estilizado, dentro de um painel ou sozinho como item; hbActive marca a página atual. boolean false
hb-navigation-menu-indicator Uma seta que aponta para o gatilho ativo, deslizando entre eles. component —