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, interactive nav links, live badge, and user avatar. Nav items and buttons use Barlow Condensed Medium to match the brand wordmark. Click any link to switch the active state. Use variant="card" (default) inside modals, drawers, or preview frames.

CPSL
Live
JD

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
Live
JD
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
<TopNav
  items={[{ label: "Standings" }, ...]}
  logoText="CPSL"
  userInitials="JD"
  showLive={true}
  defaultActive={0}
  variant="card"   // or "full"
/>
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"
/>