PageHeader

ページ上部に表示するstickyヘッダー。パンくずナビゲーションとアクションボタンを配置できます。

インポート

import { PageHeader, PageHeaderLink, PageHeaderTitle, PageHeaderItem } from '@caroainc/ui-components/server'

個別サブパス:

import { PageHeader, PageHeaderLink, PageHeaderTitle, PageHeaderItem } from '@caroainc/ui-components/page-header'

注意: PageHeaderLink / PageHeaderTitle は icon propで実行時にアイコンを選べる設計のため、内部で全アイコンを参照する動的解決を経由します。このサブパスを使ってもlucide-reactの全アイコンがバンドルに含まれるため、バンドルサイズ削減効果はありません（他コンポーネントのサブパスとは異なります）。他の依存を絞る目的では有効です。

基本的な使い方

<PageHeader>
  <PageHeaderLink href="/events">イベント</PageHeaderLink>
  <PageHeaderTitle>新規作成</PageHeaderTitle>
</PageHeader>

タイトルのみ

パンくずなしのシンプルなヘッダーとしても使えます。

<PageHeader>
  <PageHeaderTitle>イベント</PageHeaderTitle>
</PageHeader>

アクション付き

actions propで右側にボタン等を配置できます。

<PageHeader actions={
  <div className="flex items-center gap-1">
    <Button variant="ghost" size="sm" shape="square">
      <Icon name="Settings" size="sm" />
    </Button>
    <Button size="sm">保存</Button>
  </div>
}>
  <PageHeaderLink href="/events">イベント</PageHeaderLink>
  <PageHeaderTitle>新規作成</PageHeaderTitle>
</PageHeader>

アイコン付き

PageHeaderLink と PageHeaderTitle は icon propでアイコンを表示できます。

<PageHeader>
  <PageHeaderLink href="/calendars" icon="Calendar">カレンダー</PageHeaderLink>
  <PageHeaderTitle>新規作成</PageHeaderTitle>
</PageHeader>

複数階層

<PageHeader>
  <PageHeaderLink href="/calendars">カレンダー</PageHeaderLink>
  <PageHeaderLink href="/calendars/my">マイカレンダー</PageHeaderLink>
  <PageHeaderTitle>イベント詳細</PageHeaderTitle>
</PageHeader>

ドロップダウンで横移動

PageHeaderItem を使って DropdownMenu 等の自由なコンテンツを配置できます。パンくずの一部をドロップダウンにすることで、同階層のページへの横移動が可能です。

<PageHeader>
  <PageHeaderLink href="/events">イベント</PageHeaderLink>
  <PageHeaderItem>
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button className="flex items-center gap-1 text-sm font-medium transition-opacity hover:opacity-60">
          夏祭りイベント
          <Icon name="ChevronDown" size="xs" />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-[240px]">
        <DropdownMenuItem>夏祭りイベント</DropdownMenuItem>
        <DropdownMenuItem>秋の収穫祭</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <Icon name="Plus" size="sm" />
          新規イベント作成
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </PageHeaderItem>
</PageHeader>

タブ付きヘッダー

PageHeaderTabs を PageHeader の直下に配置すると、サブナビゲーションとして機能します。スクロールしても PageHeader と一緒に画面上部に貼りつきます。

<PageHeader>
  <PageHeaderLink href="/calendars">カレンダー</PageHeaderLink>
  <PageHeaderTitle>あいうえおカレンダー</PageHeaderTitle>
</PageHeader>
<PageHeaderTabs>
  <PageHeaderTabItem href="/calendars/123" active>イベント</PageHeaderTabItem>
  <PageHeaderTabItem href="/calendars/123/members">メンバー</PageHeaderTabItem>
  <PageHeaderTabItem href="/calendars/123/settings">設定</PageHeaderTabItem>
</PageHeaderTabs>

Next.js Link との連携

PageHeaderTabItem も asChild に対応しています。

<PageHeaderTabs>
  <PageHeaderTabItem asChild active>
    <Link href="/calendars/123">イベント</Link>
  </PageHeaderTabItem>
  <PageHeaderTabItem asChild>
    <Link href="/calendars/123/members">メンバー</Link>
  </PageHeaderTabItem>
</PageHeaderTabs>

Next.js Link との連携

PageHeaderLink は asChild を使って Next.js の Link コンポーネントをレンダリングできます。

import Link from 'next/link'
 
<PageHeader>
  <PageHeaderLink asChild>
    <Link href="/events">イベント</Link>
  </PageHeaderLink>
  <PageHeaderTitle>新規作成</PageHeaderTitle>
</PageHeader>

注意: asChild 使用時は icon prop は無効になります。アイコンが必要な場合は子要素内に直接配置してください。
<PageHeaderLink asChild>
  <Link href="/events" className="flex items-center gap-1.5">
    <Icon name="Calendar" size="sm" />
    イベント
  </Link>
</PageHeaderLink>

実際の使用例

管理画面の詳細ページ

<PageHeader actions={
  <div className="flex items-center gap-2">
    <Button variant="outline" size="sm">下書き保存</Button>
    <Button size="sm">公開</Button>
  </div>
}>
  <PageHeaderLink href="/admin/articles" icon="FileText">記事</PageHeaderLink>
  <PageHeaderTitle>新しい記事を作成</PageHeaderTitle>
</PageHeader>

イベント切り替え付きヘッダー

<PageHeader>
  <PageHeaderLink href="/calendars">カレンダー</PageHeaderLink>
  <PageHeaderLink href="/calendars/my">マイカレンダー</PageHeaderLink>
  <PageHeaderItem>
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button className="flex items-center gap-1 text-sm font-medium transition-opacity hover:opacity-60">
          {currentEvent.title}
          <Icon name="ChevronDown" size="xs" />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        {events.map((event) => (
          <DropdownMenuItem key={event.id} asChild>
            <Link href={`/calendars/${calendarSlug}/events/${event.slug}`}>
              {event.title}
            </Link>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  </PageHeaderItem>
</PageHeader>

Props

PageHeader

Prop	Type	Default	Description
`actions`	`ReactNode`	`-`	右側に表示するアクション要素(ボタン等)
`children*`	`ReactNode`	`-`	パンくず要素(PageHeaderLink, PageHeaderTitle, PageHeaderItem)。要素間に自動でセパレータ「/」が挿入されます
`className`	`string`	`-`	追加のクラス名

PageHeaderLink

Prop	Type	Default	Description
`href`	`string`	`-`	リンク先URL
`icon`	`IconName`	`-`	アイコン名
`asChild`	`boolean`	`false`	子要素をリンクとしてレンダリング(Next.js Link等)
`className`	`string`	`-`	追加のクラス名

PageHeaderTitle

Prop	Type	Default	Description
`icon`	`IconName`	`-`	アイコン名
`children*`	`ReactNode`	`-`	表示テキスト
`className`	`string`	`-`	追加のクラス名

PageHeaderItem

Prop	Type	Default	Description
`children*`	`ReactNode`	`-`	自由なコンテンツ(DropdownMenu等)
`className`	`string`	`-`	追加のクラス名

PageHeaderTabs

Prop	Type	Default	Description
`children*`	`ReactNode`	`-`	PageHeaderTabItem要素
`className`	`string`	`-`	追加のクラス名

PageHeaderTabItem

Prop	Type	Default	Description
`href`	`string`	`-`	リンク先URL
`active`	`boolean`	`false`	アクティブ状態(下線が表示されます)
`asChild`	`boolean`	`false`	子要素をリンクとしてレンダリング(Next.js Link等)
`className`	`string`	`-`	追加のクラス名

PageHeader

On this page