> For the complete documentation index, see [llms.txt](https://voit.gitbook.io/voitdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://voit.gitbook.io/voitdocs/components/index-bar.md).
# Index Bar
Index bars provide a quick navigation method, allowing users to jump to specific sections or items in a list, such as alphabetically sorted content. They enhance usability by improving accessibility.
## Overview
With an index bar, users can easily locate items in long, sorted lists (alphabetically or numerically) without relying on traditional search or filter methods.
{% embed url="" %}
## When to use
* Use when users need to move through large collections of alphabetically or numerically sorted items, such as a contact list or product inventory.
* Ideal for scenarios where content is divided into sections by a specific order (e.g., alphabetical or chronological) and users need quick access to these sections.
* Use when users need to quickly navigate between distant items in a list without needing to scroll manually through all intermediate entries.
* Use in mobile and tablet applications where space is limited but users still need an intuitive way to scroll and navigate large datasets.
## When not to use
* Avoid using index bars when the list contains only a few items as a simple scroll or search may be more efficient.
* Index bars should not be used for unstructured content or datasets that lack a clear ordering system.
* Index bars are not suitable when users need to perform complex searches or filtering operations, as it only aids in quick navigation to predefined sections.
* Avoid using index bars when the content doesn't logically fit into alphabetic or numeric categories (e.g., unordered content, thematic categories).
## Types
## Anatomy
1. **Index Bar (Alphabetic or Numeric):** The interactive bar on the side of the list, displaying the alphabet or numbers for navigation.
2. **Selected Index:** The specific index entry currently selected, visually distinct from unselected entries.
## Interaction Behavior
* **Tap-to-Jump:** Users can tap directly on an index letter or number to immediately jump to the corresponding section of the list.
* **Scroll-to-Drag:** Users should be able to drag their finger or mouse over the index to dynamically scroll through the list, providing a smooth transition between sections as they move.
* **Hover Behavior:** On desktop, hovering over the index can highlight the hovered letter or number, offering feedback on which section will be selected.
* **Snap-to-Section:** When a user selects or scrolls to a specific index point, the list should “snap” to the beginning of that section, ensuring proper alignment and easy reading.
* **Dynamic Highlighting:** As users scroll through the list manually, the corresponding index letter or number should be highlighted to provide feedback on the current section.
* **Debouncing Selection:** If users scroll quickly through the index, implement a debounce mechanism to ensure the system doesn't try to load every section they scroll past. Instead, snap to the final selected section.
## Size
Size
Text (px)
Small
11
Medium
12
## Accessibility
* **Keyboard Accessibility:** Ensure users can navigate the index bar using arrow keys or shortcuts, enabling them to scroll through sections and jump to specific parts of the list using the keyboard.
* **Screen Reader Compatibility:** For users with visual impairments, the index bar should announce the currently selected letter or number and provide clear feedback when sections are navigated.
* **Visual and Tactile Feedback:** Provide clear visual feedback when a user selects an index letter or number (e.g., changing color) and ensure this feedback is accessible to those with low vision or color blindness.
* **Support for Tap and Swipe Gestures:** For touch devices, ensure that users can tap on an index letter or number to jump to a section, and allow swiping or dragging gestures to scroll through the index smoothly.
## Example
* **Contacts List in a Phonebook App:** Use the index bar to navigate through a large set of contacts alphabetically, making it easier for users to jump to a specific letter group.
* **Product Inventory in E-commerce:** Implement an index bar for large product catalogues where users can scroll through items grouped alphabetically or by category.
* **Library Catalog:** Allow users to navigate alphabetically or numerically through large sets of books or resources in a digital library or educational application.
* **Photo Galleries:** Alphabetical or numeric index bars can be used in large image galleries to quickly navigate through years or categories of photographs.
