Layout

The layout of documentation

The layout of documentation pages, it must be nested under the Root Provider.

Usage

Wrap the children and pass your page tree to the component.

import { DocsLayout } from 'next-docs-ui/layout';
 
export default function Layout({ children }) {
  return <DocsLayout tree={tree}>{children}</DocsLayout>;
}

Prop	Type	Default
`tree`	`PageTree`	-
`nav`	`object`	-
`sidebar`	`object`	-
`children`	`ReactNode`	-

Prop	Type	Default
`enabled`	`boolean`	`true`
`component`	`ReactNode`	-
`title`	`ReactNode`	-
`url`	`string`	`/`
`items`	`NavItemProps[]`	-
`githubUrl`	`string`	-

It is common to share a navbar across all the pages. To achieve this, you may disable the default navbar and place your own instead.

Learn more about Navbar

Prop	Type	Default
`enabled`	`boolean`	`true`
`banner`	`ReactNode`	-
`footer`	`ReactNode`	-
`component`	`ReactNode`	-
`collapsible`	`boolean`	`true`
`defaultOpenLevel`	`number`	`1`

Example

app/docs/[[...slug]]/layout.tsx

import { DocsLayout } from 'next-docs-ui/layout';
import { ReactNode } from 'react';
 
export default function Layout({ children }: { children: ReactNode }) {
  return <DocsLayout tree={tree}>{children}</DocsLayout>;
}

Layout

Usage

Navbar

Shared Navbar

Sidebar

Example

On this page