# Navigation Components

> **Props y API:** Disponibles vía MCP tool `widgets-get-component-props`. Este archivo documenta solo convenciones, gotchas y patrones específicos del proyecto.

> ⚠️ **DBreadcrumb, DNavbar removed in Dynamic UI 2.x** — Use standard HTML + Bootstrap classes instead

---

## DTabs — State Stores DTabOption Object

```typescript
interface DTabOption {
  label: string | ReactNode;
  tab: string;       // Unique identifier
  disabled?: boolean;
}
```

```tsx
const tabs: DTabOption[] = useMemo(() => [
  { label: t('tabs.overview'), tab: 'overview' },
  { label: t('tabs.details'), tab: 'details' },
], [t]);

const [selectedTab, setSelectedTab] = useState<DTabOption>(tabs[0]);

<DTabs options={tabs} defaultSelected={selectedTab.tab} onChange={setSelectedTab}>
  <DTabs.Tab tab={tabs[0].tab}><div>Overview</div></DTabs.Tab>
  <DTabs.Tab tab={tabs[1].tab}><div>Details</div></DTabs.Tab>
</DTabs>
```

### ❌ Common Mistakes

```tsx
// ❌ String state (type error)
const [tab, setTab] = useState<string>('overview');
<DTabs onChange={setTab} />

// ✅ DTabOption state
const [tab, setTab] = useState<DTabOption>(tabs[0]);
<DTabs onChange={setTab} />

// ❌ Object to defaultSelected
<DTabs defaultSelected={selectedTab} />

// ✅ String to defaultSelected
<DTabs defaultSelected={selectedTab.tab} />

// ❌ Wrong property name
[{ label: 'Overview', value: 'overview' }]  // 'value' doesn't exist

// ✅ Use 'tab'
[{ label: 'Overview', tab: 'overview' }]
```

Variants: `"underline"` (default) | `"tabs"` | `"pills"` | `"toggle-button-group"`

---

## DStepper — Numeric Values Required

DStepper requires **numbers** for step values. Map semantic names to numbers.

```tsx
type Step = 'personal' | 'address' | 'payment';
const [currentStep, setCurrentStep] = useState<Step>('personal');
const stepMapping = { personal: 1, address: 2, payment: 3 };

<DStepper options={[
  { label: t('wizard.personal'), value: 1 },
  { label: t('wizard.address'), value: 2 },
  { label: t('wizard.payment'), value: 3 },
]} currentStep={stepMapping[currentStep]} />
```

---

## DPaginator — Controlled State Required

`current` MUST come from local state, NOT from API response.

```tsx
// ❌ WRONG — current from API (doesn't update on click)
<DPaginator current={data.page} total={data.totalPages} onPageChange={handlePage} />

// ✅ CORRECT — current from local state (updates immediately)
const [currentPage, setCurrentPage] = useState(1);
const { data } = usePaymentHistory({ page: currentPage });
<DPaginator current={currentPage} total={data.totalPages} onPageChange={setCurrentPage} />
```

Store `currentPage` in Zustand. Pass to TanStack Query as queryKey. User sees immediate feedback.

---

## DBreadcrumb — REMOVED in v2.0

Use Bootstrap breadcrumb HTML:
```tsx
<nav aria-label="breadcrumb">
  <ol className="breadcrumb">
    <li className="breadcrumb-item"><a href="/">Home</a></li>
    <li className="breadcrumb-item active" aria-current="page">Current</li>
  </ol>
</nav>
```

## DNavbar — REMOVED in v2.0

Use Bootstrap navbar HTML.