GitHub

FileViewerSidebarContent

PreviousNext

Layout primitives for sections inside a FileViewerSidebar.

FileViewerSidebarHeader, FileViewerSidebarContent, FileViewerSidebarFooter, and the sidebar section primitives give a sidebar a consistent internal layout. They do not define row semantics; domain components such as SegmentSidebar or AttachmentSidebar own those.

<FileViewerSidebar aria-label="Document navigation">
  <FileViewerSidebarHeader>Pages</FileViewerSidebarHeader>
  <FileViewerSidebarContent>
    <FileViewerSidebarSection>
      <FileViewerSidebarSectionHeader>
        <FileViewerSidebarSectionTitle>Pages</FileViewerSidebarSectionTitle>
        <FileViewerSidebarSectionAction aria-label="Refresh pages" />
      </FileViewerSidebarSectionHeader>
      <FileViewerSidebarSectionContent>
        <FileViewerThumbnails />
      </FileViewerSidebarSectionContent>
    </FileViewerSidebarSection>
  </FileViewerSidebarContent>
  <FileViewerSidebarFooter>400 pages</FileViewerSidebarFooter>
</FileViewerSidebar>

Components

ComponentUse For
FileViewerSidebarHeaderFixed rail header.
FileViewerSidebarContentScrollable rail body.
FileViewerSidebarFooterFixed rail footer.
FileViewerSidebarSectionPadded semantic section.
FileViewerSidebarSectionHeaderSection title/action row.
FileViewerSidebarSectionTitleTruncating section title.
FileViewerSidebarSectionActionSmall icon action inside the section header.
FileViewerSidebarSectionContentSection body for rows, thumbnails, or fields.
FileViewerSidebarSeparatorRail separator with File Viewer spacing.

Behavior

  • These primitives render stable data-slot="file-viewer-sidebar-*" attributes for styling and tests.
  • FileViewerSidebarSectionAction supports asChild for custom button-like controls.
  • Use these when creating a new rail grammar. Use SidebarList* when the rail needs menu-like grouped rows.

Source

file-viewer-sidebar.tsx