GlobUI

A document layout: the page scrolls as a document, and the header stays visible. Use it for simple apps, portals and docs.

Client componentUses state or handlers, so it starts with "use client".

import { StackedLayout } from "@glob-ui/stacked-layout"

Anatomy

Each slot declares its scroll behaviour. Switch on Anatomy to see them, and Fill with content to see which region scrolls.

import { StackedLayout } from "@glob-ui/stacked-layout"
import { LayoutNavTrigger } from "@glob-ui/layout"
import { PageLayout } from "@glob-ui/page-layout"

const SECTIONS = Array.from({ length: 12 }, (_, i) => `Section ${i + 1}`)

export default function StackedDefault() {
  return (
    <StackedLayout
      header={
        <>
          <LayoutNavTrigger />
          <strong>Docs</strong>
          <nav aria-label="Top" className="ml-auto hidden gap-4 text-sm lg:flex">
            <a href="#guides" className="no-underline">Guides</a>
            <a href="#api" className="no-underline">API</a>
          </nav>
        </>
      }
      mobileNav={
        <>
          <a href="#guides" className="rounded-md px-3 py-2 text-sm no-underline hover:bg-fd-accent">Guides</a>
          <a href="#api" className="rounded-md px-3 py-2 text-sm no-underline hover:bg-fd-accent">API</a>
        </>
      }
      navLabel="Site"
      footer={<p className="text-sm text-fd-muted-foreground">Footer</p>}
    >
      <PageLayout>
        {SECTIONS.map((section) => (
          <section key={section} className="flex flex-col gap-2">
            <h2 className="text-lg font-semibold">{section}</h2>
            <p>Text of the section. The header stays in view while the document scrolls.</p>
          </section>
        ))}
      </PageLayout>
    </StackedLayout>
  )
}

import { StackedLayout } from "@glob-ui/stacked-layout"import { LayoutNavTrigger } from "@glob-ui/layout"import { PageLayout } from "@glob-ui/page-layout"const SECTIONS = Array.from({ length: 12 }, (_, i) => `Section ${i + 1}`)export default function StackedDefault() {  return (    <StackedLayout      header={        <>          <LayoutNavTrigger />          <strong>Docs</strong>          <nav aria-label="Top" className="ml-auto hidden gap-4 text-sm lg:flex">            <a href="#guides" className="no-underline">Guides</a>            <a href="#api" className="no-underline">API</a>          </nav>        </>      }      mobileNav={        <>          <a href="#guides" className="rounded-md px-3 py-2 text-sm no-underline hover:bg-fd-accent">Guides</a>          <a href="#api" className="rounded-md px-3 py-2 text-sm no-underline hover:bg-fd-accent">API</a>        </>      }      navLabel="Site"      footer={<p className="text-sm text-fd-muted-foreground">Footer</p>}    >      <PageLayout>        {SECTIONS.map((section) => (          <section key={section} className="flex flex-col gap-2">            <h2 className="text-lg font-semibold">{section}</h2>            <p>Text of the section. The header stays in view while the document scrolls.</p>          </section>        ))}      </PageLayout>    </StackedLayout>  )}

Slots

The layout is a grid of slots. A prop fills each slot, and each slot is fixed or scroll.

StackedLayout: each slot is fixed or scroll. A prop fills it.

Slot	Element	Scroll	Notes
`header`	`<header>`	fixed	Sticks to the top of the document.
`main`	`<main>`	scroll	The page, in document flow. The document is the scroller. It has no padding: put a `PageLayout` in it.
`footer`	`<footer>`	fixed	At the end of the document. It is not a scroller.

fixed: the slot never scrolls. It stays in place, or sticks.
scroll: the one region that scrolls for this part of the screen.

API

StackedLayoutProps

Prop

Type

Accessibility

Key or action	Behaviour
Skip to content	The first Tab stop. Enter moves focus to `main`.
mobileNav	Opens from `LayoutNavTrigger` in a Sheet below `lg`, the same as the app shell.

ARIA. Landmarks: banner, one main, and contentinfo for the footer. useLayoutScroll() returns document.scrollingElement.

StackedLayout

AnatomyCopy Anchor Link

SlotsCopy Anchor Link

APICopy Anchor Link

StackedLayoutPropsCopy Anchor Link

AccessibilityCopy Anchor Link

On this page

Anatomy

Slots

API

StackedLayoutProps

Accessibility