CCHub Logo CCHub Tailwind Collection
구성 요소 이동 경로 탐색 Brutalist Breadcrumb Navigation 구성 요소

Brutalist Breadcrumb Navigation 구성 요소

생생한 색 구성표와 복잡한 레이아웃이 있는 포트폴리오를 위한 Brutalist Breadcrumb Navigation Component는 반응형 디자인과 다크 모드 지원을 특징으로 합니다.

미리 보기

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>

관련 구성 요소

Bauhaus_Music_Breadcrumb

음악/오디오 플랫폼을 위한 Bauhaus에서 영감을 받은 간단한 이동 경로 탐색 구성 요소로, 코퍼레이트 블루 톤과 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다

전자 상거래 이동 경로 탐색 - 종이/인쇄에서 영감을 받은 보라색

전자 상거래를 위해 설계된 간단하고 반응이 빠른 이동 경로 탐색 구성 요소로, 보라색/보라색 색 구성표와 함께 종이/인쇄물에서 영감을 받은 미학을 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다

Breadcrumb Navigation 구성 요소

Tailwind CSS를 사용하여 만든 다크 모드를 지원하는 Neumorphism 스타일로 설계된 반응형 이동 경로 탐색 구성 요소입니다.

열다