ナビゲーションバー
ナビゲーションバーとヘッダーの設定。
設定
ナビゲーションバー(ヘッダー)のオプションです。
プロパティ
型
透過モード
ナビゲーションバーの背景を透過にしたい場合は、透過モードを設定してください。
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
export function baseOptions(): BaseLayoutProps {
return {
nav: {
title: 'My App',
transparentMode: 'top',
},
};
}| モード | 説明 |
|---|---|
always | 常に背景を透明にします |
top | ページ最上部にあるときのみ背景を透明にします |
none | 背景の透明化を無効にします (デフォルト) |
ナビゲーションバーの置き換え
各レイアウトのナビゲーションバーを置き換えるには、nav.component に独自のコンポーネントを指定します。
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
export function baseOptions(): BaseLayoutProps {
return {
nav: {
component: <CustomNavbar />,
},
};
}Fumadocs は CSS 変数を使ってレイアウトコンポーネントのサイズを共有し、各レイアウトコンポーネントを適切な位置に配置しています。
--fd-nav-height を、カスタムナビゲーションバーの実際の高さに合わせて上書きする必要があります。これは CSS スタイルシート (例: global.css) で設定できます。
:root {
--fd-nav-height: 80px !important;
}How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep