BlazorRamp.SkipTo 1.0.2

Prefix Reserved
.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package BlazorRamp.SkipTo --version 1.0.2
                    


                    

                
NuGet\Install-Package BlazorRamp.SkipTo -Version 1.0.2
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="BlazorRamp.SkipTo" Version="1.0.2" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="BlazorRamp.SkipTo" Version="1.0.2" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="BlazorRamp.SkipTo" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add BlazorRamp.SkipTo --version 1.0.2
                    


                    

                
#r "nuget: BlazorRamp.SkipTo, 1.0.2"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package BlazorRamp.SkipTo@1.0.2
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=BlazorRamp.SkipTo&version=1.0.2
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=BlazorRamp.SkipTo&version=1.0.2
                    


                            Install as a Cake Tool

Blazor Ramp - Skip To

The Blazor Ramp project aims to provide a suite of modular, accessibility-first Blazor components.

The Skip To component is a utility component that allows navigation to a named target on the page enabling its users to skip repetitive blocks of elements such as navigation menus. The focused target will either scroll into view or just snap into view dependent on if the user has reduced motion settings enabled on their device.

Requirements

It is a requirement that the Blazor Ramp Core script, Live Region Service, and associated Announcement History component are added alongside this component’s specific requirements (a stylesheet reference), as outlined below.

Note: Every package includes a reference to the Blazor Ramp Core project (where the aforementioned items reside) so there is no need to install this package separately (but it can be if you only require the Live Regions Service and Announcement History component).

The full documentation is available at: https://docs.blazorramp.uk

Installation

  1. Add the BlazorRamp.SkipTo NuGet package to your project using the Nuget Package Manager or the dotnet CLI.
dotnet add package BlazorRamp.SkipTo
  1. Add the following Core and Skip To stylesheet references to the <head> section of your application:
  • Blazor Web App / Blazor Server → App.razor
  • Blazor WebAssembly → wwwroot/index.html
<head>
	<link rel="stylesheet" href="_content/BlazorRamp.Core/assets/css/core.min.css" />
	<link rel="stylesheet" href="_content/BlazorRamp.SkipTo/assets/css/skip-to.min.css" />
</head>
  1. Add the following Blazor Ramp Core live region script after Blazors script, as follows:
  • Blazor Web App / Blazor Server → App.razor
  • Blazor WebAssembly → wwwroot/index.html
<script src="_framework/blazor.web.js"></script>
<script type="module" src="_content/BlazorRamp.Core/assets/js/core-live-region.js"></script>
  1. Register BlazorRamp services in the Program.cs file (Both server and client if using Server and WebAssembly interactive rendermode)

Add the following line to the service registration section:

@using BlazorRamp.Core.Common.Extensions;

builder.Services.AddBlazorRampCore();
  1. Add the <AnnouncementHistory /> component with your parameter values above the Router component contained in either:
  • Blazor Web App / Blazor Server → Routes.razor
  • Blazor WebAssembly → App.razor
<AnnouncementHistory RefreshText="Refresh" ClearCloseText="Clear & Close" CloseText="Close" NoDataText="No announcements" 
Title="Recent Announcements" TriggerVisible="true" TriggerText="Alerts" />

<Router AppAssembly . . .

Using the Skip To Component

The Skip To component is designed with two use cases in mind. The first will probably cover 90% of cases, where it simply sits at the top-right corner of the page and always targets the main content element. In the case of Blazor, that main content is most likely fixed, with the @Body injecting the content.

Given that a skip to for the site may be on a non-interactive area, the Skip To has been designed to work with or without interactivity at the SkipToType.Site level. Currently, I only support having one Skip to at the Site level which it positioned top (LTR/RTL).

<SkipTo IconVisible="true" SkipToText="Skip to content" SkipToType="SkipToType.Site" TargetID="app__main" />

The second use case is where you have a block of repeated items on each interactive page and need to skip this content i.e. a secondary skip to. You can have multiple skip to components on a page at this level (SkipToType.Section). Each skip to for a section uses absolute positioning relative to its parent (that has a position set, such as relative) and will be position top (LTR/RTL) within its parent

<SkipTo IconVisible="true" SkipToText="Skip to section content" SkipToType="SkipToType.Section" TargetID="section-one" />

Note: Don't forget to add tabindex="-1" on the target element.

Please see the full documentation for more information: https://docs.blazorramp.uk

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.0.2 86 2/9/2026
1.0.1 85 2/2/2026
1.0.0 88 2/2/2026

Added an additional css property to the optional icon to use the em unit so it scales up with base font-size changes.