Recipes · Layout

Documentation layout

The three-column shell used by the Nova docs themselves — sticky sidebar, article, and a floating table of contents.

Preview

The exact composition below is what ships in production apps built on Nova.

Docs

Introduction

Novix UI is a premium React component library…

Source

tsx

export function DocsShell({ children, toc }) {
  return (
    <div className="mx-auto grid max-w-[92rem] grid-cols-[240px_minmax(0,1fr)_200px] gap-8">
      <aside className="sticky top-16 h-[calc(100vh-4rem)] overflow-y-auto">
        <SidebarNav />
      </aside>
      <article className="min-w-0 py-10">{children}</article>
      <aside className="sticky top-16 h-[calc(100vh-4rem)]">
        <TableOfContents items={toc} />
      </aside>
    </div>
  );
}

Anatomy

Sidebar collapses to a sheet under lg.
Article region caps at ~70ch for readability.
TOC uses IntersectionObserver to highlight the active section.
Reading progress bar spans the top of the article.