Navbar

Top navigation bar

Introduction

The navigation header provides common interactive elements.

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
export const baseOptions: BaseLayoutProps = {
  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 { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
export const baseOptions: BaseLayoutProps = {
  nav: {
    transparentMode: 'top',
  },
};
ModeDescription
alwaysAlways use a transparent background
topWhen at the top of page
noneDisable transparent background

Reference

PropTypeDefault
enabled
boolean
-
component
ReactNode
-
enableSearch
boolean
-
children
ReactNode
-
title
ReactNode
-
url
string
'/'
transparentMode
"always" | "top" | "none"
none
Edit on GitHub

Last updated on

On this page