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

Brutalist Breadcrumb ナビゲーション コンポーネント

鮮やかな配色と複雑なレイアウトを備えたポートフォリオ用のBrutalist Breadcrumbナビゲーションコンポーネントで、レスポンシブデザインとダークモードのサポートが特徴です。

プレビュー

HTMLコード 

<nav class="text-sm font-mono">
  <ol class="list-none p-0 inline-flex">
    <li class="flex items-center">
      <a href="#" class="text-blue-500 dark:text-teal- गलती this looks like a typo, will fix to something like: dark:text-teal-300 hover:underline">Home</a>
      <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 67.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
    </li>
    <li class="flex items-center">
      <a href="#" class="text-blue-500 dark:text-teal-300 hover:underline">Projects</a>
      <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 67.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
    </li>
    <li>
      <span class="text-purple-700 dark:text-pink-400 font-bold">Current Project</span>
    </li>
  </ol>
</nav>

関連コンポーネント

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

マテリアル デザインにインスパイアされたダッシュボード用のパンくずリスト ナビゲーション コンポーネントで、グレースケールの配色と複雑なインタラクションを使用し、Tailwind CSS で実装して応答性とダーク テーマのサポートを実現します。

開ける

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

ブルータリズムスタイルでデザインされたレスポンシブなパンくずナビゲーションコンポーネントで、ダッシュボードの鮮やかな配色で、ダークモードをサポートしています。

開ける

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

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

開ける