main

main(opts?): void

Defined in: components/main.ts:154

An application shell that wires up the things almost every app needs: a sticky top bar (icon, title, subtitle, action menu), a scrollable content area, and a footer. With MainOptions.maxWidth the content area is centred and its width capped. Add a nav to get a responsive sidebar (auto-collapses to a menu button below 640 px, or always a button with navPosition: "button").

Parameters

opts?

MainOptions = {}

Returns

void

Example

S.main({
  icon: "✦",
  title: "Staffa Demo",
  maxWidth: "56rem",
  nav: {
    items: [
      { label: "Home", icon: () => A("#🏠"), href: "/" },
      { label: "Settings", href: "/settings" },
    ],
  },
  navPosition: "left",
  menu: () => S.button({ content: "New", attrs: ".small" }),
  content: drawPage,
  footer: "© 2026",
});

function drawPage() {
  S.box({title: "Hello world", content: "Here's you app.."});
}