CCHub Logo CCHub Tailwind Collection
コンポーネント ブレッドクラムナビゲーション ブルータリストのパンくずリストナビゲーション

ブルータリストのパンくずリストナビゲーション

ブルータリズムにインスパイアされたブレッドクラムナビゲーションコンポーネントで、ブッキング/予約システム用で、ハイコントラスト、明るいアクセントカラーの黒と白、ダークモードのサポートによる完全な応答性が特徴です。各ステップは、大胆なタイポグラフィとユニークなセパレーターで明確に描かれています。

プレビュー

HTMLコード 

<nav class="bg-white px-4 py-3 border-b-4 border-black font-mono dark:bg-black dark:border-white sm:px-6 lg:px-8" aria-label="Breadcrumb">
  <ol role="list" class="flex flex-wrap items-center space-x-0.5 sm:space-x-1.5">
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 pr-1 dark:text-white dark:hover:text-red-500">
        Booking
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Select Service
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Choose Date & Time
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Confirm Details
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center">
      <span class="text-red-500 uppercase text-sm font-extrabold tracking-widest px-1 dark:text-red-500" aria-current="page">
        Payment
      </span>
    </li>
  </ol>
</nav>

関連コンポーネント

Neon_Glow_Gaming_Breadcrumb

ゲーム Web サイト向けに設計された複雑でレスポンシブなブレッドクラム ナビゲーション コンポーネントで、黒と白のベースと鮮やかなアクセント カラーのネオン/グロー効果が特徴です。ダークモードのサポートとセマンティックHTMLが含まれています。

開ける

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

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

開ける

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

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

開ける