App Nav

Primary product navigation. In Portal it sits at the top as a split pair of glass pills (destinations + account). Breakpoint behaviour — joint below lg, split / joined / packed on desktop — is locked in Responsive Behaviour.

States

Breakpoint matrices, screenshots, and drawer-tuck rules live in Foundations → Responsive Behaviour (App nav section).

Playground

Surface, track (split / joined), packed-left tuck, and stage background. Open Glass dials for blur / rim.

// Portal product App Nav — split<AppNav />// split: destinations + account pills// joined: scroll-unify full-width frost// packed: drawer-compact tuck (icons, hug left)// glass edge (collapsed dials): rim

Usage

Portal’s product App Nav is the split composition (brand + Home / Invest / Activity, and hide-balances + account) in apps/portal/components/navigation/app-nav.tsx.

The @sophic/portal-ui AppNav export is the single-rail primitive (items + optional trailing / companion) used when you need a self-contained pill:

import { AppNav, type AppNavItem } from "@sophic/portal-ui";
import { HouseIcon } from "@phosphor-icons/react";

const items: AppNavItem[] = [
  { label: "Home", icon: HouseIcon, active: true },
  // …
];

<AppNav items={items} layout="labeled" size="lg" />;

The rail is fixed to the chosen edge by default, with padding so the drop shadow is not clipped. Override with className (e.g. relative inset-auto bottom-auto pt-0 pb-0) inside previews.

Props worth knowing

• placement — bottom (default) | top | left | right. Left/right rotate to a vertical rail.
• surface — glass (default) or solid. The dock is an opaque shell either way; menus frost separately (Foundations → Glass).
• edge — unused; kept for existing call sites.
• layout — icons (default) or labeled.
• hoverExpandLabels — desktop hover reveals labels (≥431px, hover:hover).
• size — sm | default | md | lg | xl | 2xl.

Props

AppNav also accepts every native <div> attribute. AppNavCompanion accepts every native <button> attribute.

AppNavItem

AppNavCompanion

Changelog

• 4 October 2026 — Dock stays solid; menu frost is --popover. Full notes
• 11 September 2026 — Brand clip speed 1.5× (was 2×). Full notes
• 11 September 2026 — Brand mark uses the looping Lottie: forward on scroll-collapse, reverse on expand / dock hover, replay on logo hover. Full notes
• 24 August 2026 — Dock, rail, and hover-expand chrome in a CSS module; look unchanged. Full notes
• 12 August 2026 — Single App Nav name; split demo; playground track / packed-left; glass dials collapsed. Full notes
• 29 July 2026 — Removed the search companion from demos and product nav. Full notes
• 24 July 2026 — placement (top/left/right/bottom), spring entrance, hoverExpandLabels. Full notes
• 23 July 2026 — Size ramp (sm…2xl). Full notes
• 22 July 2026 — Added. Full notes