Breadcrumbs

The Filenest.Breadcrumbs is used to display the current folder navigation levels.

Not every provider supports folders. However, using this component won't cause any problems.

The component must be used as a child of <Filenest.Root>

Example Usage

<Filenest.Breadcrumbs
  children={({ breadcrumbs }) => breadcrumbs.map((Breadcrumb, index) => (
    <Breadcrumb.Root
      key={index}
      children={({ folder, rootProps, isCurrent }) => (
        <div {...rootProps}>
          {folder.displayName || folder.key}
          {index !== breadcrumbs.length - 1 && " /"}
        </div>
      )}
    />
  ))}
/>

Render Props

Prop	Type	Default
`breadcrumbs`	`Array<BreadcrumbObject>`	-

Type References

BreadcrumbObject

Prop	Type	Default
`Root`	`(props: BreadcrumbItemProps) => JSX.Element`	-

BreadcrumbItemProps

Prop	Type	Default
`children`	`React.ReactNode \| ((props: RenderProps) => React.ReactNode)`	-

RenderProps

Prop	Type	Default
`folder`	`FilenestFolder`	-
`rootProps`	`React.ComponentPropsWithoutRef<'div'>`	-
`isCurrent`	`boolean`	-

FilenestFolder

Prop	Type	Default
`id`	`string`	-
`key`	`string`	-
`displayName`	`string \| undefined`	-

Start Here

Backend

Adapters

Providers

Frontend

Components