Blazor - Como criar Sub-menus de navegação

Hoje veremos como criar sub-menus de navegação no Blazor.

Se você esta chegando agora e não sabe o que é o Blazor leia o artigo ASP .NET Core - Iniciando com o Blazor - Macoratti; se você já conhece e quer saber mais pode fazer o curso de Blazor Essencial.  

Vamos aprender como criar sub-menus e outros recursos em aplicações Blazor.

Recursos usados:

Criando o projeto Blazor (Cliente side) no VS Community 2019

Abra o VS 2019 Community (versão mínima 16.5) e selecione a opção Create a New Project;

A seguir selecione a opção Blazor app e clique em next;

Informe o nome do projeto :  Blazor_Submenu1, a localização e clique em Create;

A seguir teremos uma janela com duas opções :

  1. Blazor Server App
  2. Blazor WebAssembly App

Para o nosso projeto qualquer uma das opções de projeto vai funcionar.

Selecione a segunda opção - Blazor Server App e clique no botão Create.

Com o projeto criado vamos abrir o componente NavMenu.razor na pasta Shared que contém a definição dos links dos menus da aplicação.

Vamos criar um novo item de menu como um link para um menu Gráficos e no seu interior dois links: um para gráfico de barras e outro para gráfico de pizza.

Para isso inclua o código em destacado em azul conforme abaixo:

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">Blazor_Submenu1</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" @onclick="()=> expandirSubMenu =! expandirSubMenu">
                  <span class="oi oi-graph" aria-hidden="true"></span> Gráficos
            </NavLink>
            @if(expandirSubMenu)
            {
                <NavLink class="expand-menu" href="">
                     <span class="oi oi-bar-chart" aria-hidden="true"></span> Barras
                 </NavLink>
                 <NavLink class="expand-menu" href="">
                     <span class="oi oi-pie-chart" aria-hidden="true"></span> Pizza
                  </NavLink>
             }
          </li>

    </ul>
</div>
@code {
    private bool collapseNavMenu = true;
    private bool expandirSubMenu;
    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

Vamos entender o código:

1- Criamos a variável expandirSubMenu do tipo booleana na seção de código do arquivo:

    private bool expandirSubMenu;

2- Criamos um novo item de menu, o link Gráficos

             <NavLink class="nav-link" href="" @onclick="()=> expandirSubMenu =! expandirSubMenu">
                  <span class="oi oi-graph" aria-hidden="true"></span> Gráficos
            </NavLink>

Neste link definimos um evento onclick que vai permitir expandir e retrair os submenus:

3- No interior deste link criamos dois links : Barras e Pizza dentro de um comando if que verifica o valor da variável expandirSubMenu para expandir/retrair os submenus

            @if(expandirSubMenu)
            {
                <NavLink class="expand-menu" href="">
                     <span class="oi oi-bar-chart" aria-hidden="true"></span> Barras
                 </NavLink>
                 <NavLink class="expand-menu" href="">
                     <span class="oi oi-pie-chart" aria-hidden="true"></span> Pizza
                  </NavLink>
             }

Tudo isso esta envolvido por uma tag <li class="nav-item px-3"></liv>.

Executando o projeto teremos o resultado a seguir:

Vamos agora alterar o código para criar o submenu dentro do menu Gráfico.

Altere o código do arquivo NavMenu.razor conforme abaixo:

...
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>

        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" @onclick="()=> expandirSubMenu =! expandirSubMenu">
                <span class="oi oi-graph" aria-hidden="true"></span> Gráficos
            </NavLink>
            @if (expandirSubMenu)
            {
                <ul class="nav flex-column">
                    <li class="nav-item px-3">
                        <NavLink class="expand-menu" href="">
                            <span class="oi oi-bar-chart" aria-hidden="true"></span> Barras
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="expand-menu" href="">
                            <span class="oi oi-pie-chart" aria-hidden="true"></span> Pizza
                        </NavLink>
                    </li>
                </ul>
             }
        </li>

     </ul>
</div>
...

Aqui a alteração feita incluiu os dois submenus,  Barras e Pizza, dentro de uma tag  
<ul class="nav flex-column"></ul>  on .

Executando o projeto agora teremos o resultado abaixo:

Apenas para ilustrar podemos criar um componenente Graficos.razor na pasta Pages e definir os links dos menus para este componente:

@page "/graficos"
@page "/graficos/barra"
@page "/graficos/pizza"

<h3>Graficos de Barras e/ou Pizza</h3>
@code {
}

E no arquivo NavMenu.razor vamos incluir as rotas definidas na tage href:

...
  <li class="nav-item px-3">
            <NavLink class="nav-link" href="graficos" @onclick="()=> expandirSubMenu =! expandirSubMenu">
                <span class="oi oi-graph" aria-hidden="true"></span> Gráficos
            </NavLink>
            @if (expandirSubMenu)
            {
                <ul class="nav flex-column">
                    <li class="nav-item px-3">
                        <NavLink class="expand-menu" href="graficos/barra">
                            <span class="oi oi-bar-chart" aria-hidden="true"></span> Barras
                        </NavLink>
                    </li>
                    <li class="nav-item px-3">
                        <NavLink class="expand-menu" href="graficos/pizza">
                            <span class="oi oi-pie-chart" aria-hidden="true"></span> Pizza
                        </NavLink>
                    </li>
                </ul>
             }
  </li>
...

O resultado da execução do projeto agora mostra os links acionando o componente Graficos:

Pegue o código do projeto aqui:   Blazor_Submenu1.zip (sem as referências)

"E nós conhecemos, e cremos no amor que Deus nos tem. Deus é amor; e quem está em amor está em Deus, e Deus nele."
1 João 4:16


 

Referências:

José Carlos Macoratti