Navbar

Introduction

The navigation header provides common interactive elements.

import type { HomeLayoutProps } from 'fumadocs-ui/home-layout';
 
export const baseOptions: HomeLayoutProps = {
  githubUrl: 'https://github.com/fuma-nama/fumadocs',
  nav: {
    title: 'My App',
  },
};

On docs layout, it becomes a part of sidebar when the sidebar is shown.

Transparent Mode

To make the navbar background transparent, you can configure transparent mode. It uses the none mode by default.

import type { HomeLayoutProps } from 'fumadocs-ui/home-layout';
 
export const baseOptions: HomeLayoutProps = {
  nav: {
    transparentMode: 'top',
  },
};

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

Reference

Prop	Type	Default
`enabled`	`boolean`	-
`component`	`ReactNode`	-
`enableSearch`	`boolean`	-
`children`	`ReactNode`	-
`title`	`ReactNode`	-
`url`	`string`	`'/'`
`transparentMode`	`"none" \| "always" \| "top"`	`none`

Introduction

Sidebar

Transparent Mode

Reference

On this page