# BranchPickerPrimitive
URL: /docs/api-reference/primitives/branch-picker

Navigate between conversation branches with previous/next controls.

***

title: BranchPickerPrimitive
description: Navigate between conversation branches with previous/next controls.
--------------------------------------------------------------------------------

View and switch between branches.

import { ParametersTable } from "@/components/docs/tables/ParametersTable";

## Anatomy

```tsx
import { BranchPickerPrimitive } from "@assistant-ui/react";

const BranchPicker = () => (
  <BranchPickerPrimitive.Root>
    <BranchPickerPrimitive.Previous />
    <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
    <BranchPickerPrimitive.Next />
  </BranchPickerPrimitive.Root>
);
```

## API Reference

### Root

Containts all parts of the branch picker.

This primitive renders a `<div>` element unless `asChild` is set.

<ParametersTable
  type="BranchPickerPrimitiveRootProps"
  parameters={[
  {
    name: "asChild",
  },
  {
    name: "hideWhenSingleBranch",
    type: "boolean",
    default: "false",
    description:
      "Do not render the BranchPicker when there is only one branch at the current message.",
  },
]}
/>

### Number

The current branch number.

This primitive renders the raw number as a string.

### Count

The total number of branches.

This primitive renders the raw number as a string.

### Previous

Navigates to the previous branch.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="BranchPickerPrimitivePreviousProps"
  parameters={[
  {
    name: "asChild",
  },
]}
/>

### Next

Navigates to the next branch.

This primitive renders a `<button>` element unless `asChild` is set.

<ParametersTable
  type="BranchPickerPrimitiveNextProps"
  parameters={[
  {
    name: "asChild",
  },
]}
/>