> For the complete documentation index, see [llms.txt](https://hinahirani.gitbook.io/ui-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hinahirani.gitbook.io/ui-guide/components/scroll-bar.md).

# Scroll bar

### Usage

Scrollbar should be used on a container within a section of a page when it's contents are too large to fit in the container. Scrollbar can be horizontal or vertical and can vary in size according to the percentage of the content that is visible.

Horizontal scroll can be used to control the horizontal list of items, or to display the table content. Vertical scroll can be used to contain overflowing content of a page or module, or inside interactive component such as a dropdown menu.

![](/files/-MAg3EPSYDSXufUH96Pw)

### Best Practices

* Make sure scrollbar is always visible on a module it controls
* Use a scrollbar to save space for long lists (for example in dropdown menu)
* Scrollbar handle should always be easily findable, and accessibility should be ensured by using the arrow keys or hand gestures on mobile devices to view the scrollable area
* If possible, avoid the “false bottom” of the content when using scrollbars; users should always see a visual cue that there is information below the fold

### Style

Ideally, the scrollbar should meet the following:

* Scrollbar colour: Grey Base
* Background colour: Grey L80 
* Scrollbar width: 6px

![](/files/-MAbpm4rMEjkixQKjXw6)


---

# 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:

```
GET https://hinahirani.gitbook.io/ui-guide/components/scroll-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.