April 10, 2026SimpleNavigation
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.
Preview
Source
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>
);
}