FileManager

FileManager is a ready-made browser for files and folders. Choose whether the surrounding page owns the display mode; use Table instead when rows are data you define rather than files with browser behaviour.

Examples

Browse a folder

Folders sort before documents, and path supplies the breadcrumb segments. onOpen receives the selected file; onNavigate receives the segment index, so your page owns the actual navigation.

NameSizeModified
12 itemsToday
825 KBYesterday
12 KBJul 20

Controlled view

Set view with onViewChange when another control or saved preference owns the display mode. Use defaultView when FileManager may manage that choice itself.

Replacing item actions

actions replaces the complete default menu; it does not append commands. Return every action the person needs, including a destructive one when that workflow still needs deletion.

NameSizeModified
4 itemsJul 18
239 KBJul 22

When to use

Use FileManager when people need to find, open and organise files inside a folder hierarchy.

Reach for something else when:

You define arbitrary records and columns — use Table, which leaves row structure and actions to your application.
People only need to attach files to a form — use FileUpload.
There are no files because the feature is not set up yet — use EmptyState outside the browser when its specific empty search message would be misleading.

Accessibility

The view controls are a role="group" named "View mode" by default. Each button has an accessible name and aria-pressed, so its current list or grid state is announced.
The breadcrumb is a <nav aria-label="Current folder">; each action trigger is named "Actions for <name>" by default. The current breadcrumb segment is disabled rather than a navigation target.
The search input has a placeholder but no accessible name. This is a component gap consumers must account for; a surrounding heading does not turn the placeholder into a field label.
Pass a partial labels object to translate the view group, view buttons, breadcrumb, item-action triggers, list headers, default menu commands, and folder item counts. labels.itemActions receives each file name and labels.itemsCount receives the count; localise searchPlaceholder and emptyMessage separately.

Props

Name	Type	Required	Description
`files`	`ManagedFile[]`	—	Files and folders to display.
`path`	`string[]`	—	Breadcrumb segments for the current folder.
`view`	`'list' \| 'grid'`	—	Controlled display mode.
`defaultView`	`'list' \| 'grid'`	—	Initial display mode when uncontrolled. Default: `"list"`.
`onViewChange`	`(view: 'list' \| 'grid') => void`	—	Called after the display mode changes.
`onOpen`	`(file: ManagedFile) => void`	—	Called when a file name or grid card is opened.
`onNavigate`	`(index: number) => void`	—	Called with the selected breadcrumb segment index.
`actions`	`(file: ManagedFile) => DropdownItem[]`	—	Builds the action menu for an item, replacing the default commands.
`searchPlaceholder`	`string`	—	Placeholder shown in the file search field.
`emptyMessage`	`string`	—	Message shown when no files match the search.
`labels`	`FileManagerLabels`	—	Labels for the FileManager chrome — accessible names and visible text. Merged over the defaults, so partial objects work.
`className`	`string`	—	Class appended after the public `.lyra-fm` class.

Plain HTML

The component supplies interaction; this markup is the corresponding static list structure:

html

<div class="lyra-fm">
  <div class="lyra-fm__toolbar">
    <div class="lyra-fm__search"><input placeholder="Search files…" /></div>
    <div class="lyra-fm__views" role="group" aria-label="View mode">
      <button class="lyra-fm__view lyra-fm__view--on" aria-label="List view" aria-pressed="true">
        List
      </button>
      <button class="lyra-fm__view" aria-label="Grid view" aria-pressed="false">Grid</button>
    </div>
  </div>
  <ul class="lyra-fm__list">
    <li class="lyra-fm__row">
      <button class="lyra-fm__name" type="button">
        <span class="lyra-fm__icon lyra-fm__icon--folder">Folder</span>
        <span class="lyra-fm__label">Brand assets</span>
      </button>
      <span class="lyra-fm__cell">12 items</span>
      <span class="lyra-fm__cell">Today</span>
      <span class="lyra-fm__actions"
        ><button class="lyra-fm__more" aria-label="Actions for Brand assets">•••</button></span
      >
    </li>
  </ul>
</div>