Introducing AlienX extension – The next evolution of UI development.Check it out on VS Code

Enjoy AlienUI React? Give it a star on Github ⭐

Breadcrumb

A customizable breadcrumb component with different variants for navigation.

Galaxy Breadcrumb

A breadcrumb for navigation, in the galaxy.

Preview

import React from "react";
import { HiChevronRight } from "react-icons/hi";

const Breadcrumb = () => {
  return (
    <nav aria-label="Breadcrumb">
      <ol className="flex items-center gap-1 text-sm text-gray-600">
        <li>
          <a href="#" className="block transition hover:text-gray-700">
            Home
          </a>
        </li>
        <li className="rtl:rotate-180">
          <HiChevronRight className="w-4 h-4" />
        </li>
        <li>
          <a href="#" className="block transition hover:text-gray-700">
            Nebula
          </a>
        </li>
        <li className="rtl:rotate-180">
          <HiChevronRight className="w-4 h-4" />
        </li>
        <li>
          <a href="#" className="block transition hover:text-gray-700">
            Galaxy
          </a>
        </li>
      </ol>
    </nav>
  );
}

export default Breadcrumb;

Usage Example

import React from "react";
import Breadcrumb from "./components/comp/Breadcrumb/GalaxyBreadcrumb";

const App = () => {
  return (
    <div>
      <Breadcrumb />
    </div>
  );
};

export default App;

Earth Breadcrumb

A breadcrumb for navigating on the earth surface.

Preview

import React from "react";
import { LuSlash } from "react-icons/lu";

const Breadcrumb = () => {
  return (
    <nav aria-label="Breadcrumb">
      <ol className="flex items-center gap-1 text-sm text-gray-600">
        <li>
          <a href="#" className="block transition hover:text-gray-700">
            Home
          </a>
        </li>
        <li className="rtl:rotate-180">
          <LuSlash className="w-4 h-4 text-black" />
        </li>
        <li>
          <a href="#" className="block transition hover:text-gray-700">
            Nebula
          </a>
        </li>
        <li className="rtl:rotate-180">
          <LuSlash className="w-4 h-4 text-black" />
        </li>
        <li>
          <a href="#" className="block transition hover:text-gray-700">
            Galaxy
          </a>
        </li>
      </ol>
    </nav>
  );
};

export default Breadcrumb;

Usage Example

import React from "react";
import Breadcrumb from "./components/comp/Breadcrumb/EarthBreadcrumb";

const App = () => {
  return (
    <div>
      <Breadcrumb />
    </div>
  );
};

export default App;