Navbar

Configurations

Options for navbar (header).

PropType

Transparent Mode

To make the navbar background transparent, you can configure transparent mode.

All

Home Layout

Docs Layout

lib/layout.shared.tsx

import type { BaseLayoutProps } from '@hanzo/docs/ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    nav: {
      title: 'My App',
      transparentMode: 'top',
    },
  };
}

import { baseOptions } from '@/lib/layout.shared';
import { HomeLayout } from '@hanzo/docs/ui/layouts/home';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const base = baseOptions();
  return (
    <HomeLayout
      {...base}
      nav={{
        ...base.nav,
        transparentMode: 'top',
      }}
    >
      {children}
    </HomeLayout>
  );
}

import { baseOptions } from '@/lib/layout.shared';
import { DocsLayout } from '@hanzo/docs/ui/layouts/docs';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const base = baseOptions();
  return (
    <DocsLayout
      {...base}
      nav={{
        ...base.nav,
        transparentMode: 'top',
      }}
    >
      {children}
    </DocsLayout>
  );
}

Mode	Description
`always`	Always use a transparent background
`top`	When at the top of page
`none`	Disable transparent background (default)

To replace the navbar in different layouts, set nav.component to your own component.

All

Home Layout

Docs Layout

lib/layout.shared.tsx

import type { BaseLayoutProps } from '@hanzo/docs/ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    nav: {
      component: <CustomNavbar />,
    },
  };
}

import { baseOptions } from '@/lib/layout.shared';
import { HomeLayout } from '@hanzo/docs/ui/layouts/home';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const base = baseOptions();
  return (
    <HomeLayout
      {...base}
      nav={{
        ...base.nav,
        component: <CustomNavbar />,
      }}
    >
      {children}
    </HomeLayout>
  );
}

import { baseOptions } from '@/lib/layout.shared';
import { DocsLayout } from '@hanzo/docs/ui/layouts/docs';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const base = baseOptions();
  return (
    <DocsLayout
      {...base}
      nav={{
        ...base.nav,
        component: <CustomNavbar />,
      }}
    >
      {children}
    </DocsLayout>
  );
}

Hanzo Docs uses CSS Variables to share the size of layout components, and fit each layout component into appropriate position.

You need to override --fd-nav-height to the exact height of your custom navbar, this can be done with a CSS stylesheet (e.g. in global.css):

:root {
  --fd-nav-height: 80px !important;
}

Configurations

Transparent Mode

Replace Navbar