Components

Navigation

Navigation patterns combine the public Total Wireless information architecture with checkout progress indicators from the shopping flow.

Global and flow navigation

Plan

Phone

Cart

Checkout

IA source

Top-level labels are derived from totalwireless.com patterns: Shop, Deals, Pay, Activate, and Why Total Wireless.

Code

<TabsList variant="line">
  <TabsTrigger value="shop">Shop</TabsTrigger>
  <TabsTrigger value="deals">Deals</TabsTrigger>
</TabsList>

<Stepper steps={["Plan", "Phone", "Cart", "Checkout"]} currentStep={1} />