Visão geral da barra de navegação Blazor

    A Ignite UI for Blazor Navbar informa o usuário sobre sua posição atual em um aplicativo. A Barra de Navegação também pode fornecer links para ações rápidas, como pesquisa ou favoritos, ajudando os usuários a navegar suavemente por um aplicativo sem tentar mover para rotas ou estados inválidos. A barra fica no topo do contêiner em que é colocada.

    Blazor Navbar Example

    O exemplo a seguir representa uma IgbNavbar com ícones e cabeçalho de texto:

    Usage

    Antes de usar o IgbNavbar, você precisa registrá-lo da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule));

    Para uma introdução completa à Ignite UI for Blazor, leia o tópico Introdução.

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbNavbar. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    Então, no modelo do IgbNavbar, você pode adicionar o seguinte código para mostrar um IgbNavbar básico apenas com um título:

    <IgbNavbar>Navigation Title</IgbNavbar>

    Content

    Você pode adicionar alguns elementos IgbIcon usando os slots Start e End na IgbNavbar, como mostrado no exemplo a seguir:

    Styling

    The NavBar component exposes several CSS parts, giving you full control over its style:

    Name Description
    base The base wrapper of the navigation bar.
    start The left aligned icon container.
    middle The navigation bar title container.
    end The right aligned action icons container. 
    igc-icon {
  color: var(--ig-primary-500);
}

igc-navbar {
  background-color: var(--ig-secondary-200);
}

igc-navbar::part(middle) {
  font-family: Titillium Web, sans-serif;
  color: var(--ig-primary-500);;
}

    Se tudo correr bem, você deverá ver o seguinte no seu navegador:

    API References

    Additional Resources