Бруталистская навигационная цепочка
Навигационный компонент в стиле брутализма для систем бронирования/бронирования, отличающийся высокой контрастностью, черно-белым цветом с ярким акцентом и полной отзывчивостью с поддержкой темного режима. Каждый шаг четко обозначен жирной типографикой и уникальным разделителем.
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>Связанные компоненты
Неоморфная спортивная хлебная крошка
Сложный навигационный компонент с нейроморфной навигационной цепочкой, разработанный для спортивных и фитнес-приложений, отличается насыщенными драгоценными тонами и полной отзывчивостью с поддержкой темного режима.
Компонент навигации по цепочке навигации
Компонент навигации в цепочке навигации со скевоморфизмом, монохроматической цветовой схемой и простой сложностью для приборной панели, с темной темой
Компонент навигации по цепочке навигации
Адаптивный навигационный компонент навигационной цепочки, разработанный в стиле Glassmorphism и цветов Earth ton, идеально подходит для профессиональных веб-сайтов компаний. Он поддерживает темную тему и включает в себя интерактивные функции для навигации.