April 10, 2026/Simple/Navigation

Nav Minimal

A clean top navigation bar with logo (image or text), centered nav links with hover-reveal submenu row, locale switcher, and account/cart icons. Collapses to logo + cart + hamburger on mobile.

import NavMinimal from "./index.jsx";
import { navMinimal } from "../demo-data.js";
import styles from "./demo.module.css";

export default function NavMinimalDemo() {
  return (
    <div className={styles.wrapper}>
      <NavMinimal {...navMinimal} />
      <section className={styles.hero}>
        <p className={styles.heroEyebrow}>New Collection</p>
        <h1 className={styles.heroHeading}>Built for the ride.</h1>
        <p className={styles.heroSub}>Precision-engineered frames and components for every terrain.</p>
        <a href="#" className={styles.heroCta}>Shop Now</a>
      </section>
      <section className={styles.section}>
        <h2 className={styles.sectionHeading}>Why Novatrex</h2>
        <div className={styles.grid}>
          {["Lightweight", "Durable", "Performance", "Crafted"].map((item) => (
            <div key={item} className={styles.card}>
              <span className={styles.cardLabel}>{item}</span>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

Related Components

1MO AGO
Pill Header Overlaynavigation
3MO AGO
Nav Slide Panelnavigation
3MO AGO
Nav Agency Gridnavigation