App Layout

The app layout provides a complete application shell with an app bar, responsive navigation drawer, and a body area for page content.

Usage

forge-app-layout scaffolds an entire application: an app bar with logo, title, and actions; a navigation drawer that sits beside the body on large screens and becomes a modal drawer on small ones; and a body area with optional header, footer, and side panels. Start every Forge app with it, put page content in the body slot, and let the layout handle responsiveness.

The app layout isn’t included in the root @tylertech/forge import, so register it with its own side-effect import:

import '@tylertech/forge/app-layout';

To fill the window, <body> needs height: 100dvh; width: 100dvw; margin: 0; background-color: var(--forge-theme-surface-dim). Load forge-core.css from @tylertech/forge/dist/forge-core.css to get these, or set them yourself.

Slots

app-bar-logo, app-bar-start, app-bar-center, app-bar-end: content placed in the built-in app bar.
navigation: the navigation drawer contents, typically a forge-list with navlist.
body: the main page content. Use a <main slot="body"> element.
body-header, body-footer, body-left, body-right: regions scoped to the body area.
header, footer, left, right: regions that frame the entire layout.

On small screens the navigation becomes a modal drawer. Add data-forge-app-layout-close to any clickable item in the navigation slot to close the modal drawer when it’s activated.

Set use-mini-drawer to collapse the drawer to an icon-only mini drawer, and add mini-hover to expand it while hovered.

Rules

Use the app layout as the outermost structure for a full application page.

Put navigation in the navigation slot so it adapts to screen size.

Use a forge-list with the navlist attribute in the navigation slot.

Put page content in a <main slot="body"> element.

Treat the app title as the page's h1 and start content headings at h2.

Don't

Don't nest an app layout inside another app layout or a scaffold.

Don't build a separate app bar and drawer by hand when the layout already provides them.

Don't place primary page content in the side slots — those are for supplementary panels.

Basic layout

An app bar with a logo, title, and actions, a navigation list, and a body with a header toolbar and footer.

A standard application shell.

<forge-app-layout app-title="My Application" app-title-href="/">
  <!-- App bar logo -->
    <forge-icon slot="app-bar-logo" name="home">
    </forge-icon>
    <!-- App bar end actions -->
      <div slot="app-bar-end" class="flex items-center gap-xsmall">
        <forge-icon-button density="medium" aria-label="Notifications" theme="app-bar">
          <forge-icon name="notifications" external>
          </forge-icon>
        </forge-icon-button>
        <forge-user-profile
        email="tyler.tech@tylertech.com"
        button-label="Open the incredibly awesome profile menu"
        theme-toggle
        image-url
        full-name="Tyler tech"
        slot="app-bar-end">
          <forge-profile-link slot="link">
            <forge-icon slot="icon" name="settings" external>
            </forge-icon>
            <a href="http://www.google.com" target="_blank">
              Settings
            </a>
          </forge-profile-link>
          <forge-profile-link slot="link">
            <forge-icon slot="icon" name="account" external>
            </forge-icon>
            <a href="http://www.google.com" target="_blank">
              Profile
            </a>
          </forge-profile-link>
          <span slot="sign-in-button-text">
            Sign in
          </span>
          <span slot="sign-out-button-text">
            Sign Out
          </span>
        </forge-user-profile>
      </div>
      <!-- Navigation drawer content -->
        <forge-list slot="navigation" navlist>
          <forge-list-item selected>
            <forge-icon slot="start" name="dashboard">
            </forge-icon>
            <a href="#">
              Dashboard
            </a>
          </forge-list-item>
          <forge-list-item>
            <forge-icon slot="start" name="bar_chart">
            </forge-icon>
            <a href="#">
              Analytics
            </a>
          </forge-list-item>
          <forge-list-item>
            <forge-icon slot="start" name="people">
            </forge-icon>
            <a href="#">
              Users
            </a>
          </forge-list-item>
          <forge-list-item>
            <forge-icon slot="start" name="folder">
            </forge-icon>
            <a href="#">
              Projects
            </a>
          </forge-list-item>
          <forge-divider>
          </forge-divider>
          <forge-list-item>
            <forge-icon slot="start" name="settings">
            </forge-icon>
            <a href="#">
              Settings
            </a>
          </forge-list-item>
          <forge-list-item>
            <forge-icon slot="start" name="help">
            </forge-icon>
            <a href="#">
              Help
            </a>
          </forge-list-item>
        </forge-list>
        <!-- Body header toolbar -->
          <div slot="body-header">
            <forge-toolbar>
              <h2 slot="start" class="text-heading4">
                Page title
              </h2>
              <div slot="end" class="flex gap-xsmall">
                <forge-icon-button density="medium" aria-label="Notifications">
                  <forge-icon name="notifications">
                  </forge-icon>
                </forge-icon-button>
                <forge-icon-button density="medium" aria-label="Settings">
                  <forge-icon name="settings">
                  </forge-icon>
                </forge-icon-button>
                <forge-icon-button density="medium" aria-label="More options">
                  <forge-icon name="more_vert">
                  </forge-icon>
                </forge-icon-button>
              </div>
            </forge-toolbar>
          </div>
          <!-- Main content -->
            <main class="p-medium grid bg-surface-dim" slot="body">
              <div class="striped-box">
              </div>
            </main>
            <!-- Footer -->
              <footer slot="body-footer">
                <forge-toolbar inverted>
                  <div slot="center" class="text-body1">
                    © 2026 My Application. All rights reserved.
                  </div>
                </forge-toolbar>
              </footer>
            </forge-app-layout>

A responsive application layout component that provides an app bar with a navigation drawer. On small screens, the navigation appears in a modal dialog. On large screens, it appears in a side drawer.

import "@tylertech/forge/app-layout";

Properties

Property	Attribute	Type	Default	Description
`appTitle`	—	`string`	`''`	The title text to display in the app bar.
`appTitleHref`	—	`string`	`''`	The URL that the app bar title links to.
`breakpoint`	—	`number`	`960`	The screen width breakpoint in pixels for responsive behavior.
`useMiniDrawer`	—	`boolean`	`false`	Whether to use `forge-mini-drawer` instead of `forge-drawer` for large screens.
`miniHover`	—	`boolean`	`false`	Whether the mini drawer should expand on hover.
`isLargeScreen`	—	`boolean`	—	Whether the current screen width is above the breakpoint.

Events

Name	Type	Description
`forge-app-layout-breakpoint-change`	`CustomEvent<AppLayoutBreakpointChangeEventData>`	Fired when the screen size crosses the breakpoint threshold.
`forge-app-layout-drawer-change`	`CustomEvent<AppLayoutDrawerChangeEventData>`	Fired when the navigation drawer opens or closes.

Slots

Name	Description
`(default)`	Default slot. Content without a slot attribute is placed in the body area.
`body`	Explicit body slot. Alternative to using the default slot.
`header`	Places content in the header
`footer`	Places content in the footer
`left`	Places content to the left of all content
`right`	Places content to the right of all content
`body-header`	Places content in the header of the body
`body-footer`	Places content in the footer of the body
`body-left`	Places content to the left of the body content
`body-right`	Places content to the right of the body content
`navigation`	Responsive navigation content that renders in left slot (small screens) or body-left slot (large screens)
`app-bar-logo`	Places content in the app bar logo slot
`app-bar-start`	Places content in the app bar start slot
`app-bar-center`	Places content in the app bar center slot
`app-bar-end`	Places content in the app bar end slot

CSS Custom Properties

Name	Description
`--forge-app-layout-drawer-width`	Controls the width of the navigation drawer (default: 320px).
`--forge-app-layout-dialog-width`	Controls the width of the navigation dialog on small screens (default: 320px).
`--forge-app-layout-mini-drawer-z-index`	Controls the z-index of the mini drawer when using hover mode (default: 3).

Methods

Name	Returns	Description
`closeDrawer()`	`void`	Closes the navigation drawer. Only has effect on small screens where the drawer is modal.

Accessibility documentation coming soon.