@equinor/fusion-wc-layout

Overview

fwc-app-layout is a structural web component for composing application content into a full-height layout with an optional sidebar.

Use it when an application view needs a stable outer layout where primary content can fill the available space, with sidebar content added only when the view needs secondary navigation, filters, or supporting context.

Installation

npm install @equinor/fusion-wc-layout

Import

import '@equinor/fusion-wc-layout';

Usage

<fwc-app-layout>
  <section slot="content">
    Main content
  </section>
</fwc-app-layout>

Properties

| Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | sidebar | sidebar | boolean | false | Enables the sidebar column and renders the sidebar slot. |

Slots

| Slot | Description | | --- | --- | | content | Primary application content. Slotted content is stretched to the full layout height. | | sidebar | Optional secondary content. Rendered only when the sidebar property or attribute is enabled. |

Examples

Content Only

<fwc-app-layout>
  <section slot="content">
    <h1>Project overview</h1>
    <p>Use the content slot for the main view.</p>
  </section>
</fwc-app-layout>

With Sidebar

<fwc-app-layout sidebar>
  <nav slot="sidebar" style="width: 240px;">
    <a href="/projects">Projects</a>
    <a href="/tasks">Tasks</a>
  </nav>

  <section slot="content">
    <h1>Active projects</h1>
    <p>The content area fills the remaining horizontal space.</p>
  </section>
</fwc-app-layout>

With fwc-app-page

<fwc-app-layout sidebar>
  <nav slot="sidebar">Sidebar content</nav>

  <fwc-app-page slot="content">
    <div slot="header">Header content</div>
    <div slot="main">Main content</div>
    <div slot="footer">Footer content</div>
  </fwc-app-page>
</fwc-app-layout>

React

import '@equinor/fusion-wc-layout';

export const ProjectLayout = () => (
  <fwc-app-layout sidebar>
    <nav slot="sidebar">Sidebar content</nav>
    <section slot="content">Main content</section>
  </fwc-app-layout>
);

Layout Behavior

The component renders a single-column grid by default. When sidebar is enabled, the layout switches to two columns where the sidebar uses its intrinsic width and the content area fills the remaining space.