LilyDesignSystem.Blazor.LinkPicker 0.1.1

There is a newer version of this package available.
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
                    
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="LilyDesignSystem.Blazor.LinkPicker" Version="0.1.1" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="LilyDesignSystem.Blazor.LinkPicker" Version="0.1.1" />
                    
Directory.Packages.props
<PackageReference Include="LilyDesignSystem.Blazor.LinkPicker" />
                    
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 LilyDesignSystem.Blazor.LinkPicker --version 0.1.1
                    
#r "nuget: LilyDesignSystem.Blazor.LinkPicker, 0.1.1"
                    
#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 LilyDesignSystem.Blazor.LinkPicker@0.1.1
                    
#: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=LilyDesignSystem.Blazor.LinkPicker&version=0.1.1
                    
Install as a Cake Addin
#tool nuget:?package=LilyDesignSystem.Blazor.LinkPicker&version=0.1.1
                    
Install as a Cake Tool

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 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. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

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.

Version Downloads Last Updated
0.2.0 116 10/16/2026
0.1.1 102 10/7/2026
0.1.0 102 10/7/2026