Layouts

A list of layout components.

Overview

Hanzo Docs UI provides essential layouts to display content.

Layout Links

Navigation configurations on all layouts.

Navbar

Navbar/header configurations.

Docs Layout

The layout of documentation

Flux Layout

An aggressively minimal layout for docs

Home Layout

Shared layout for other pages

Notebook Layout

A compact version of Docs Layout

Docs Page

A page in your documentation

Root Provider

The context provider of Hanzo Docs UI.

Configurations

Each layout supports a shared set of options.

It is recommended to store these options into a file, and pass them to the layouts.

lib/layout.shared.tsx
import type { BaseLayoutProps } from '@hanzo/docs/ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    nav: {
      title: 'My App',
    },
  };
}
app/docs/layout.tsx
import { DocsLayout } from '@hanzo/docs/ui/layouts/docs';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      {...baseOptions()}
      tree={source.getPageTree()}
    >
      {children}
    </DocsLayout>
  );
}
app/(home)/layout.tsx
import { HomeLayout } from '@hanzo/docs/ui/layouts/home';
import { baseOptions } from '@/lib/layout.shared';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <HomeLayout
      {...baseOptions()}
    >
      {children}
    </HomeLayout>
  );
}

See detailed docs for and options.

PropType
How is this guide?
Type Table
A table for documenting types
Layout Links
Navigation configurations on all layouts.