Navbar

Introduction

The navigation header provides common interactive elements.

On larger devices, it becomes a part of sidebar.

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout
  nav={{ title: <Logo />, githubUrl: 'https://github.com/fuma-nama/fumadocs' }}
/>;

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

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout nav={{ transparentMode: 'top' }} />;

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