Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/directus/directus/llms.txt

Use this file to discover all available pages before exploring further.

Layouts determine how items in a collection are displayed in the admin app.

Overview

Directus includes 8 built-in layouts:
  • Table - Spreadsheet-style rows and columns
  • Cards - Card grid with image previews
  • Calendar - Calendar view for date-based items
  • Map - Geographic visualization
  • Kanban - Board with draggable cards
  • Timeline - Chronological timeline
  • List - Simple list view
  • Grid - Masonry grid

Creating a Layout

npm init directus-extension
# Select "layout" as the extension type

Layout Structure

import { defineLayout } from '@directus/extensions-sdk';

export default defineLayout({
  id: 'my-layout',
  name: 'My Layout',
  icon: 'view_module',
  component: LayoutComponent,
  slots: {
    options: OptionsComponent,
    sidebar: SidebarComponent,
    actions: ActionsComponent,
  },
});

Component Props

The layout component receives:
interface LayoutProps {
  collection: string;
  selection: (string | number)[];
  layoutOptions: Record<string, any>;
  layoutQuery: Record<string, any>;
  filters: Filter[];
  search: string;
}

Next Steps

Interfaces

Create input interfaces

Modules

Create custom modules