> For the complete documentation index, see [llms.txt](https://symmdocs.gitbook.io/frontend-sdk-technical-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://symmdocs.gitbook.io/frontend-sdk-technical-docs/frontend-sdk/cloverfield-app/components/favoritebar.md).

# FavoriteBar

The `FavoriteBar` component is a horizontal scrolling bar that displays the user's favorite markets, allowing quick access to preferred trading pairs. Below is an in-depth look into how the `FavoriteBar` functions.

**Overview:**

* **Component Structure:** The component utilizes `styled-components` for styling. It features left and right navigation buttons to scroll through the list of favorite markets.
* **Hooks Used:**
  * `useCallback` and `useEffect` for performance optimizations and side effects.
  * `useRef` to reference the DOM element that holds the favorite markets for scrolling purposes.
  * `useState` to manage local state within the component, such as arrow visibility and the scrolling target.
  * `useRouter` from Next.js for routing purposes, allowing navigation to market details on click.
  * `useFavoriteMarkets` custom hook from `@symmio/frontend-sdk/hooks/useMarkets` to fetch the list of user's favorite markets.