Dcode Design System

Navigation: Breadcrumbs

No notes defined.

<nav class="flex" aria-label="Breadcrumb">
    <ol role="list" class="flex items-center space-x-mdSpace">
        <li>
            <div>
                <a href="#" class="text-gray-400 hover:text-gray-500">
                    <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd" />
                    </svg> <span class="sr-only">Home</span>
                </a>
            </div>
        </li>

        <li>
            <div class="flex items-center">
                <svg class="h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
                </svg>
                <a href="#" class="ml-mdSpace text-sm font-medium text-gray-500 hover:text-gray-700">Projects</a>
            </div>
        </li>

        <li>
            <div class="flex items-center">
                <svg class="h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
                </svg>
                <a href="#" class="ml-mdSpace text-sm font-medium text-gray-500 hover:text-gray-700" aria-current="page">Project
                    Nero</a>
            </div>
        </li>
    </ol>
</nav>
  • Content: 
    https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJUMg9qwWNHgaiuoDoEgHkn%2Ffractal.dcodegroup.com%3Fnode-id%3D3278%253A11037%26t%3D7PFoNpgoOhnxO9FX-1
  • URL: /components/raw/navigation/figma.txt
  • Filesystem Path: components/03-elements/navigation/figma.txt
  • Size: 185 Bytes
  • Content: 
    .sideNav {
    @apply space-y-2xsSpace rounded-lg bg-white;

    &__link {
        @apply flex items-center space-x-xsSpace rounded-md p-xsSpace text-sm font-medium text-tertiary-600 hover:bg-tertiary-50 hover:text-tertiary-900;
    }

    &__span {
        @apply h-6 w-6 flex-shrink-0 text-tertiary-400 group-hover:text-tertiary-500;
    }

    &__subNav {
        @apply ml-mdSpace;
    }
}
  • URL: /components/raw/navigation/navigation.scss
  • Filesystem Path: components/03-elements/navigation/navigation.scss
  • Size: 394 Bytes