> For the complete documentation index, see [llms.txt](https://able.bucca.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://able.bucca.com/core/components/content-bar.md).

# Content Bar

Container: A horizontally scrollable section of content used with vertical Scrollviews where we want a section to scroll horizontally.

[Styleguide Link](https://zpl.io/6NR0wPK)

* Parent: ScrollView
* Child: [CardBar](/core/ks-modules/card-view/card-bar.md), [GraphicBar](/core/overview/graphic/graphic-bar.md), [AvatarBar](/core/overview/avatar/avatar-bar.md), [AdaptIconBar](/core/overview/adapticon/adapticon-bar.md), [ChipBar](/core/overview/chip/chip-bar.md), [ToggleBar](/core/overview/toggle/toggle-bar.md), [ButtonBar](/core/overview/button/button-bar.md)

### Architecture

**ScrollView:** In this use case a vertically scrollable part of the screen that can contain content bars, ListItems, or Graphics in a grid format.

**Bar:** This is the outermost container for cells that can either be horizontally scrollable with cells that scroll off the right side of the screen or have a locked width with a set number of cells.

**Cell:** In bars we have repeating objects that are organized into cells. This could be a single element like a graphic, or multiple objects (graphic, caption rows) that are combined to form the cell.

**Primary Content:** The visually dominate part of the cell. Options include an graphic, avatar or adaptIcon depending on the use case. Primary content like an image either has a locked aspect ratio (as is the case with avatars and adaptIcons at 1:1), or variable sized, locked aspect ratios, like we see with images that grow to fill the screens width while maintaining their aspect ratio.

**Cell Caption:** We divide the cells caption into vertical rows of content, where each row serves a specific purpose. These rows are then vertically stacked in the cells caption area depending on the use case.

**Leading/Primary/Trailing Collections:** Inside a cell caption row there are three columns, the leading, primary, and trailing content collections. These are convenience containers where we store the options available in each of the columns of the cells caption row.

## Properties

### Type

* **Card**
* **Graphic**
* **Avatar**
* **AdaptIcon**
* **Chip**
* **Toggle**
* **Button**

### Functionality

**Fixed:** For fixed width bars with a set number of cells, multiple bars can be stacked on top of one another to form a scrollview scrolling vertically.

**Scrollable:** For horizontally scrollable bars that have their content bleed off the right side of the interface, the number of cells is determined by the content it is supplied. This could be a set number like 10, or infinite like we see with a vertical infinite scroll.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://able.bucca.com/core/components/content-bar.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.