> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopi.lk/llms.txt
> Use this file to discover all available pages before exploring further.

# Categories

> Fetch product categories for navigation and filtering

## `shop.categories.list()`

Returns all categories for the shop. Use these to build navigation menus and product filter UIs.

```typescript theme={null}
const categories = await shop.categories.list();
```

### Response

```typescript theme={null}
Array<{
  id: string;
  name: string;
  image_url: string | null;
}>
```

### Example — Category navigation

```typescript theme={null}
const categories = await shop.categories.list();

categories.forEach(cat => {
  const link = document.createElement('a');
  link.href = `/category/${encodeURIComponent(cat.name)}`;
  link.textContent = cat.name;

  if (cat.image_url) {
    const img = document.createElement('img');
    img.src = cat.image_url;
    link.prepend(img);
  }

  navMenu.appendChild(link);
});
```

### Example — Category filter tabs

````typescript theme={null}
const categories = await shop.categories.list();

// Render filter tabs
const tabs = [{ id: '', name: 'All' }, ...categories];

tabs.forEach(cat => {
  const btn = document.createElement('button');
  btn.textContent = cat.name;
  btn.addEventListener('click', () => {
    filterProducts(cat.name || undefined);
  });
  filterBar.appendChild(btn);
});

async function filterProducts(category?: string) {
  const { products } = await shop.products.list({ category });
  renderGrid(products);
}
```---
title: "fetch-categories"
---
````