NavbarSection1

A modern navigation bar with mobile-first animated hamburger menu. Features a fixed position with backdrop blur, full-screen mobile overlay with smooth transitions, and staggered menu item animations. Perfect for modern websites, portfolios, or any application needing clean mobile navigation.

✨ Features

Fixed Position: Sticky navigation with backdrop blur effect
Animated Hamburger: Smooth hamburger-to-X transformation
Full-Screen Mobile Menu: Overlay with beautiful slide-down animation
Staggered Menu Items: Sequential item animations with numbering
Social Media Integration: External social links with proper handling
Context-Based State: Clean state management for menu toggle
Accessible Navigation: Proper ARIA labels and keyboard support
Dark Mode Support: Automatic adaptation to light/dark themes
Responsive Design: Adapts beautifully to all screen sizes

📋 Prerequisites

This component requires:

Next.js (with App Router)
Tailwind CSS 4

🚀 Installation

npm install motion

📁 Files Included

The component bundle includes:

index.tsx - Main navbar component
navbar-context.tsx - Context provider for menu state
navbar-menu.tsx - Full-screen menu overlay
navbar-menu-toggle.tsx - Animated hamburger button
container.tsx - Layout container component
README.md - This documentation

🎯 Basic Usage

tsx.tsxTypeScript

1import { NavbarSection1 } from './components/navbar-section-1';
2
3export default function Layout() {
4    return (
5        <div>
6            <NavbarSection1 />
7
8            <main>
9                {/* Your page content */}
10                <section>Content goes here</section>
11            </main>
12        </div>
13    );
14}

The navbar renders with a logo, hamburger menu, and automatically includes a spacer div to prevent content overlap.

🔧 Props

The NavbarSection1 component has no props - it's designed with predefined menu items and social media links that you customize by editing the constants in the file.

📖 Examples

Basic Implementation

tsx.tsxTypeScript

1import { NavbarSection1 } from './components/navbar-section-1';
2
3export default function HomePage() {
4    return (
5        <div>
6            <NavbarSection1 />
7
8            <main className="pt-4">
9                <section className="min-h-screen">
10                    <h1>Welcome to our site</h1>
11                    <p>Your content here...</p>
12                </section>
13            </main>
14        </div>
15    );
16}

Portfolio Layout

tsx.tsxTypeScript

1export default function PortfolioSite() {
2    return (
3        <div className="min-h-screen">
4            <NavbarSection1 />
5
6            <main>
7                <section id="hero" className="min-h-screen">
8                    Hero Section
9                </section>
10                <section id="about" className="min-h-screen">
11                    About
12                </section>
13                <section id="portfolio" className="min-h-screen">
14                    Portfolio
15                </section>
16                <section id="contact" className="min-h-screen">
17                    Contact
18                </section>
19            </main>
20        </div>
21    );
22}

App Layout

tsx.tsxTypeScript

1// app/layout.tsx
2export default function RootLayout({
3    children,
4}: {
5    children: React.ReactNode;
6}) {
7    return (
8        <html>
9            <body>
10                <NavbarSection1 />
11                <main>{children}</main>
12            </body>
13        </html>
14    );
15}

📝 Customizing Content

Logo Text

Edit the logo text in the main component:

tsx.tsxTypeScript

1<div className="text-xl md:text-2xl font-medium tracking-wide hover:opacity-70 transition-opacity">
2    YOUR BRAND NAME
3</div>

Menu Items

Modify the menuItems array:

tsx.tsxTypeScript

1const menuItems: MenuItem[] = [
2    { title: 'Home', href: '/' },
3    { title: 'About', href: '/about' },
4    { title: 'Work', href: '/work' },
5    { title: 'Blog', href: '/blog' },
6    { title: 'Contact', href: '/contact' },
7];

Social Media Links

Update the socialMedia array:

tsx.tsxTypeScript

1const socialMedia: SocialMedia[] = [
2    { title: 'Instagram', href: 'https://instagram.com/yourhandle' },
3    { title: 'Twitter', href: 'https://twitter.com/yourhandle' },
4    { title: 'LinkedIn', href: 'https://linkedin.com/company/yourcompany' },
5    { title: 'GitHub', href: 'https://github.com/yourusername' },
6];

🎭 Animation Details

Hamburger Animation

Duration: 500ms for line rotation and translation
Middle Line: Fades out (opacity 0) and scales down
Top/Bottom Lines: Rotate to form an X shape
Custom Angles: 19° and -20° for unique look

Menu Overlay

Entry: Slides down from -100% translateY
Duration: 1 second with custom cubic-bezier easing
Background: Semi-transparent overlay (zinc-400/600)

Menu Items

Staggered Animation: Each item appears with 0.1s delay
Movement: Slides up from 100px below with opacity fade
Numbering: Sequential numbers (01, 02, 03...) with separate animation
Typography: Large extralight text (4xl to 7xl)

Footer Elements

Delay: Appears after menu items (0.8s delay)
Movement: Slides up from 50px below
Content: Copyright, social links, legal links

💡 Usage Tips

Menu Item Guidelines

Count: 4-6 items work best for visual balance
Titles: Keep short and descriptive
Order: Most important pages first

Logo Considerations

tsx.tsxTypeScript

1// Short brand names work best
2'ACME';
3'Brand';
4'Studio X';
5
6// For longer names, consider smaller text
7'Your Company Name';

Social Media Strategy

Include only active social platforms
3-4 social links maintain clean layout
External links automatically open in new tabs

📱 Responsive Behavior

Desktop (≥ 768px)

Larger hamburger button (20x8)
Bigger menu text (7xl)
Horizontal footer layout

Mobile (< 768px)

Smaller hamburger button (16x8)
Smaller menu text (4xl)
Stacked footer layout

Fixed Positioning

Navbar height: 80px (h-20)
Automatic spacer div prevents content overlap
Backdrop blur for modern glass effect

🌙 Dark Mode Support

Automatically adapts styling for dark mode:

Navigation Elements

Text: text-black dark:text-white
Hamburger Lines: bg-black dark:bg-white
Menu Background: bg-zinc-400 dark:bg-zinc-600

Menu Content

Numbers: text-zinc-600 dark:text-zinc-400
Links: Inherit parent text color
Footer: Maintains proper contrast

🔧 Context System

The navbar uses React Context for state management:

NavbarProvider

Wraps the entire navbar and provides:

isMenuOpen: Boolean state
toggleMenu(): Toggle function
openMenu() / closeMenu(): Explicit controls

useNavbar Hook

Access navbar state in any child component:

tsx.tsxTypeScript

1const { isMenuOpen, toggleMenu, closeMenu } = useNavbar();

⚠️ Implementation Notes

Required Structure

The navbar automatically includes:

Spacer div (h-20) to prevent content overlap
Fixed header with backdrop blur
Context provider for state management

Navigation Timing

Menu animations are optimized for 60fps
Uses hardware-accelerated transforms
Custom easing functions for smooth motion

Accessibility Features

Proper ARIA labels on hamburger button
aria-expanded state indication
External links have rel="noreferrer noopener"
Keyboard navigation support