UI Component Code Gallery for React - by Mirado Andria

Header Bar A

Header menu, menu bar, bottom header bar.

Preview

This component it optimized for large screen devices, please use larger device (laptop, desktop) to view it.

Code

import {
  BellIcon,
  Cog6ToothIcon,
  MagnifyingGlassIcon
} from "@heroicons/react/24/outline";
import clsx from "clsx";
import styles from "./header-bar-a.module.css";

type Props = {
  className?: string;
};

export default function HeaderBarA({ className }: Props) {
  return (
    <div className={clsx(styles["wrapper"], className)}>
      {/* First Navigation Bar */}
      <nav className={clsx(styles["navbar"], styles["navbar-1"])}>
        <div className={styles["navbar-content"]}>
          <div className={clsx(styles["nav-start"])}>
            <div className={styles["logo"]}>
              <img
                className={styles["logo-img"]}
                alt="Logo"
                src="/placeholder/logo-1.svg"
                width={100}
                height={40}
              />
            </div>
          </div>

          {/* Navigation at center */}
          <div className={clsx(styles["nav-middle"], styles["center"])}>
            <ul className={clsx(styles["nav-list"], styles["nav-list-1"])}>
              <li className={clsx(styles["item"])}>
                <button type="button" className={clsx(styles["item-btn"])}>
                  Dashboard
                </button>
              </li>
              <li className={clsx(styles["item"])}>
                <button type="button" className={clsx(styles["item-btn"])}>
                  Customers
                </button>
              </li>
              <li className={clsx(styles["item"])}>
                <a className={styles["item-btn"]} href="#accessories">
                  Messages
                </a>
              </li>
            </ul>
          </div>

          {/* Action buttons and search form at end */}
          <div className={clsx(styles["nav-end"])}>
            <div
              className={clsx(styles["nav-list"], styles["nav-list-actions"])}
            >
              <div className={clsx(styles["item"])}>
                <SearchField />
              </div>

              <div className={clsx(styles["item"])}>
                <a title="Settings" href="#" className={styles["item-btn"]}>
                  <Cog6ToothIcon className={styles["item-icon"]} />
                </a>
              </div>
              <div className={clsx(styles["item"])}>
                <button
                  title="Notifications"
                  type="button"
                  className={styles["item-btn"]}
                >
                  <BellIcon className={styles["item-icon"]} />
                  <div className={styles["item-badge"]}>2</div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  );
}

/**
 * This is a sample SearchField, which is based on code of SearchFieldLightA
 */
function SearchField() {
  return (
    <form
      className={clsx(styles["search-field-wrapper"])}
      onSubmit={(e) => {
        // ...sample behavior when form is submitted
        e.preventDefault();
      }}
    >
      <input
        type={"text"}
        className={styles["search-input"]}
        placeholder="Search..."
      />
      <button type="submit" title="Search" className={styles["search-btn"]}>
        <MagnifyingGlassIcon className={styles["search-btn-icon"]} />
      </button>
    </form>
  );
}

Design

Figma design file:

Documentation

Package dependencies

It uses Heroicons for icons and clsx to manage class list, so you may need to install them first

npm install clsx
npm install @heroicons/react
Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
Sub Menu

A submenu trigger button have the following content. It should have the data-subnav-trigger attribute, and an onClick event which will select the submenu.

<button
    type="button"
    data-subnav-trigger
    className={clsx(
    styles["item-btn"],
    activeSubmenu === "collections" && styles["item-active"]
    )}
    onClick={() => setActiveSubmenu("collections")}
>
    Collections
</button>

All submenu are placed inside div with classname styles["subnav-content"], and a submenu may have the following content.

 <div className={styles["subnav-content"]}>
{activeSubmenu === "collections" && (
    <div className={styles["submenu-wrapper"]}>
    <div className={styles["s-cols-menu"]}>
        <div>
        <h5 className={styles["s-nav-title"]}>Featured</h5>
        <ul className={styles["s-nav-list"]}>
            <li>
            <a href="#link">Trending</a>
            </li>
            <li>
            <a href="#link">New items</a>
            </li>
            <li>
            <a href="#link">Summer</a>
            </li>
            <li>
            <a href="#link">Winter</a>
            </li>
            <li>
            <a href="#link">Spring 2020</a>
            </li>
            <li>
            <a href="#link">Fall 2030</a>
            </li>
        </ul>
        </div>
        <div>
        <h5 className={styles["s-nav-title"]}>Summer</h5>
        <ul className={styles["s-nav-list"]}>
            <li>
            <a href="#link">Shoes</a>
            </li>
            <li>
            <a href="#link">Winter Dress</a>
            </li>
            <li>
            <a href="#link">Spring Clothing</a>
            </li>
        </ul>
        </div>
        <div>
        <h5 className={styles["s-nav-title"]}>More</h5>
        <ul className={styles["s-nav-list"]}>
            <li>
            <a href="#link">Summer sale</a>
            </li>
            <li>
            <a href="#link">New arrival sale</a>
            </li>
        </ul>
        </div>
        <div>
        <div className={styles["s-desc"]}>
            <img
            src="/placeholder/img-fashion-landscape-1.jpg"
            alt="image"
            />
            <p >
            This is a sample submenu content which uses CSS.
            </p>
        </div>
        </div>
    </div>
    </div>
)}
...
</div>