Layout & navigation

AppFloatingDock

A macOS-style dock of icon links — items magnify as the pointer approaches.

<app-floating-dock><app-dock-item icon="house" title="Home" href="/" /></app-floating-dock>

<app-floating-dock> renders a floating pill of icon links whose items grow as the pointer approaches them — the macOS dock effect. It is marketing and landing-page chrome: a hero shortcut row, a portfolio footer — not a replacement for app-shell primary navigation.

The magnification lives in the shared <wui-dock> element, so the Razor <app-floating-dock> and the React <AppFloatingDock> behave identically. On touch devices and under prefers-reduced-motion the effect turns itself off and the dock is a plain, fully usable icon row.

Playground

Every attribute but the items, live — the row stays fixed to a representative 5-item set so the magnification stays comparable across values. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the dock above it.

<app-floating-dock>…</app-floating-dock>
magnify="false" is the same fallback the dock applies automaticallySetting magnify="false" renders exactly what a touch device or a prefers-reduced-motion: reduce visitor sees — the element detects both on its own and turns off magnification with no attribute set. Reach for the attribute only to force the static look everywhere (e.g. inside a print view).

A dock of links

Compose with <app-dock-item> children, left to right. Every item needs a title — it is the accessible name and the hover tooltip — and an icon (a Bootstrap Icons name).

Hover across the row
Move the pointer along the dock — the item under the cursor grows to max scale and its neighbours taper off.
Show code 
<app-floating-dock>
    <app-dock-item icon="house" title="Home" href="/" />
    <app-dock-item icon="box-seam" title="Products" href="/products" />
    <app-dock-item icon="tag" title="Pricing" href="/pricing" />
    <app-dock-item icon="file-text" title="Docs" href="/docs" />
    <app-dock-item icon="mail" title="Contact" href="/contact" />
</app-floating-dock>

Tuning the magnification

max-scale is the size of the item under the cursor; radius is how far (in px) the effect reaches along the row. The defaults (1.6, 100) suit a 5–8 item dock. magnify="false" renders the same pill without the hover effect.

Bigger, wider
Show code 
<app-floating-dock max-scale="2" radius="140">…</app-floating-dock>
Static — no magnification
Show code 
<app-floating-dock magnify="false">…</app-floating-dock>
Decorative motion, real linksEach item is a real <a> (or a <button> when it has no href) with an aria-label; the visible tooltip is aria-hidden. Keyboard users tab through the items — the focused item grows and shows its tooltip without pointer tracking. Never make the dock the only way to reach a page.

Router-decoupled links

On React, giving an item to instead of href routes it through linkComponent when one is provided (react-router's Link), and an item with onClick and no href/to renders a real button. Razor has no client-side router to decouple from — <app-dock-item> only ever emits a plain <a href>, or a <button> when href is omitted.

Plain anchor / button — Razor's only two shapes
Show code 
<app-floating-dock>
    <app-dock-item icon="house" title="Home" href="/" />
    <app-dock-item icon="search" title="Search" />  
</app-floating-dock>
Use href on both surfacesRazor has no to / linkComponent / onClick attributes — give an item href for a real link, or omit it for a button. A full page reload is expected on Razor sites since there's no client-side router to hand off to.

When to use

Use it when

  • A marketing or landing surface wants a playful shortcut row — hero, footer, portfolio.
  • The set is small (4–8 items) and every item reduces to one clear icon + title.
  • The destinations are also reachable through normal navigation.

Reach for something else when

  • You need the app's persistent primary navigation. → app-shell
  • The actions belong to a toolbar or a data row. → action-icon
  • You want a path/hierarchy trail, not shortcuts. → app-breadcrumbs

Every option

The whole surface of the component, one cell per value — magnify on/off, the max-scale and radius range, every item shape Razor can produce, and the touch / prefers-reduced-motion static fallback.

magnify

magnify (default, true)
magnify="false"

max-scale — item size at cursor center

max-scale="1.2"
max-scale="1.6" (default)
max-scale="2"
max-scale="2.5"

radius — px falloff distance

radius="50"
radius="100" (default)
radius="180"
radius="260"

item shapes

href — real link (default)
no href — renders <button>
React-only: to / onClick / linkComponent / a custom icon nodeRazor's <app-dock-item> only takes icon (a Bootstrap Icons name), title and href — there is no router-aware to/linkComponent and no client-side onClick handler, since the tag helper renders once on the server. Omitting href reaches the same "button, not link" outcome React gets from an onClick-only item.

aria-label and edge cases

aria-label="Site shortcuts"
no app-dock-item children — empty dock
magnify="false" — the touch / prefers-reduced-motion fallback the element applies itself

Attributes

AttributeTypeDefaultDescription
aria-labelstringQuick navigationAccessible name for the dock landmark.
magnifybooltrueSet false for a static dock (no hover effect).
max-scaledecimal1.6Item scale at cursor center.
radiusdecimal100Px distance over which the magnification falls off.
classstring—Extra classes on the dock; passes through as a plain HTML attribute (no dedicated tag helper property, matching React's className).

On <app-dock-item>: icon (Bootstrap Icons name), title (accessible name + tooltip), href (omit to render a button).