FloatingNav

画面下部（または上部）に固定表示されるフローティングナビゲーション。

インポート

import {
  FloatingNav,
  FloatingNavGroup,
  FloatingNavItem,
  FloatingNavLogo,
  FloatingNavAction,
  FloatingNavSeparator,
} from '@caroainc/ui-components/client'

個別サブパス:

import {
  FloatingNav,
  FloatingNavGroup,
  FloatingNavItem,
  FloatingNavLogo,
  FloatingNavAction,
  FloatingNavSeparator,
} from '@caroainc/ui-components/floating-nav'

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

基本的な使い方

<FloatingNav>
  <FloatingNavGroup>
    <FloatingNavItem icon="Home" label="ホーム" href="/" />
    <FloatingNavItem icon="Search" label="検索" href="/search" />
    <FloatingNavItem icon="Bell" label="通知" href="/notifications" />
  </FloatingNavGroup>
</FloatingNav>

ロゴ付き

<FloatingNav>
  <FloatingNavLogo href="/">
    <Image src="/logo.svg" alt="Logo" fill />
  </FloatingNavLogo>
  <FloatingNavGroup>
    <FloatingNavItem icon="Home" label="ホーム" href="/" />
    <FloatingNavItem icon="MessageSquare" label="メッセージ" href="/messages" />
    <FloatingNavItem icon="Settings" label="設定" href="/settings" />
  </FloatingNavGroup>
</FloatingNav>

アバター・ドロップダウン付き

<FloatingNav>
  <FloatingNavLogo href="/">
    <Image src="/logo.svg" alt="Logo" fill />
  </FloatingNavLogo>
  <FloatingNavSeparator />
  <FloatingNavGroup>
    <FloatingNavItem icon="Home" label="ホーム" href="/" />
    <FloatingNavItem icon="MessageCircle" label="メッセージ" href="#" external />
    <FloatingNavItem icon="Share2" label="シェア" href="#" external />
  </FloatingNavGroup>
  <FloatingNavSeparator />
  <FloatingNavAction>
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button type="button">
          <Avatar className="h-8 w-8">
            <AvatarImage src={user.image} alt={user.name} />
            <AvatarFallback>{user.name[0]}</AvatarFallback>
          </Avatar>
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent sideOffset={12}>
        <DropdownMenuItem>プロフィール</DropdownMenuItem>
        <DropdownMenuItem>設定</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>ログアウト</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </FloatingNavAction>
</FloatingNav>

設定アイコン・ドロップダウン付き

FloatingNavAction にはアバター以外も配置できます。設定アイコン + DropdownMenuの例：

<FloatingNav>
  <FloatingNavGroup>
    <FloatingNavItem icon="Home" label="ホーム" href="/" />
    <FloatingNavItem icon="Search" label="検索" href="/search" />
    <FloatingNavItem icon="Bell" label="通知" href="/notifications" />
  </FloatingNavGroup>
  <FloatingNavSeparator />
  <FloatingNavAction>
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" shape="circle">
          <Icon name="Settings" size="md" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent sideOffset={12}>
        <DropdownMenuItem>プロフィール</DropdownMenuItem>
        <DropdownMenuItem>テーマ</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>ログアウト</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </FloatingNavAction>
</FloatingNav>

上部に配置

position="top" で画面上部に配置できます。

<FloatingNav position="top">
  <FloatingNavGroup>
    <FloatingNavItem icon="Home" label="ホーム" href="/" />
    <FloatingNavItem icon="Search" label="検索" href="/search" />
  </FloatingNavGroup>
</FloatingNav>

形状（Shape）

shape で角丸の形状を変更できます。アイテムのボタン形状も連動して変わります。

pill（デフォルト）: 完全な丸（アイテムも丸ボタン）
rounded: さりげない丸（アイテムは四角ボタン）

{/* 完全な丸（デフォルト） */}
<FloatingNav shape="pill">...</FloatingNav>
 
{/* さりげない丸 */}
<FloatingNav shape="rounded">...</FloatingNav>

コンポーネント構成

コンポーネント	説明
`FloatingNav`	ルートコンテナ。位置とスタイリングを担当
`FloatingNavLogo`	ロゴ表示エリア。`href`でリンク化可能
`FloatingNavGroup`	アイテムのグループ化
`FloatingNavItem`	アイコンボタン + ツールチップ
`FloatingNavAction`	右端のアクションエリア（Avatar等）
`FloatingNavSeparator`	グループ間の区切り線

Props

FloatingNav

Prop	Type	Default	Description
`position`	`'bottom' \| 'top'`	`'bottom'`	表示位置
`shape`	`'pill' \| 'rounded'`	`'pill'`	形状（pill: 完全な丸, rounded: さりげない丸）
`className`	`string`	`-`	追加のクラス名
`children`	`ReactNode`	`-`	子要素
`aria-label`	`string`	`'フローティングナビゲーション'`	ナビゲーション領域（role="navigation"）のアクセシブルラベル

FloatingNavItem

Prop	Type	Default	Description
`icon`	`string`	`-`	アイコン名（lucide-react）
`label`	`string`	`-`	ツールチップに表示するラベル
`href`	`string`	`-`	リンク先URL
`onClick`	`() => void`	`-`	クリックハンドラ
`external`	`boolean`	`false`	外部リンクとして開く（target="_blank"）
`disabled`	`boolean`	`false`	無効状態（hrefと併用した場合もクリック・キーボード操作の両方を無効化）

FloatingNavLogo

Prop	Type	Default	Description
`href`	`string`	`-`	リンク先URL（省略可）
`children`	`ReactNode`	`-`	ロゴ要素（Imageなど）

FloatingNavAction

Prop	Type	Default	Description
`children`	`ReactNode`	`-`	アクション要素（Avatar, Button等）

デザインについて

このコンポーネントは以下の特徴を持っています：

backdrop-blur - 背景をぼかすことでフローティング感を演出
shape - pill（完全な丸）または default（さりげない丸）を選択可能
shadow-lg - 浮いている印象を与える影
z-nav - ナビゲーション用のz-indexトークン（値: 30）。通常のページコンテンツより前面に表示しつつ、 Sheet（z-drawer: 70）・Dialog（z-modal: 80）・DropdownMenu/Popover（z-dropdown / z-popover: 85）・ Toast（z-toast: 90）など他のオーバーレイより背面になるよう設計されています。FloatingNavAction内に DropdownMenuを配置した場合も、そのメニューはz-dropdownのためFloatingNav本体より確実に前面に出ます
role="navigation" - ルート要素にランドマークロールを付与（aria-labelでラベルをカスタマイズ可能）

参考: Aceternity UI - Floating Dock, BuouUI - Floating Dock

FloatingNav

On this page