ブレッドクラムナビゲーションコンポーネント
パステルカラーの配色とダークテーマのサポートを備えたNeumorphismデザインスタイルを利用したレスポンシブなBreadcrumb Navigationコンポーネントは、Tailwind CSSを使用して構築されています。
HTMLコード
<nav class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg dark:shadow-sm transition duration-300">
<ol class="list-reset flex">
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
</svg>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Category</a>
<svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
</svg>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Subcategory</a>
<svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
</svg>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 font-bold hover:underline">Current Page</a>
</li>
</ol>
</nav>
<!-- Example of how you can use it within a blog content -->
<div class="mt-4 dark:bg-gray-800 rounded-lg p-4 overflow-hidden shadow-lg">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h1>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a paragraph of content where the blog post starts. It should be engaging and informative to keep readers on the page.</p>
<div class="mt-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/25.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>関連コンポーネント
ブレッドクラムナビゲーションコンポーネント
マテリアル デザインにインスパイアされたダッシュボード用のパンくずリスト ナビゲーション コンポーネントで、グレースケールの配色と複雑なインタラクションを使用し、Tailwind CSS で実装して応答性とダーク テーマのサポートを実現します。
Brutalist Breadcrumb ナビゲーション コンポーネント
鮮やかな配色と複雑なレイアウトを備えたポートフォリオ用のBrutalist Breadcrumbナビゲーションコンポーネントで、レスポンシブデザインとダークモードのサポートが特徴です。