Header Bar B

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, InboxIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline"; import clsx from "clsx"; import AccountProfileLiteA from "../../account-profile/account-profile-lite-a/account-profile-lite-a"; import styles from "./header-bar-b.module.css"; type Props = { className?: string; }; export default function HeaderBarB({ 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"])}> <SearchField /> </li> <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> </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"])}> <a title="Settings" href="#" className={styles["item-btn"]}> <InboxIcon 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 className={clsx(styles["item"])}> <AccountProfileLiteA imageSrc="/placeholder/img-person-square-2.jpg" title={"John Wilson"} description={"Chief Editor"} /> </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>