Marketing blocks
Header navigation
Full-width and floating site headers with desktop dropdown menus (simple, 2-col with sidebar, 4-col slim with footer, cards) and a mobile menu with expandable subnav. Figma: Header navigation.
import
{ HeaderNavigation, type NavLink, type NavMenu } from "@pepulux/ui"Full-width — simple dropdown
Click Product to open the menu.
Full-width — 2-col with sidebar
Full-width — 4-col slim with footer
Floating — cards menu
floating draws the bar as a rounded card.
Signed in
Pass user to replace Log in / Sign up with an avatar.
Pepulux
OR
Mobile menu
Below the md breakpoint the bar collapses to a hamburger; defaultMobileOpen forces it open.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| links | NavLink[] | — | Links; add menu for a dropdown. NavMenu.layout: simple | two-col-sidebar | four-col-slim | cards |
| floating | boolean | false | Figma Floating vs Full-width bar |
| defaultOpenIndex | number | null | null | Dropdown that starts open (Figma Open=True) |
| defaultMobileOpen | boolean | false | Start with the mobile menu open (Figma Mobile) |
| user | { name; email?; avatarSrc? } | — | Signed-in state |
| actions | ReactNode | — | Replace the login / sign-up buttons |
| loginLabel / signupLabel | string | "Log in" / "Sign up" | Button labels |
| onLogin / onSignup | () => void | — | Button handlers |
| logoText | string | "Pepulux" | Brand text next to the logo |