Sidebar
Sidebar components for displaying and managing annotations.
Overview
Document.Annotation.Sidebar renders the annotation list. Without children, it renders the default list and cards. With children, use the namespaced sidebar parts to build a custom structure while keeping card behavior and context.
Usage
<Document.Annotation.Sidebar /><Document.Annotation.Sidebar>
<Document.Annotation.Sidebar.Header />
<Document.Annotation.Sidebar.List>
{annotations.map((annotation) => (
<Document.Annotation.Sidebar.Card
annotation={annotation}
key={annotation.id}
/>
))}
</Document.Annotation.Sidebar.List>
<Document.Annotation.Sidebar.Empty />
</Document.Annotation.Sidebar>API Reference
Document.Annotation.Sidebar
| Prop | Type | Description |
|---|---|---|
className | string | Additional classes |
children | ReactNode | Custom sidebar content |
Document.Annotation.Sidebar.Header
Renders the sidebar heading and annotation count.
| Prop | Type | Description |
|---|---|---|
className | string | Additional classes |
children | ReactNode | Custom header content |
Document.Annotation.Sidebar.List
Positions and renders annotation cards.
| Prop | Type | Description |
|---|---|---|
className | string | Additional classes |
children | ReactNode | Custom list content |
Document.Annotation.Sidebar.Empty
Empty state shown when there are no annotations.
| Prop | Type | Description |
|---|---|---|
className | string | Additional classes |
children | ReactNode | Custom empty state content |
Document.Annotation.Sidebar.Card
Renders one annotation card.
| Prop | Type | Description |
|---|---|---|
annotation | AnnotationData | The annotation to render |
className | string | Additional classes |
children | ReactNode | Custom card content |