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

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

Tailwind CSSを使用してNeumorphismスタイルで設計されたレスポンシブなBreadcrumbナビゲーションコンポーネントで、ダークテーマをサポートしています。

プレビュー

HTMLコード 

<nav class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6 max-w-4xl mx-auto">
    <ol class="list-reset flex text-gray-700 dark:text-gray-300">
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Home</a>
        </li>
        <li>
            <span class="mx-2">/</span>
        </li>
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Library</a>
        </li>
        <li>
            <span class="mx-2">/</span>
        </li>
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Data</a>
        </li>
    </ol>
</nav>

<style>
    /* Neumorphism styles */
    nav {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1),
                    -8px -8px 15px rgba(255, 255, 255, 0.7);
    }
    nav.dark {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5),
                    -8px -8px 15px rgba(0, 0, 0, 0.2);
    }
</style>

関連コンポーネント

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

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

開ける

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

ミニマリストのフラットスタイルで設計されたレスポンシブなパンくずリストナビゲーションコンポーネントで、ブログやコンテンツの消費に適しています。ナビゲーションを容易にするためのインタラクティブな要素が含まれており、ダークモードをサポートしています。

開ける

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

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

開ける