Menu - GitLite

KO | EN

gitlite — search

#python #llm #go #deep-learning #linux #macos #java #windows #cli #vue #pytorch #security #ios #open-source

Menu

(★ 176)

A JavaScript free menu library for Blazor and Razor Components applications.

File Explorer

Download Latest Version (.zip)

- - bug_report.md
  - feature_request.md
  - question.md
- - ci-main.yml
  - ci-pr.yml
  - release-drafter.yml
- FUNDING.yml
- release-drafter.yml
- - _Imports.razor
  - App.razor
  - appsettings.Development.json
  - appsettings.json
  - BlazorServerSide.csproj
  - Program.cs
  - Startup.cs
- - _Imports.razor
  - App.razor
  - BlazorWebAssembly.csproj
  - Program.cs
- - Blazored.Menu.csproj
  - BlazoredMenu.razor
  - BlazoredMenu.razor.cs
  - BlazoredMenuItem.razor
  - BlazoredMenuItem.razor.cs
  - BlazoredSubMenu.razor
  - BlazoredSubMenu.razor.cs
  - GlobalIconCss.cs
  - icon.png
  - MenuBuilder.cs
.gitignore
azure-pipelines.yml
Blazored.Menu.sln
LICENSE
README.md
screenshot.png

# Installation Guide

1. Get the code

git clone https://github.com/Blazored/Menu

Downloads the entire project code from GitHub to your computer.

cd Menu

Moves into the project folder you just downloaded.

2. .NET

Medium Recommended

Prerequisites

Git Needed to download the project code from GitHub.
.NET SDK The SDK required for the dotnet command.

dotnet add package Blazored.Menu

Type this command into your terminal and run it.

✅ After dotnet run, check the message or address shown in the terminal.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Blazored Menu

A JavaScript free menu library for Blazor and Razor Components applications.

[![Build & Test Main](https://github.com/Blazored/Menu/actions/workflows/ci-main.yml/badge.svg)](https://github.com/Blazored/Menu/actions/workflows/ci-main.yml)

[![Nuget](https://img.shields.io/nuget/v/blazored.menu.svg)](https://www.nuget.org/packages/Blazored.Menu/)

![Screenshot of component in action](https://raw.githubusercontent.com/Blazored/Menu/main/screenshot.png)

## Getting Setup
You can install the package via the nuget package manager just search for *Blazored.Menu*. You can also install via powershell using the following command.

```powershell
Install-Package Blazored.Menu
```

Or via the dotnet CLI.

```bash
dotnet add package Blazored.Menu
```

### Add reference to style sheet
Add the following line to the `head` tag of your `index.html` (Blazor WebAssembly App) or `_Host.cshtml` (Blazor Server app).

```
<link href="_content/Blazored.Menu/blazored-menu.css" rel="stylesheet" />
```

### Add Imports
Add the following to your *_Imports.razor*

```csharp
@using Blazored.Menu
```

## Usage
Blazored Menu allows menus to be built either using markup or dynamically, using the `MenuBuilder`.

### Building a menu with markup
You can build your menus using the following components.

- BlazoredMenu
- BlazoredMenuItem
- BlazoredSubMenu

For example.

```html
<BlazoredMenu>
  <BlazoredMenuItem>
    <NavLink href="/" Match="NavLinkMatch.All">Home</NavLink>
  </BlazoredMenuItem>
  <BlazoredSubMenu Header="Sub Menu">
        <MenuTemplate>
            <BlazoredMenuItem>
                <NavLink href="counter">Counter</NavLink>
            </BlazoredMenuItem>
        </MenuTemplate>
    </BlazoredSubMenu>
    <BlazoredMenuItem>
        <NavLink href="fetchdata">Fetch data</NavLink>
    </BlazoredMenuItem>
</BlazoredMenu>
```

You can also specify your own template for sub menu headers like so.

```html
<BlazoredMenu>
  <BlazoredMenuItem>
    <NavLink href="/" Match="NavLinkMatch.All">Home</NavLink>
  </BlazoredMenuItem>
  <BlazoredSubMenu Header="Sub Menu">
        <HeaderTemplate>
            <i class="my-cool-icon-class"></i> Sub Menu
        </HeaderTemplate>
        <MenuTemplate>
            <BlazoredMenuItem>
                <NavLink href="counter">Counter</NavLink>
            </BlazoredMenuItem>
            <BlazoredMenuItem>
                <NavLink href="fetchdata">Fetch data</NavLink>
            </BlazoredMenuItem>
        </MenuTemplate>
    </BlazoredSubMenu>
</BlazoredMenu>
```

_This feature is currently only available when building menus with markup._

You can also supply your own CSS classes to each of the 3 components
- BlazoredMenu
- BlazoredMenuItem
- BlazoredSubMenu

By setting the `Css` parameter.

```html
<BlazoredMenu Css="custom-menu-css">
  <BlazoredMenuItem Css="custom-menuitem-css">
    <NavLink href="/" Match="NavLinkMatch.All">Home</NavLink>
  </BlazoredMenuItem>
  <BlazoredSubMenu Header="Sub Menu" Css="custom-submenu-css">
        <HeaderTemplate>
            <i class="my-cool-icon-class"></i> Sub Menu
        </HeaderTemplate>
        <MenuTemplate>
            <BlazoredMenuItem>
                <NavLink href="counter">Counter</NavLink>
            </BlazoredMenuItem>
            <BlazoredMenuItem>
                <NavLink href="fetchdata">Fetch data</NavLink>
            </BlazoredMenuItem>
        </MenuTemplate>
    </BlazoredSubMenu>
</BlazoredMenu>
```

### Building a menu dynamically using the MenuBuilder
If you prefer you can use the `MenuBuilder` to create your menus using C#. The `MenuBuilder` exposes two methods `AddItem` and `AddSubMenu`. You can build the same menu from the markup example as follows.

```html
<BlazoredMenu MenuBuilder="@MenuBuilder" />

@functions {
    MenuBuilder MenuBuilder = new MenuBuilder();

protected override void OnInit()
    {
        MenuBuilder.AddItem(1, "Home", "/")
                   .AddSubMenu(2, "Sub Menu", new MenuBuilder().AddItem(1, "Counter", "counter")
                   .AddItem(3, "FetchData", "fetchdata");
    }
}
```

### MenuBuilder Options
When using the `MenuBuilder` you have a couple of extra options available via the `AddItem` and `AddSubMenu` methods.

- IsEnabled (default: true)
- IsVisible (default: true)

You can use these options to manipulate your menu items. `IsVisible`, if set to `false`, will mark your menu items as `display: none` making them invisible. Setting `IsEnabled` to `false` will render the item in a non-interactive state.