Classic Docs Layout

The classic docs layout provides the familiar three-column documentation experience.

When to use#

Choose this layout when you need:

Full sidebar navigation for browsing docs
Table of contents for long pages
Previous and next pagination
Search in the header

This is the most common layout for:

Developer documentation
API references
Technical guides
Product manuals

Features#

Feature	Included
Sidebar navigation	Yes
Table of contents	Yes
Mobile drawer	Yes
Search	Yes
Previous/next links	Yes
Section collapsing	Yes

Usage#

TSX

import { DocsLayout, DocsPage } from "@emcy/docs";
import "@emcy/docs/styles.css";
 
// In your layout.tsx
export default function Layout({ children }) {
  return (
    <DocsLayout
      navigation={docsSource.getNavigation()}
      brand={<span>My Docs</span>}
      languageSwitcher={<LanguageSwitcher locales={["en", "es", "zh"]} />}
      searchAction={search}
    >
      {children}
    </DocsLayout>
  );
}
 
// In your page.tsx
export default function Page() {
  const { entry, previousEntry, nextEntry } = docsSource.resolveRoute(slug);
 
  return (
    <DocsPage
      entry={entry}
      previousEntry={previousEntry}
      nextEntry={nextEntry}
    />
  );
}

Layout props#

Prop	Type	Description
`navigation`	`DocsNavSection[]`	Sidebar navigation structure
`brand`	`ReactNode`	Logo or brand for the header
`topLinks`	`DocsLayoutLink[]`	Links in the header
`header`	`ReactNode \| ((props) => ReactNode) \| null`	Replace the default docs header or remove it entirely
`sidebar`	`ReactNode \| ((props) => ReactNode) \| null`	Replace the default docs sidebar or remove it entirely
`languageSwitcher`	`ReactNode`	Optional language switcher slot in the shared shell
`themeSwitcher`	`ReactNode`	Optional theme switcher slot in the shared shell
`theme`	`DocsThemeConfig`	Preset, mode, density, accent, radius, and shell sizing
`searchAction`	`DocsSearchAction`	Server action for search

Try it#

You are viewing this layout right now at docs.

Use Theme configuration to restyle the same layout, or Custom header and sidebar when you need to substitute the chrome.