Skip to content

User Interface Overview

The Files Web Client interface consists of four main areas:

┌──────────────────────────────────────────────────────────┐
│  Header (Type, Modified, Sort, +New, View Toggle)        │
├──────────┬──────────────────────────────┬────────────────┤
│          │                              │                │
│ Sidebar  │    Main Content Area         │ Details Panel  │
│          │    (Grid or List View)       │ (collapsible)  │
│          │                              │                │
│          │                              │                │
└──────────┴──────────────────────────────┴────────────────┘

The left sidebar provides primary navigation. It contains the following sections:

Menu Item Description
Recent Files you have recently viewed or edited.
All Files All files and folders in your workspace.
My Files Files and folders you own.
Shared with me Files and folders that others have shared with you.
Trash Deleted files awaiting permanent removal or restoration.
  • The sidebar also displays your storage usage summary at the bottom (e.g., "2.5 GB of 10 GB used").
  • The active navigation item is highlighted with a blue left border indicator.

The header bar contains (from left to right):

  1. Section Title & Icon — Displays the current section name (e.g., "All Files", "Recent") with a corresponding icon.
  2. Type Filter — A dropdown to filter files by type (e.g., Document, Spreadsheet, Image).
  3. Modified Filter — A dropdown to filter files by modification date (e.g., Today, Last 7 days).
  4. Sort — A dropdown to change the sort order and folder placement.
  5. + New Button — A blue button that opens a dropdown to create new files/folders or upload files/folders.
  6. View Toggle — Buttons to switch between Grid View and List View.
  7. Info Button — Opens the Details Panel for the selected item.
  8. Selection Info — When files are selected, shows the count (e.g., "3 selected") with action buttons (Share, Download, Move, Delete, Copy Link) and a "Clear selection" option.

Main Content Area

Displays your files and folders in one of two view modes:

  • Grid View — Card-based layout with file type icons and thumbnails.
  • List View — Table-based layout showing columns for Name, Date Modified, Owner, and File Size.

A view toggle button lets you switch between Grid and List modes.

Breadcrumb Navigation appears above the content area, showing your current folder path. Click any breadcrumb segment to navigate to that folder.

Details Panel

The right-side details panel can be shown or hidden. When a file or folder is selected, it displays:

  • Details tab — File properties and metadata.
  • Versions tab — File version timeline (files only).