---
applyTo: "**/*.tsx,**/*.jsx"
---

# @cfx-dev/ui-components — Navigation Components

## Tabular

Tab bar / segmented navigation:

```tsx
import { Tabular } from '@cfx-dev/ui-components';

const tabs = [
  { id: 'overview', label: 'Overview' },
  { id: 'settings', label: 'Settings', ariaControls: 'settings-panel' },
  { id: 'logs', label: 'Logs', hasNotification: true },
];

<Tabular
  items={tabs}
  activeItem={activeTab}
  onActivate={setActiveTab}
  size="medium"                    // 'small' | 'medium' | 'large'
  theme="dark"                     // 'dark' | 'light'
  role="tablist"                   // 'tablist' | 'navigation'
/>

// Responsive size
<Tabular
  items={tabs}
  activeItem={activeTab}
  onActivate={setActiveTab}
  size={{ initial: 'small', bp768: 'medium', bp1280: 'large' }}
/>
```

### Compound Tabular

For custom tab rendering, use `Tabular.Root` + `Tabular.Item`:

```tsx
<Tabular.Root theme="dark" role="tablist">
  {tabs.map((tab) => (
    <Tabular.Item
      key={tab.id}
      {...tab}
      active={tab.id === activeTab}
      onClick={setActiveTab}
      size="medium"
    />
  ))}
</Tabular.Root>
```

## NavList

Vertical navigation list:

```tsx
import { NavList } from '@cfx-dev/ui-components';

const items: NavListItem[] = [
  { id: 'home', label: 'Home', icon: 'Home' },
  { id: 'settings', label: 'Settings', icon: 'Settings' },
  { id: 'profile', label: 'Profile', icon: 'Users' },
];

<NavList
  items={items}
  activeItem={currentPage}
  onActivate={navigateTo}
/>
```

## Loaf

Compact tag/chip component (like a breadcrumb piece or status chip):

```tsx
import { Loaf } from '@cfx-dev/ui-components';

<Loaf>Default tag</Loaf>
<Loaf color="gold" size="small">Premium</Loaf>
<Loaf color="error">Error state</Loaf>
```

Colors: `default`, `gold`, `error`.
Sizes: `small`, `medium` (default), `large`.

## Accordion

Expandable/collapsible content sections:

```tsx
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionHeader,
  AccordionContent,
} from '@cfx-dev/ui-components';

<Accordion>
  <AccordionItem>
    <AccordionHeader>
      <AccordionTrigger>Section 1</AccordionTrigger>
    </AccordionHeader>
    <AccordionContent>
      <Text>Content of section 1</Text>
    </AccordionContent>
  </AccordionItem>

  <AccordionItem>
    <AccordionHeader>
      <AccordionTrigger icon="Settings">Section 2</AccordionTrigger>
    </AccordionHeader>
    <AccordionContent>
      <Text>Content of section 2</Text>
    </AccordionContent>
  </AccordionItem>
</Accordion>
```

Accordion manages open/close state internally. Multiple items can be open simultaneously.