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

Navigate between conversation branches with previous/next controls.

View and switch between branches.

Anatomy \[#anatomy]

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

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

API Reference \[#api-reference]

Root \[#root]

Contains all parts of the branch picker.

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

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

Number \[#number]

The current branch number.

This primitive renders the raw number as a string.

Count \[#count]

The total number of branches.

This primitive renders the raw number as a string.

Previous \[#previous]

Navigates to the previous branch.

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

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

Next \[#next]

Navigates to the next branch.

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

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