CCHub Logo CCHub Tailwind Collection
コンポーネント ブレッドクラムナビゲーション ブレッドクラムナビゲーションコンポーネント

ブレッドクラムナビゲーションコンポーネント

Glassmorphismスタイルとアースカラーの色で設計されたレスポンシブなブレッドクラムナビゲーションコンポーネントは、プロの企業のWebサイトに最適です。ダークテーマをサポートし、ナビゲーション用のインタラクティブ機能が含まれています。

プレビュー

HTMLコード 

<nav class="bg-opacity-50 backdrop-blur-lg bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg">
    <ol class="list-reset flex items-center space-x-4 text-gray-600 dark:text-gray-300">
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Home</a>
        </li>
        <li>
            <span class="text-gray-400 dark:text-gray-500">/</span>
        </li>
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Services</a>
        </li>
        <li>
            <span class="text-gray-400 dark:text-gray-500">/</span>
        </li>
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Consulting</a>
        </li>
    </ol>
</nav>

<!-- Example of how to display user avatars or images in a Breadcrumb if needed -->
<div class="flex items-center space-x-3 mt-4">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
    <span class="text-gray-600 dark:text-gray-300">John Doe</span>
</div>

関連コンポーネント

ニューモルフィックスポーツブレッドクラム

スポーツ/フィットネスアプリケーション向けに設計された複雑でニューモーフィックなパンくずリストナビゲーションコンポーネントで、豊かなジュエルトーンとダークモードサポートによる完全な応答性が特徴です。

開ける

ブレッドクラムナビゲーションコンポーネント

Skeuomorphism デザイン、単色の配色、ダッシュボード用のシンプルな複雑さを備えたブレッドクラム ナビゲーション コンポーネント、ダーク テーマ

開ける

ブレッドクラムナビゲーションコンポーネント

パステルカラーの配色とダークテーマのサポートを備えたNeumorphismデザインスタイルを利用したレスポンシブなBreadcrumb Navigationコンポーネントは、Tailwind CSSを使用して構築されています。

開ける