Navigation
Different approaches to top navigation architecture. Experimental prototypes ready for production.
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| links | string[] | ["Home", "Products", "Lab", "Pricing"] | Array of navigation links |
| compactLinks | string[] | ["Home", "Pricing"] | Links to keep visible when scrolling |
| logoText | string | "Gridform" | Logo text |
| ctaText | string | "Get Started" | Call to action button text |
| onCtaClick | () => void | — | Callback for CTA button |
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| instanceId | string | "default" | Unique ID for Framer Motion layoutId |
| links | string[] | ["Home", "Products", "Lab", "Pricing"] | Array of navigation links |
| essentialLinks | string[] | ["Home", "Pricing"] | Links to keep visible when scrolling |
| logoInitials | string | "F" | Logo initial |
| logoText | string | "Factory" | Logo text |
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| links | string[] | ["Overview", "Analytics", "Projects", "Settings", "Billing"] | Array of navigation links |
| logoText | string | "Gridform" | Logo text |
| ctaText | string | "Login" | Call to action button text |
| onCtaClick | () => void | — | Callback for CTA button |
| className | string | — | Optional custom class name for the wrapper |
4. Mac Dock (Ultra-Premium iOS)
Variant based on a pure premium interface. Icon rendering with pure Tailwind CSS without requiring images.
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | DockItemData[] | — | Array of dock items { id, label, icon } |
| className | string | — | Optional custom class name |
| ...props | HTMLAttributes | — | All standard HTML div attributes |
5. Mac Dock (Ink & Acid)
Bold neon navigation. On hover, containers rise and flash acid green.
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | DockItemData[] | — | Array of dock items { id, label, icon } |
| className | string | — | Optional custom class name |
6. Mac Dock (Monochrome Style)
Monochrome and minimalist. Clean dark interfaces without color distractions.
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | DockItemData[] | — | Array of dock items { id, label, icon } |
| className | string | — | Optional custom class name |
| ...props | HTMLAttributes | — | All standard HTML div attributes |