diff --git a/docs/guides/custom-page-layout.md b/docs/guides/custom-page-layout.md
index 5203f2843e..f8490a87ed 100644
--- a/docs/guides/custom-page-layout.md
+++ b/docs/guides/custom-page-layout.md
@@ -26,6 +26,7 @@ registerLayout({
         content: {
             attachPanel: "none",
             direction: "column",
+            scroll: true,
         },
         footer: {
             attachPanel: "none",
@@ -39,6 +40,7 @@ där:
 
 - `attachPanel` talar om hur en panel ska fästas. Om ytan inte kan ta paneler sätter man `"none"`.
 - `direction` talar om ifall ytan flödar horisontellt eller vertikalt.
+- `scroll` talar om ifall ytan ska scrolla (i den riktning som `direction` talar om).
 
 Styling använder [CSS grid](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Grids) på `::part(grid name)` och kan se ut så här:
 
diff --git a/packages/vue/src/components/FPageClosablePanel/FPageClosablePanel.vue b/packages/vue/src/components/FPageClosablePanel/FPageClosablePanel.vue
new file mode 100644
index 0000000000..36090c2a01
--- /dev/null
+++ b/packages/vue/src/components/FPageClosablePanel/FPageClosablePanel.vue
@@ -0,0 +1,141 @@
+<script lang="ts">
+export default defineComponent({
+    name: "FPageClosablePanel",
+});
+</script>
+
+<script setup lang="ts" generic="T">
+import { computed, defineComponent, onUnmounted, ref, useTemplateRef } from "vue";
+import { FIcon } from "../FIcon";
+import { useAreaData } from "../FPageLayout/use-area-data";
+import { createClosablePanel } from "./use-panel";
+
+const root = useTemplateRef("root");
+const { attach } = useAreaData(root);
+
+const props = defineProps<{
+    name: string;
+}>();
+
+const panel = createClosablePanel<T>(props.name);
+
+const attachClass = computed(() => {
+    switch (attach.value) {
+        case "left":
+            return "attach-left";
+        case "right":
+            return "attach-right";
+    }
+    return undefined;
+});
+
+onUnmounted(() => {
+    panel.destroy();
+});
+
+function onToggle(): void {
+    panel.close();
+}
+
+function onClose(reason?: string): void {
+    if (panel.callback.value) {
+        panel.callback.value({ item: panel.item.value!, reason: reason ?? "close" });
+        panel.close();
+    }
+}
+</script>
+
+<template>
+    <div v-if="panel.item.value" ref="root" class="panel__wrapper">
+        <div class="panel panel--closable" :class="[attachClass]">
+            <div class="panel__header">
+                <div class="panel__title">
+                    <slot name="header" v-bind="{ item: panel.item.value, close: onClose }"></slot>
+                </div>
+                <div class="panel__collapse">
+                    <button type="button" @click="onToggle()">
+                        <f-icon name="close"> <title>Stäng</title> </f-icon>
+                    </button>
+                </div>
+            </div>
+            <div class="panel__content">
+                <slot name="default" v-bind="{ item: panel.item.value, close: onClose }"></slot>
+            </div>
+            <div class="panel__footer">
+                <slot name="footer"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.panel__wrapper {
+    flex-grow: 1;
+    display: flex;
+}
+
+.panel {
+    flex-grow: 1;
+    background: lightskyblue;
+
+    display: flex;
+    flex-direction: column;
+    padding: 0.5rem;
+    gap: 0.5rem;
+    min-width: 25ch;
+
+    @media (width < 640px) {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        z-index: 1;
+
+        &.attach-left {
+            left: 0;
+        }
+
+        &.attach-right {
+            right: 0;
+        }
+    }
+}
+
+.panel__header {
+    flex: 0 0 auto;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: center;
+
+    .attach-left & {
+        flex-direction: row;
+    }
+
+    .attach-right & {
+        flex-direction: row-reverse;
+    }
+}
+
+.panel__title {
+    flex: 1 0 auto;
+    font-weight: 600;
+    font-size: 1.2em;
+}
+
+.panel__content {
+    flex: 1 0 auto;
+}
+
+.panel__footer {
+    flex: 0 0 auto;
+}
+
+button {
+    appearance: none;
+    padding: 0;
+    line-height: 1;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+}
+</style>
diff --git a/packages/vue/src/components/FPageClosablePanel/index.ts b/packages/vue/src/components/FPageClosablePanel/index.ts
new file mode 100644
index 0000000000..889a9eca09
--- /dev/null
+++ b/packages/vue/src/components/FPageClosablePanel/index.ts
@@ -0,0 +1 @@
+export { default as FPageClosablePanel } from "./FPageClosablePanel.vue";
diff --git a/packages/vue/src/components/FPageClosablePanel/use-panel.ts b/packages/vue/src/components/FPageClosablePanel/use-panel.ts
new file mode 100644
index 0000000000..686d186e2a
--- /dev/null
+++ b/packages/vue/src/components/FPageClosablePanel/use-panel.ts
@@ -0,0 +1,57 @@
+import { type Ref, ref } from "vue";
+
+type PanelCallback<T> = (data: { item: T; reason: string }) => void;
+
+interface ClosablePanelControl<T> {
+    readonly name: Readonly<Ref<string>>;
+    item: Ref<T | null>;
+    callback: Ref<PanelCallback<T> | null>;
+    open(item: T, options?: { onClose?: PanelCallback<T> }): void;
+    close(): void;
+    destroy(): void;
+}
+
+interface ClosablePanel<T = unknown> {
+    open(item: T, options?: { onClose?: PanelCallback<T> }): void;
+    close(): void;
+}
+
+const panels: Array<ClosablePanelControl<unknown>> = [];
+
+export function createClosablePanel<T>(name: string): ClosablePanelControl<T> {
+    const control: ClosablePanelControl<unknown> = {
+        name: ref(name),
+        item: ref(null),
+        callback: ref(null),
+        open(item, options) {
+            this.item.value = item;
+            this.callback.value = options?.onClose ?? null;
+        },
+        close() {
+            this.item.value = null;
+            this.callback.value = null;
+        },
+        destroy() {
+            /* do nothing */
+        },
+    };
+    panels.push(control);
+    return control as ClosablePanelControl<T>;
+}
+
+export function usePanel<T = unknown>(name: string): ClosablePanel<T> {
+    return {
+        open(item, options) {
+            const panel = panels.find((it) => it.name.value === name);
+            if (panel) {
+                panel.open(item, options);
+            }
+        },
+        close() {
+            const panel = panels.find((it) => it.name.value === name);
+            if (panel) {
+                panel.close();
+            }
+        },
+    };
+}
diff --git a/packages/vue/src/components/FPageExpandablePanel/FPageExpandablePanel.vue b/packages/vue/src/components/FPageExpandablePanel/FPageExpandablePanel.vue
index fbb0bca257..6847bae54e 100644
--- a/packages/vue/src/components/FPageExpandablePanel/FPageExpandablePanel.vue
+++ b/packages/vue/src/components/FPageExpandablePanel/FPageExpandablePanel.vue
@@ -1,5 +1,11 @@
+<script lang="ts">
+export default defineComponent({
+    name: "FPageExpandablePanel",
+});
+</script>
+
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from "vue";
+import { computed, defineComponent, ref, useTemplateRef } from "vue";
 import { FIcon } from "../FIcon";
 import { useAreaData } from "../FPageLayout/use-area-data";
 import { usePageWidth } from "../../composables";
diff --git a/packages/vue/src/components/FPageMenuPanel/FPageMenuPanel.vue b/packages/vue/src/components/FPageMenuPanel/FPageMenuPanel.vue
index 5a3da056f1..941dbc9570 100644
--- a/packages/vue/src/components/FPageMenuPanel/FPageMenuPanel.vue
+++ b/packages/vue/src/components/FPageMenuPanel/FPageMenuPanel.vue
@@ -1,5 +1,11 @@
+<script lang="ts">
+export default defineComponent({
+    name: "FPageMenuPanel",
+});
+</script>
+
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from "vue";
+import { computed, defineComponent, ref, useTemplateRef } from "vue";
 import { FIcon } from "../FIcon";
 import { useAreaData } from "../FPageLayout/use-area-data";
 import { usePageWidth } from "../../composables";
diff --git a/packages/vue/src/components/index.ts b/packages/vue/src/components/index.ts
index bcead58c08..4a654ba08a 100644
--- a/packages/vue/src/components/index.ts
+++ b/packages/vue/src/components/index.ts
@@ -43,6 +43,7 @@ export { FExpandableParagraph } from "./FExpandableParagraph";
 export { FFieldset } from "./FFieldset";
 export { type FFileItemIconName, FFileItem } from "./FFileItem";
 export * from "./FFileSelector";
+export { FPageClosablePanel } from "./FPageClosablePanel";
 export { FPageExpandablePanel } from "./FPageExpandablePanel";
 export {
     type LayoutDefinition,
diff --git a/packages/vue/src/vite-dev/ankeborgare.ts b/packages/vue/src/vite-dev/ankeborgare.ts
new file mode 100644
index 0000000000..e6a040634f
--- /dev/null
+++ b/packages/vue/src/vite-dev/ankeborgare.ts
@@ -0,0 +1,3 @@
+export interface Ankeborgare {
+    namn: string;
+}
diff --git a/packages/vue/src/vite-dev/app.vue b/packages/vue/src/vite-dev/app.vue
index fe71ef67e4..1c41ccc144 100644
--- a/packages/vue/src/vite-dev/app.vue
+++ b/packages/vue/src/vite-dev/app.vue
@@ -1,34 +1,88 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import { FPageExpandablePanel, FPageMenuPanel, FSelectField, FPageLayout } from "../components";
+import { ref, shallowRef } from "vue";
+import {
+    FPageClosablePanel,
+    FPageExpandablePanel,
+    FPageMenuPanel,
+    FSelectField,
+    FPageLayout,
+    FInteractiveTable,
+    FTableColumn,
+} from "../components";
+import { usePanel } from "../components/FPageClosablePanel/use-panel";
+import MyAwesomePanel from "./my-awesome-panel.vue";
+import { Ankeborgare } from "./ankeborgare";
 
-const leftVariant = ref<typeof FPageExpandablePanel | typeof FPageMenuPanel>(FPageMenuPanel);
-const rightVariant = ref<typeof FPageExpandablePanel | typeof FPageMenuPanel>(FPageExpandablePanel);
+type PanelVariant = typeof FPageExpandablePanel | typeof FPageMenuPanel | typeof FPageClosablePanel;
+
+const leftObjectPanel = usePanel<Ankeborgare>("left-object");
+const leftNumberPanel = usePanel("left-number");
+const rightPanel = usePanel("right");
+const leftVariant = shallowRef<PanelVariant>(FPageMenuPanel);
+const rightVariant = shallowRef<PanelVariant>(FPageExpandablePanel);
+
+const rows = [
+    { id: 1, namn: "Kalle Anka" },
+    { id: 2, namn: "Kajsa Anka" },
+    { id: 3, namn: "Hortensia Anka" },
+];
+
+function onClick(item: number | Ankeborgare): void {
+    if (typeof item === "number") {
+        leftNumberPanel.open(item);
+    } else {
+        leftObjectPanel.open(item, {
+            onClose({ item, reason }) {
+                console.log("onclose", { item, reason });
+            },
+        });
+    }
+    rightPanel.open(item);
+}
 </script>
 
 <template>
     <f-page-layout layout="three-column">
         <template #header> [header] </template>
         <template #left>
-            <Component :is="leftVariant">
+            <Component :is="leftVariant" v-if="leftVariant.name !== FPageClosablePanel.name">
                 <template #header> [panel header] </template>
                 <template #default>
                     <p>[panel content]</p>
                     <p>[panel content]</p>
                     <p>[panel content]</p>
+                    <p>{{ leftVariant.name }}</p>
                     <f-select-field v-model="leftVariant">
                         <template #label>Variant</template>
                         <template #default>
                             <option :value="FPageMenuPanel">Meny</option>
                             <option :value="FPageExpandablePanel">Hopfällbar</option>
+                            <option :value="FPageClosablePanel">Stängbar</option>
                         </template>
                     </f-select-field>
                 </template>
                 <template #footer> [panel footer] </template>
             </Component>
+            <MyAwesomePanel v-if="leftVariant.name === FPageClosablePanel.name" name="left-object"></MyAwesomePanel>
+            <f-page-closable-panel v-if="leftVariant.name === FPageClosablePanel.name" name="left-number">
+                <template #default="{ item }">
+                    <p>En annan panel.</p>
+                    <pre>{{ JSON.stringify({ item }, null, 2) }}</pre>
+
+                    <p>{{ leftVariant.name }}</p>
+                    <f-select-field v-model="leftVariant">
+                        <template #label>Variant</template>
+                        <template #default>
+                            <option :value="FPageMenuPanel">Meny</option>
+                            <option :value="FPageExpandablePanel">Hopfällbar</option>
+                            <option :value="FPageClosablePanel">Stängbar</option>
+                        </template>
+                    </f-select-field>
+                </template>
+            </f-page-closable-panel>
         </template>
         <template #right>
-            <Component :is="rightVariant">
+            <Component :is="rightVariant" v-if="rightVariant !== FPageClosablePanel">
                 <template #header> [panel header] </template>
                 <template #default>
                     <p>[panel content]</p>
@@ -39,11 +93,27 @@ const rightVariant = ref<typeof FPageExpandablePanel | typeof FPageMenuPanel>(FP
                         <template #default>
                             <option :value="FPageMenuPanel">Meny</option>
                             <option :value="FPageExpandablePanel">Hopfällbar</option>
+                            <option :value="FPageClosablePanel">Stängbar</option>
                         </template>
                     </f-select-field>
                 </template>
                 <template #footer> [panel footer] </template>
             </Component>
+            <f-page-closable-panel v-if="rightVariant.name === FPageClosablePanel.name" name="right">
+                <template #default="{ item }">
+                    <pre>{{ JSON.stringify({ item }, null, 2) }}</pre>
+
+                    <p>{{ rightVariant.name }}</p>
+                    <f-select-field v-model="rightVariant">
+                        <template #label>Variant</template>
+                        <template #default>
+                            <option :value="FPageMenuPanel">Meny</option>
+                            <option :value="FPageExpandablePanel">Hopfällbar</option>
+                            <option :value="FPageClosablePanel">Stängbar</option>
+                        </template>
+                    </f-select-field>
+                </template>
+            </f-page-closable-panel>
         </template>
         <template #content>
             <!-- [html-validate-disable-next no-inline-style -- for testing only]-->
@@ -59,6 +129,21 @@ const rightVariant = ref<typeof FPageExpandablePanel | typeof FPageMenuPanel>(FP
                     Maecenas rhoncus felis tincidunt dui faucibus, nec rhoncus tellus mollis. Phasellus vitae magna
                     turpis. Etiam in mattis mi. Duis at justo finibus, tristique lacus nec, lobortis dui.
                 </p>
+                <div
+                    v-if="leftVariant.name === FPageClosablePanel.name || rightVariant.name === FPageClosablePanel.name"
+                >
+                    Öppnas till vänster
+                    <f-interactive-table :rows key-attribute="id" @change="onClick($event)">
+                        <template #caption> Kända ankeborgare </template>
+                        <template #default="{ row }">
+                            <f-table-column name="name" title="Namn">
+                                {{ row.namn }}
+                            </f-table-column>
+                        </template>
+                    </f-interactive-table>
+                    <button type="button" class="button button--secondary" @click="onClick(1)">Öppna grunka</button>
+                    <button type="button" class="button button--secondary" @click="onClick(2)">Öppna mojäng</button>
+                </div>
                 <p>
                     Ut placerat consectetur pretium. Proin luctus neque vitae consequat pellentesque. Aliquam arcu arcu,
                     auctor ac ipsum aliquet, bibendum pretium est. Integer sit amet mattis dolor, quis volutpat justo.
diff --git a/packages/vue/src/vite-dev/my-awesome-panel.vue b/packages/vue/src/vite-dev/my-awesome-panel.vue
new file mode 100644
index 0000000000..31080dfc17
--- /dev/null
+++ b/packages/vue/src/vite-dev/my-awesome-panel.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { FPageClosablePanel } from "../components";
+import { type Ankeborgare } from "./ankeborgare";
+
+const FooBar = FPageClosablePanel<Ankeborgare>;
+</script>
+
+<template>
+    <foo-bar name="left-object">
+        <template #header="{ item }"> {{ item.namn }} </template>
+        <template #default="{ item, close }">
+            <pre>{{ JSON.stringify({ item }, null, 2) }}</pre>
+            <button type="button" class="button button--primary" @click="close('save')">Spara</button>
+            <button type="button" class="button button--secondary" @click="close('dismiss')">Avbryt</button>
+        </template>
+    </foo-bar>
+</template>