steep components
All components

NavMenu

Main desktop nav — brand, links, cart icon, account icon, mobile hamburger trigger.

components/nav-menu.tsxPeer deps: lucide-react

Live preview

steep
Wishlist3Cart (3)My account

Usage

import { NavMenu, useNavMobileMenu } from "@/components/nav-menu";
import { MobileMenu } from "@/components/mobile-menu";

const { nav, mobile } = useNavMobileMenu();
const links = [{ label: "Products", href: "/products" }, ...];

<NavMenu brand="steep" links={links} cartCount={cart.count} {...nav.props} />
<MobileMenu links={links} {...mobile.props} />