NavbarSection2

A sophisticated navigation bar with split-panel mobile menu design. Features a unique two-panel layout with menu items on one side and company information on the other. Perfect for creative agencies, portfolios, or brands wanting a distinctive navigation experience.

✨ Features

Split-Panel Menu: Unique two-panel mobile menu with menu items and company info
Custom Color Scheme: Stylized with custom colors (#f2f4f3 and #49111c)
Animated Hamburger: "MENU" text transforms into an X on toggle
Company Information Panel: Dedicated space for logo, contact details, and social links
Staggered Animations: Sequential menu item reveals with numbering
Contact Integration: Direct email and phone links
Legal Footer: Privacy and terms links in the company panel
Backdrop Blur: Semi-transparent overlay behind menu

📋 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 - Split-panel menu overlay
navbar-menu-toggle.tsx - Animated hamburger with "MENU" text
container.tsx - Layout container component
README.md - This documentation

🎯 Basic Usage

tsx.tsxTypeScript

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

The navbar renders with a split-panel menu featuring 8 navigation items and a company information panel.

🔧 Props

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

📖 Examples

Basic Implementation

tsx.tsxTypeScript

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

Portfolio Site

tsx.tsxTypeScript

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

Creative Agency Layout

tsx.tsxTypeScript

1export default function AgencyLayout({
2    children,
3}: {
4    children: React.ReactNode;
5}) {
6    return (
7        <div className="min-h-screen">
8            <NavbarSection2 />
9
10            <main className="bg-neutral-50">{children}</main>
11
12            <footer className="bg-neutral-900 text-white">
13                Footer content
14            </footer>
15        </div>
16    );
17}

📝 Customizing Content

Logo Text

Edit the logo text in both the header and company panel:

tsx.tsxTypeScript

1// In the header
2<div className='text-xl md:text-2xl font-medium tracking-wide hover:opacity-70 transition-opacity'>
3  YOUR BRAND NAME
4</div>
5
6// In the company panel
7<h2 className="text-xl font-bold tracking-wider text-center">
8  YOUR BRAND NAME
9</h2>

Menu Items

Modify the menuItems array (currently includes 8 items):

tsx.tsxTypeScript

1const menuItems: MenuItem[] = [
2    { title: 'Home', href: '/' },
3    { title: 'About', href: '/about' },
4    { title: 'Work', href: '/work' },
5    { title: 'Services', href: '/services' },
6    { title: 'Team', href: '/team' },
7    { title: 'Blog', href: '/blog' },
8    { title: 'Contact', href: '/contact' },
9    { title: 'Careers', href: '/careers' },
10];

Contact Information

Update contact details in the NavbarMenu props:

tsx.tsxTypeScript

1<NavbarMenu
2    menuItems={menuItems}
3    socialMedia={socialMedia}
4    email="hello@yourcompany.com"
5    phone="+1 (555) 123-4567"
6/>

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: 'Behance', href: 'https://behance.net/yourportfolio' },
6];

🎨 Design System

Color Palette

The component uses a custom two-tone color scheme:

Light Panel: #f2f4f3 (warm light gray)
Dark Panel: #49111c (deep burgundy)
Text Contrast: Dark text on light, light text on dark

Typography Hierarchy

Menu Items: 3xl uppercase with tracking
Numbers: Monospace font for menu numbering
Company Info: Various sizes with light font weights
Logo: Bold with wide tracking

🎭 Animation Details

Panel Animations

Entry Direction: Left panel slides from left, right panel from right
Duration: 1 second with custom cubic-bezier easing
Backdrop: Semi-transparent overlay (black/60) fades in

Menu Item Stagger

Base Delay: 0.8s before first item appears
Stagger Interval: 0.1s between each item
Movement: 30px upward slide with opacity fade
Hover Effects: Background overlay with scale and translate effects

Company Panel Content

Logo Animation: 0.8s delay, 30px upward movement
Contact Grid: 1.0s delay for contact information
Footer: 1.6s delay for legal links (desktop only)

Hamburger Toggle

Lines: Rotate 45° and -45° to form X
"MENU" Text: Fades out completely when open
Duration: 500ms for lines, 300ms for text

💡 Usage Tips

Menu Organization

8 Items Maximum: Layout is optimized for 8 menu items (12.5% height each)
Logical Grouping: Order items by importance and user flow
Short Titles: Single words work best for the design

Contact Strategy

Email/Phone: Direct contact methods in prominent position
Social Media: 3-4 platforms maintain clean layout
Visual Balance: Logo and contact info create focal points

Brand Integration

tsx.tsxTypeScript

1// For creative agencies
2'STUDIO XYZ';
3
4// For personal portfolios
5'JANE SMITH';
6
7// For tech companies
8'INNOVATION LAB';

📱 Responsive Behavior

Mobile (< 768px)

Split Layout: Top/bottom panels (50vh each)
Smaller Logo: 24x24 circular logo
Stacked Info: Contact details in grid format
Hidden Footer: Legal links hidden on mobile

Desktop (≥ 768px)

Side-by-Side: Left/right panels (50% width each)
Larger Logo: 48x48 circular logo
Footer Section: Legal links visible at bottom
Full Height: Panels take full screen height

Panel Distribution

Menu Items: 8 items × 12.5% height = 100% of left panel
Company Info: Flexible layout with padding
Footer: Fixed 12.5% height on desktop

🎨 Custom Colors

Background Colors

Menu Panel: bg-[#f2f4f3] with text-[#49111c]
Company Panel: bg-[#49111c] with text-[#f2f4f3]
Backdrop: bg-black/60 overlay

Border & Accent Colors

Logo Circle: border-[#f2f4f3] border
Menu Separators: bg-[#49111c] bottom borders
Hover Effects: bg-[#49111c]/15 overlay

⚠️ Implementation Notes

Required Structure

The navbar includes the same structure as NavbarSection1:

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

Menu Item Limit

Layout is designed for exactly 8 menu items
Each item takes 12.5% of the panel height
Adding more items will affect the visual balance

Color Customization

To change the color scheme, update these values throughout the component:

#f2f4f3 (light panel background)
#49111c (dark panel background)
Corresponding text colors for contrast