Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Blazored/Menu
A JavaScript free menu library for Blazor and Razor Components applications.
https://github.com/Blazored/Menu
blazor blazored hacktoberfest menu menu-navigation menubuilder menus nuget razor razor-components webassembly
Last synced: about 2 months ago
JSON representation
A JavaScript free menu library for Blazor and Razor Components applications.
- Host: GitHub
- URL: https://github.com/Blazored/Menu
- Owner: Blazored
- License: mit
- Created: 2019-03-09T15:08:57.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-10-22T06:33:20.000Z (almost 3 years ago)
- Last Synced: 2024-07-31T08:34:57.792Z (2 months ago)
- Topics: blazor, blazored, hacktoberfest, menu, menu-navigation, menubuilder, menus, nuget, razor, razor-components, webassembly
- Language: C#
- Homepage: https://blazored.github.io/Menu
- Size: 4.16 MB
- Stars: 177
- Watchers: 10
- Forks: 34
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Blazored Menu
A JavaScript free menu library for Blazor and Razor Components applications.
[](https://github.com/Blazored/Menu/actions/workflows/ci-main.yml)
[](https://www.nuget.org/packages/Blazored.Menu/)
## 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).
```
```
### 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
Home
Counter
Fetch data
```
You can also specify your own template for sub menu headers like so.
```html
Home
Sub Menu
Counter
Fetch data
```
_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
Home
Sub Menu
Counter
Fetch data
```
### 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
@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.