Layout Components

Navbar

Main navigation bar with dropdown menus and mobile support

Live Preview

The Navbar is also active at the top of this page. The preview below shows it rendered in isolation.

NexusLearn Next.js with production discipline.

Installation

// Copy the Navbar component from
src/components/layout/Navbar.tsx

// Install dependencies
npm install lucide-react

Usage

import { Navbar } from '@/components/layout/Navbar'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Navbar />
        <main>{children}</main>
      </body>
    </html>
  )
}

State Management

The Navbar component manages three pieces of state for complex interactions:

const [mobileOpen, setMobileOpen] = useState(false) // Mobile menu toggle
const [openDropdown, setOpenDropdown] = useState<string | null>(null) // Desktop dropdown
const [mobileExpanded, setMobileExpanded] = useState<string | null>(null) // Mobile submenu

•mobileOpen: Controls the visibility of the mobile menu
•openDropdown: Tracks which desktop dropdown menu is currently open
•mobileExpanded: Tracks which mobile submenu is expanded

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a layout component named Navbar in React/Next.js.
Goal: recreate the same overall UI and behavior as the Navbar reference from a component gallery.
What it needs to communicate: Main navigation bar with dropdown menus and mobile support.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Make responsive behavior explicit across desktop, tablet, and mobile.
- Account for navigation states, active states, and overflow behavior.
- Existing documented dependencies: lucide-react
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- No documented props were provided, so infer a minimal but production-ready API from the reference.

Reference usage patterns:
- Navbar

```tsx
<Navbar />
```

Feature expectations:
- Sticky positioning
- Desktop horizontal navigation
- Dropdown menus for nested items
- Click-outside handler
- Mobile hamburger menu
- Mobile slide-down menu
- Phone icon button (mobile)
- Complex state management
- Uses NAV_ITEMS constant

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

This component has no props.

This component uses NAV_ITEMS and BRAND_NAME constants from lib/constants.ts

Features

✓Sticky positioning
✓Desktop horizontal navigation
✓Dropdown menus for nested items
✓Click-outside handler
✓Mobile hamburger menu
✓Mobile slide-down menu
✓Phone icon button (mobile)
✓Complex state management
✓Uses NAV_ITEMS constant

Dependencies

lucide-react

← Back to Layout Components