ナビゲーション

Site Header

ロゴ・ナビゲーションリンク・アクションエリアを持つサイトヘッダーコンポーネント。sticky・backdrop-blur 対応。

インストール

npx shadcn add https://d-ui.daigo-suhara.com/registry/site-header.json

サンプル

My App

使い方

import { SiteHeader } from "@/components/ui/site-header"

export default function Example() {
  return (
    <SiteHeader
      title="My App"
      nav={[
        { label: "ホーム", href: "/" },
        { label: "ドキュメント", href: "/docs" },
      ]}
      sticky
    />
  )
}

プロパティ

logo必須

React.ReactNode

ロゴ画像やアイコン

title任意

string

サイト名テキスト

デフォルト:"My App"

nav任意

{ label: string; href: string }[]

ナビゲーションリンクの配列

デフォルト:[]

actions必須

React.ReactNode

右端に表示するボタン等のアクション要素

sticky任意

boolean

スクロール時にヘッダーを固定するか

デフォルト:false

bordered任意

boolean

下部ボーダーを表示するか

デフォルト:true

blurred任意

boolean

backdrop-blur を適用するか

デフォルト:true

className必須

string

追加のCSSクラス

	名前	型	デフォルト	説明
必須	`logo`	`React.ReactNode`	—	ロゴ画像やアイコン
任意	`title`	`string`	`"My App"`	サイト名テキスト
任意	`nav`	`{ label: string; href: string }[]`	`[]`	ナビゲーションリンクの配列
必須	`actions`	`React.ReactNode`	—	右端に表示するボタン等のアクション要素
任意	`sticky`	`boolean`	`false`	スクロール時にヘッダーを固定するか
任意	`bordered`	`boolean`	`true`	下部ボーダーを表示するか
任意	`blurred`	`boolean`	`true`	backdrop-blur を適用するか
必須	`className`	`string`	—	追加のCSSクラス

ソースコード

import * as React from "react";
import { cn } from "@/lib/utils";

interface NavItem {
  label: string;
  href: string;
}

interface SiteHeaderProps {
  logo?: React.ReactNode;
  title?: string;
  nav?: NavItem[];
  actions?: React.ReactNode;
  sticky?: boolean;
  bordered?: boolean;
  blurred?: boolean;
  className?: string;
}

export function SiteHeader({
  logo,
  title = "My App",
  nav = [],
  actions,
  sticky = false,
  bordered = true,
  blurred = true,
  className,
}: SiteHeaderProps) {
  return (
    <header
      className={cn(
        "w-full z-40 bg-background/80",
        sticky && "sticky top-0",
        blurred && "backdrop-blur-md",
        bordered && "border-b border-border/60",
        className,
      )}
    >
      <div className="mx-auto flex h-14 max-w-6xl items-center gap-4 px-4 md:px-6">
        {/* Logo / Title */}
        <div className="flex items-center gap-2 font-semibold text-sm shrink-0">
          {logo}
          {title}
        </div>

        {/* Nav links */}
        {nav.length > 0 && (
          <nav className="hidden md:flex items-center gap-1 flex-1">
            {nav.map((item) => (
              <a
                key={item.href}
                href={item.href}
                className="rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
              >
                {item.label}
              </a>
            ))}
          </nav>
        )}

        {/* Spacer */}
        <div className="flex-1" />

        {/* Actions */}
        {actions && <div className="flex items-center gap-2">{actions}</div>}
      </div>
    </header>
  );
}