# Category

> Category entity - components, queries, links, and related actions

Your storefront encounters the **Category** entity when building catalog navigation, rendering category listing pages, and displaying breadcrumb trails. A Category represents a product grouping in the catalog (e.g., "Shoes", "Electronics") and links to the products it contains.

**Entity: Category**

Components: base, content, seo, media

Links:

- ecommerce/category/products → Product (multi)
- ecommerce/category/breadcrumb → BreadcrumbItem (multi)
- ecommerce/category/child-categories → Category (multi)

## Components

### Base

Category title and URL slug.

### CategoryBase `base`

```ts
import { CategoryBase } from '@laioutr-core/canonical-types/entity/category';
```

#### Schema

```json
{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"slug":{"type":"string"},"title":{"type":"string"}},"required":["slug","title"],"additionalProperties":false,"id":"entity:Category:base"}
```

### Content

HTML-formatted category description.

### CategoryContent `content`

```ts
import { CategoryContent } from '@laioutr-core/canonical-types/entity/category';
```

#### Schema

```json
{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"description":{"$ref":"#/definitions/HtmlFragment"}},"required":["description"],"additionalProperties":false,"id":"entity:Category:content","definitions":{"HtmlFragment":{"description":"A fragment of HTML. This is a string containing HTML code. Refer to the [HTML spec](https://html.spec.whatwg.org/#elements-3) for a complete list of HTML elements. Example value: `\"<p>Grey cotton knit sweater.</p>\"` Warning: this value will be used as is, so you need to make sure it is safe to render.","title":"HtmlFragment","id":"HtmlFragment","type":"object","properties":{"html":{"type":"string"}},"required":["html"],"additionalProperties":false}}}
```

### Media

Images and videos associated with the category.

### CategoryMedia `media`

```ts
import { CategoryMedia } from '@laioutr-core/canonical-types/entity/category';
```

#### Schema

```json
{"$schema":"http://json-schema.org/draft-07/schema#","type":"object","properties":{"media":{"type":"array","items":{"$ref":"#/definitions/Media"}}},"required":["media"],"additionalProperties":false,"id":"entity:Category:media","definitions":{"Media":{"description":"A Media object describes a media asset to be displayed or played in the browser. Currently supported are images, videos, and audio. Future support for 3D, 360° images, and other media types is planned. You can use `type` for type-narrowing.","title":"Media","id":"Media","anyOf":[{"$ref":"#/definitions/MediaImage"},{"$ref":"#/definitions/MediaVideo"},{"$ref":"#/definitions/MediaAudio"}]},"MediaImage":{"description":"A MediaImage describes an image to be displayed in the browser. An image consists of one or more MediaSourceImage and additional metadata.","title":"MediaImage","id":"MediaImage","type":"object","properties":{"type":{"type":"string","const":"image"},"sources":{"type":"array","items":{"$ref":"#/definitions/MediaSourceImage"}},"alt":{"$ref":"#/definitions/__schema3"},"meta":{"$ref":"#/definitions/__schema4"},"aiDisclosure":{"$ref":"#/definitions/__schema5"},"placeholder":{"type":"array","items":[{"type":"string","enum":["solid","thumbhash"]},{"type":"string"}]}},"required":["type","sources"],"additionalProperties":false},"MediaSourceImage":{"description":"A MediaSourceImage is a single source for an image.","title":"MediaSourceImage","id":"MediaSourceImage","type":"object","properties":{"provider":{"$ref":"#/definitions/__schema0"},"src":{"$ref":"#/definitions/__schema1"},"origin":{"$ref":"#/definitions/__schema2"},"width":{"type":"number"},"height":{"type":"number"},"responsive":{"type":"string","enum":["static","mobile","desktop"]},"focalPoint":{"type":"array","items":[{"type":"number"},{"type":"number"}]}},"required":["provider","src"],"additionalProperties":false},"__schema0":{"type":"string"},"__schema1":{"type":"string"},"__schema2":{"type":"object","properties":{"libraryId":{"type":"string"},"externalId":{"type":"string"}},"required":["libraryId"],"additionalProperties":false},"__schema3":{"type":"string"},"__schema4":{},"__schema5":{"type":"string","enum":["generated","modified"]},"MediaVideo":{"description":"A MediaVideo describes a video to be displayed in the browser. A video consists of one or more MediaSourceVideo and additional metadata.","title":"MediaVideo","id":"MediaVideo","type":"object","properties":{"type":{"type":"string","const":"video"},"sources":{"type":"array","items":{"$ref":"#/definitions/MediaSourceVideo"}},"alt":{"$ref":"#/definitions/__schema3"},"meta":{"$ref":"#/definitions/__schema4"},"aiDisclosure":{"$ref":"#/definitions/__schema5"},"poster":{"allOf":[{"$ref":"#/definitions/MediaImage"}]},"tracks":{"type":"array","items":{"$ref":"#/definitions/MediaTextTrack"}}},"required":["type","sources"],"additionalProperties":false},"MediaSourceVideo":{"description":"A MediaSourceVideo is a single source for a video.","title":"MediaSourceVideo","id":"MediaSourceVideo","type":"object","properties":{"provider":{"$ref":"#/definitions/__schema0"},"src":{"$ref":"#/definitions/__schema1"},"origin":{"$ref":"#/definitions/__schema2"},"width":{"type":"number"},"height":{"type":"number"},"length":{"allOf":[{"$ref":"#/definitions/Duration"}]},"format":{"type":"string"},"responsive":{"type":"string","enum":["static","mobile","desktop"]},"focalPoint":{"type":"array","items":[{"type":"number"},{"type":"number"}]},"streaming":{"type":"string","enum":["progressive","hls","dash"]}},"required":["provider","src","width","height"],"additionalProperties":false},"Duration":{"description":"ISO 8601 duration string. Can be used with Temporal.Duration once browser-support is available. Maybe use https://react-spectrum.adobe.com/internationalized/date/Time.html","title":"Duration","id":"Duration","type":"object","properties":{"duration":{"type":"string"}},"required":["duration"],"additionalProperties":false},"MediaTextTrack":{"description":"A MediaTextTrack describes a timed text track for a video or audio asset, such as subtitles, captions, or chapters.","title":"MediaTextTrack","id":"MediaTextTrack","type":"object","properties":{"src":{"type":"string"},"kind":{"type":"string","enum":["subtitles","captions","descriptions","chapters","metadata"]},"srclang":{"type":"string"},"label":{"type":"string"},"default":{"type":"boolean"}},"required":["src","kind"],"additionalProperties":false},"MediaAudio":{"description":"A MediaAudio describes an audio asset to be played in the browser. An audio asset consists of one or more MediaSourceAudio and additional metadata.","title":"MediaAudio","id":"MediaAudio","type":"object","properties":{"type":{"type":"string","const":"audio"},"sources":{"type":"array","items":{"$ref":"#/definitions/MediaSourceAudio"}},"alt":{"$ref":"#/definitions/__schema3"},"meta":{"$ref":"#/definitions/__schema4"},"aiDisclosure":{"$ref":"#/definitions/__schema5"},"cover":{"allOf":[{"$ref":"#/definitions/MediaImage"}]},"tracks":{"type":"array","items":{"$ref":"#/definitions/MediaTextTrack"}}},"required":["type","sources"],"additionalProperties":false},"MediaSourceAudio":{"description":"A MediaSourceAudio is a single source for an audio asset.","title":"MediaSourceAudio","id":"MediaSourceAudio","type":"object","properties":{"provider":{"$ref":"#/definitions/__schema0"},"src":{"$ref":"#/definitions/__schema1"},"origin":{"$ref":"#/definitions/__schema2"},"format":{"type":"string"},"length":{"allOf":[{"$ref":"#/definitions/Duration"}]},"streaming":{"type":"string","enum":["progressive","hls","dash"]}},"required":["provider","src"],"additionalProperties":false}}}
```

### SEO

Meta title, description, and robots directive for the category page.

### CategorySeo `seo`

```ts
import { CategorySeo } from '@laioutr-core/canonical-types/entity/category';
```

#### Schema

```json
{"$schema":"http://json-schema.org/draft-07/schema#","description":"SEO information for use in meta tags.","title":"SeoMeta","id":"SeoMeta","type":"object","properties":{"title":{"type":"string"},"description":{"type":"string"},"robots":{"description":"E.g. \"index, follow\", \"noindex, nofollow\", etc.","type":"string"}},"additionalProperties":false}
```

## Queries

- [CategoryAllQuery](/frontend/api-reference/ecommerce/queries#category) - Retrieve all categories.
- [CategoryBySlugQuery](/frontend/api-reference/ecommerce/queries#category) - Retrieve a single category by its slug.

## Links

- **CategoryBreadcrumbLink** `BreadcrumbItem` `multi` - All breadcrumb items that are part of the category breadcrumb.
- **CategoryProductsLink** `Product` `multi` - Products assigned to the category.

## Related Entities

- [MenuItem](/frontend/api-reference/entities/menu-item) - Navigation menu entries that may link to this category.