LilyDesignSystem.Blazor.LinkPicker
0.1.1
See the version list below for details.
dotnet add package LilyDesignSystem.Blazor.LinkPicker --version 0.1.1
NuGet\Install-Package LilyDesignSystem.Blazor.LinkPicker -Version 0.1.1
<PackageReference Include="LilyDesignSystem.Blazor.LinkPicker" Version="0.1.1" />
<PackageVersion Include="LilyDesignSystem.Blazor.LinkPicker" Version="0.1.1" />
<PackageReference Include="LilyDesignSystem.Blazor.LinkPicker" />
paket add LilyDesignSystem.Blazor.LinkPicker --version 0.1.1
#r "nuget: LilyDesignSystem.Blazor.LinkPicker, 0.1.1"
#:package LilyDesignSystem.Blazor.LinkPicker@0.1.1
#addin nuget:?package=LilyDesignSystem.Blazor.LinkPicker&version=0.1.1
#tool nuget:?package=LilyDesignSystem.Blazor.LinkPicker&version=0.1.1
LinkPicker (Blazor)
A headless control for page links: a single-icon button (a bundled home SVG) that opens a dropdown of links your app defines — "Home", "About Us", "Contact Us", "Privacy Policy". No CSS, no routes, no English.
The single source of truth is spec/index.md; this file is the guide.
Quick start
@using LilyDesignSystem.Blazor.Helpers
<LinkPicker Label="Pages" Links="_links" />
@code {
private readonly List<LinkItem> _links = new()
{
new() { Label = "Home", Href = "/" },
new() { Label = "About Us", Href = "/about/" },
new() { Label = "Contact Us", Href = "/contact/" },
new() { Label = "Privacy Policy", Href = "/privacy/" },
};
}
label names the button, the list and the tooltip. There is no default list: the package ships no routes and no English.
Client-side navigation
@inject NavigationManager Navigation
@implements IDisposable
<LinkPicker Label="Pages" Links="Links" />
@code {
private static readonly (string Label, string Href)[] Pages =
{
("Home", "/"), ("About Us", "/about/"), ("Contact Us", "/contact/"), ("Privacy Policy", "/privacy/"),
};
private IReadOnlyList<LinkItem> Links => Pages
.Select(p => new LinkItem { Label = p.Label, Href = p.Href, Current = Navigation.ToBaseRelativePath(Navigation.Uri).TrimEnd('/') == p.Href.Trim('/') })
.ToList();
}
Ctrl/Cmd/Shift/Alt-click, middle-click and newTab links always stay native browser behaviour.
LinkItem
| Field | Notes |
|---|---|
| label | Visible text. Yours, so it localises. |
| href | A route ("/about/") or a full URL. |
| id | Reported when a link is chosen; defaults to the href. |
| current | Marks the current page with aria-current="page". |
| newTab | target="_blank" with rel="noopener noreferrer". |
Props
| Label | string | yes | Accessible name of the button and the list; also the tooltip text. |
| Links | IReadOnlyList<LinkItem> | yes | { Id?, Label, Href, Current, NewTab }. Id defaults to Href. |
| OnNavigate | EventCallback<LinkNavigateEventArgs> | no | Fires after a link is chosen (Id, Href). |
| ChildContent | RenderFragment<LinkPickerContext> | no | Replaces the icon, not the links. |
| CssClass | string | no | Appended to the root class. |
| AdditionalAttributes | | | Captured and spread on the root. |
Styling
Headless: no CSS ships. Hooks: .link-picker, .link-picker-button, .link-picker-icon, .link-picker-tooltip,
.link-picker-list (carries hidden when closed), .link-picker-list-item, .link-picker-link. The monorepo's 45 themes/
style them all, including the popup placement.
Examples
examples/: the four-link example, router integration and a custom icon.
| Product | Versions Compatible and additional computed target framework versions. |
|---|---|
| .NET | 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. |
-
net10.0
- LilyDesignSystem.Blazor.Headless (>= 0.4.0)
- Microsoft.AspNetCore.Components.Web (>= 10.0.12)
NuGet packages (1)
Showing the top 1 NuGet packages that depend on LilyDesignSystem.Blazor.LinkPicker:
| Package | Downloads |
|---|---|
|
LilyDesignSystem.Blazor.PickerBar
Lily Design System Blazor picker bar: composes link-picker (optional), search-picker, theme-picker, locale-picker, text-size-picker, and share-picker into one page-header row. Headless, SSR-safe, no CSS. |
GitHub repositories
This package is not used by any popular GitHub repositories.