# Collection Page Layouts

> Layouts are used to display a list of items on collection pages in different ways.

Layouts allow for listing of items on [collection pages](/guides/content/explore).

Layouts receive a collection, filters, searches, and any custom layout options that are defined in the layout entrypoint. They are then expected to fetch and render the items from a collection.

![A table display in the content module](/img/ca3ceb27-7cbd-493d-acb1-d15cb707fb31.webp)

<partial content="extensions-app">



</partial>

## Layout Entrypoint

The `index.js` or `index.ts` file exports an object that is read by Directus. It contains properties that control how a layout is displayed within menus, which options are available, optional slots, and the actual Vue component that will be loaded.

### Entrypoint Example

```js
import { ref } from 'vue';
import { defineInterface } from '@directus/extensions-sdk'
import LayoutComponent from './layout.vue';

export default defineInterface({
    id: 'custom',
    name: 'Custom',
    icon: 'box',
    component: LayoutComponent,
    slots: {
        options: () => null,
        sidebar: () => null,
        actions: () => null,
    },
    setup() {
        const name = ref('Custom Layout');
        return { name };
    },
});
```

### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        id
      </code>
    </td>
    
    <td>
      string
    </td>
    
    <td>
      A unique identifier for this extension.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        name
      </code>
    </td>
    
    <td>
      string
    </td>
    
    <td>
      The displayed name for this layout in the Data Studio.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      string
    </td>
    
    <td>
      An icon name from the <a href="https://fonts.google.com/icons" rel="nofollow">
        Google Material Icons set
      </a>
      
      . Supports filled and outlined variants.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        component
      </code>
    </td>
    
    <td>
      component
    </td>
    
    <td>
      A reference to the Vue component rendered in the Explore page.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        slots
      </code>
    </td>
    
    <td>
      object
    </td>
    
    <td>
      Additional components to be added by your layout.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        slots.options
      </code>
    </td>
    
    <td>
      component
    </td>
    
    <td>
      A reference to an options component.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        slots.sidebar
      </code>
    </td>
    
    <td>
      component
    </td>
    
    <td>
      A reference to a sidebar component.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        slots.actions
      </code>
    </td>
    
    <td>
      component
    </td>
    
    <td>
      A reference to an actions component.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        setup
      </code>
    </td>
    
    <td>
      function
    </td>
    
    <td>
      A function to setup reactive state to be shared by the layout component and the other components. It receives a <code>
        props
      </code>
      
       object as the first parameter and a <code>
        context
      </code>
      
       object containing an <code>
        emit()
      </code>
      
       function as the second parameter.
    </td>
  </tr>
</tbody>
</table>

The `actions` slot is used to render additional buttons at the top of the layout by the search bar. It is commonly used to add additional buttons or display metadata about the layout.

<partial content="extensions-uid">



</partial>

## Layout Component

The layout component is a Vue component that will be rendered in the Data Studio within Explore pages.

### Component Example

```vue
<template>
    <div>
        <p>Name: {{ name }}</p>
        <p>Collection: {{ collection }}</p>
    </div>
</template>

<script>
export default {
    inheritAttrs: false,
    props: {
        collection: {
            type: String,
            required: true,
        },
        name: {
            type: String,
            required: true,
        },
    },
};
</script>
```

### Props

The layout component will be passed all user configuration options from the entrypoint file. It will also receive the following props:

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        collection
      </code>
    </td>
    
    <td>
      string
    </td>
    
    <td>
      The current collection's name.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        selection
      </code>
    </td>
    
    <td>
      array
    </td>
    
    <td>
      Any currently selected items.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        layoutOptions
      </code>
    </td>
    
    <td>
      object
    </td>
    
    <td>
      The user's currently saved layout options.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        layoutQuery
      </code>
    </td>
    
    <td>
      object
    </td>
    
    <td>
      The user's layout query parameters. (e.g., sort, limit, etc).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        filter
      </code>
    </td>
    
    <td>
      object
    </td>
    
    <td>
      The combined active filter.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        filterUser
      </code>
    </td>
    
    <td>
      object
    </td>
    
    <td>
      The user's currently active filter.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        filterSystem
      </code>
    </td>
    
    <td>
      object
    </td>
    
    <td>
      The system's currently active filter.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        search
      </code>
    </td>
    
    <td>
      string
    </td>
    
    <td>
      The user's current search query.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        selectMode
      </code>
    </td>
    
    <td>
      boolean
    </td>
    
    <td>
      Indicates if the layout should be in select mode.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        readonly
      </code>
    </td>
    
    <td>
      boolean
    </td>
    
    <td>
      Indicates if the layout should be in readonly mode.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        resetPreset
      </code>
    </td>
    
    <td>
      function
    </td>
    
    <td>
      A function to reset the preset.
    </td>
  </tr>
</tbody>
</table>

### Emits

The layout component can emit the following events that will be recognized by Directus.

<table>
<thead>
  <tr>
    <th>
      Event
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        update:selection
      </code>
    </td>
    
    <td>
      Update the currently selected items.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        update:layoutOptions
      </code>
    </td>
    
    <td>
      Update the user's currently saved layout options.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        update:layoutQuery
      </code>
    </td>
    
    <td>
      Update the user's layout query parameters.
    </td>
  </tr>
</tbody>
</table>

<partial content="extensions-app-internals">



</partial>