07 — Components

Navigation

Top nav, tab bars, breadcrumbs, pagination, and bottom tab bars — all interactive. Card variants for component showcases; full-width variants for production layouts.

1 — Top Navigation Bar

Dark-navy bar with brand mark, nav links, live badge, and CTA pill. Links use Barlow Condensed SemiBold, 14 px, uppercase, 0.11 em letter-spacing, cream #F4EFE6 at rest and muted steel #7A9BAA on hover. The active link is derived from the current URL (via usePathname()) and gets a gold #D4B949 underline plus aria-current="page" — no click handlers, no flicker on route changes. Below, "Navigation" is highlighted because its href matches this page.

CPSL

2 — Sub Navigation

Sits directly below the main Top Nav. Lists child pages of the active section. Smaller type treatment — Barlow Condensed SemiBold, 12 px, uppercase, 0.12 em letter-spacing — so it reads as secondary to the main nav above it. Same gold underline pattern marks the active page.

CPSL

2 — Tab Bar

Two interactive tab styles. Use variant="underline" for content pages, variant="pill" for filter controls.

Underline
Pill

3 — Breadcrumb & Pagination

Breadcrumb uses chevron separators, bold current-page item. Pagination is interactive — click numbers or arrow buttons to navigate; ellipsis collapses large page counts automatically.

Breadcrumb
CPSLTeamsCharlotte FCMatches
Pagination — 8 pages
…

4 — Mobile Bottom Tab Bar

Centered card for mobile previews. Rounded corners, max-width 384 px. SVG icons turn blue on tap; dot marks the active item.

5 — Flyout Menu

Dropdown flyout panel with icon rows, descriptions, and optional footer actions. Closes on outside click, Escape key, or item selection. Styled with CPSL deep navy, gold accents, and Barlow Condensed labels.

tsx
import { FlyoutMenu } from "@/components/cpsl/navigation/FlyoutMenu"

<FlyoutMenu
  label="League Information"
  size="md"                  // "sm" | "md" | "lg"
  items={[
    {
      label: "About the CPSL",
      description: "History, mission, governance, and membership.",
      href: "/about",
      icon: <InfoIcon />,
    },
    // …more items
  ]}
  actions={[
    { label: "View Handbook", href: "/handbook", icon: <DocIcon /> },
    { label: "Contact League", href: "/contact", icon: <PhoneIcon /> },
  ]}
/>
Full-width variants

Edge-to-Edge Production Layouts

No rounded corners — each bar spans the full browser width exactly as it would in a deployed app.

5 — Desktop

variant="full" — bottom border only, no border-radius. Pair with a sticky top-0 wrapper in production.

CPSL
6 — Tablet

stretch prop makes each tab fill equal width across the full bar. Works with both underline and pill variants.

7 — Mobile

variant="full" — edge-to-edge, top-border only. Active item shows a sliding top-bar indicator. Place inside a fixed bottom-0 w-full wrapper in production.

Component API

FlyoutMenu
<FlyoutMenu
  label="League Information"
  size="md"   // "sm" | "md" | "lg"
  items={[
    {
      label: "About the CPSL",
      description: "History and governance.",
      href: "/about",
      icon: <InfoIcon />,
    },
  ]}
  actions={[
    { label: "View Handbook", href: "/handbook", icon: <DocIcon /> },
  ]}
/>
TopNav
// Canonical source: @cpsl/ui (packages/ui)
import { TopNav } from "@cpsl/ui"

<TopNav
  items={[{ label: "Standings", href: "/standings" }, ...]}
  logoSrc="/cpsl-horizontal.svg"
  ctaLabel="Join Our League"
  ctaHref="/apply"
  showLive={true}
  position="fixed"   // "fixed" (prod) | "static" (inline)
/>
TabBar
<TabBar
  tabs={["Overview", "Matches", "Players"]}
  variant="underline"   // or "pill"
  defaultActive={0}
  stretch={false}       // true → fills full width
/>
Breadcrumb
<Breadcrumb
  items={["CPSL", "Teams", "Charlotte FC"]}
/>
Pagination
<Pagination
  totalPages={12}
  defaultPage={1}
/>
MobileTabBar
<MobileTabBar
  tabs={[{ label: "Home", icon: <HomeIcon /> }, ...]}
  defaultActive={0}
  variant="mobile"   // or "full"
/>