Osirion.Blazor.Navigation
Osirion.Blazor.Navigation holds three components for site navigation. Each has its own page with parameters,
behavior and styling:
| Component | What it does |
|---|---|
| Menu | A site menu with submenus, mega menus and a mobile drawer that open with CSS only, so it works under static SSR without JavaScript. Its parts are MenuItem, MenuGroup, MenuDivider, MenuCallToAction, MenuPanel, MenuPanelLink and MenuImageCard. |
| ScrollToTop | A "back to top" button that appears once the visitor scrolls down. ScrollToTopProvider renders it from the registered settings. |
| EnhancedNavigation | Controls where the page scrolls after a Blazor enhanced navigation. |
The package also has Osirion.Blazor.Navigation.Extensions and Osirion.Blazor.Navigation.Options for registration and
configuration, described below. Breadcrumbs and read more links are in the Core package, see the
navigation components.
Setup
dotnet add package Osirion.Blazor.Navigation
The Osirion.Blazor meta-package includes it, and AddOsirion() registers enhanced navigation and the scroll-to-top
button with their defaults. With this package alone:
using Osirion.Blazor.Components;
using Osirion.Blazor.Navigation.Extensions;
builder.Services.AddOsirionNavigation(navigation => navigation
.AddEnhancedNavigation(options => options.Behavior = ScrollBehavior.Smooth)
.AddScrollToTop(options => options.VisibilityThreshold = 400));
Add @using Osirion.Blazor.Navigation.Components to _Imports.razor. The enums ScrollBehavior and Position
are in Osirion.Blazor.Components. Menu and its parts need no registration. ScrollToTopProvider needs the
ScrollToTopManager that AddScrollToTop registers, so call it (or AddOsirion()) before you use the provider.
Configuration
AddOsirionNavigation(builder.Configuration) and AddOsirion(builder.Configuration) read the settings from
configuration. AddOsirionNavigation(configuration) registers a component only when its section exists:
{
"Osirion": {
"Navigation": {
"Enhanced": {
"Behavior": "Smooth",
"ResetScrollOnNavigation": true,
"PreserveScrollForSamePageNavigation": true
},
"ScrollToTop": {
"Position": "BottomRight",
"VisibilityThreshold": 300,
"Title": "Back to top"
}
}
}
}
Osirion:Navigation:Enhanced binds EnhancedNavigationOptions:
| Option | Type | Default |
|---|---|---|
Behavior |
ScrollBehavior |
Auto |
ResetScrollOnNavigation |
bool |
true |
PreserveScrollForSamePageNavigation |
bool |
true |
Osirion:Navigation:ScrollToTop binds ScrollToTopOptions:
| Option | Type | Default |
|---|---|---|
Position |
Position |
BottomRight |
Behavior |
ScrollBehavior |
Smooth |
VisibilityThreshold |
int |
300 |
Text |
string? |
null |
Title |
string |
"Scroll to top" |
CssClass |
string? |
null |
CustomIcon |
string? |
null |
IconCssClass |
string? |
null |
Enabled |
bool |
true |
A parameter on the component overrides the configured value for that place. The meaning of each option is on the ScrollToTop and EnhancedNavigation pages.
Related
- Theming: put a
ThemeTogglein the menu. - CMS navigation: menus, breadcrumbs and a table of contents built from your content.
- Navigation components: the group of navigation pages, including breadcrumbs and read-more links.
- Osirion.Blazor.Navigation on NuGet