Download the PHP package hdaklue/naptab without Composer

NapTab

Stop waiting. Start loading smart.

Transform your Laravel applications with intelligent tabbed navigation that only loads what users actually need. NapTab eliminates the performance bottleneck of traditional tabs by implementing true lazy loading - heavy database queries and expensive operations execute only when users click tabs, not during initial page load.

Featuring an innovative dual-level content hooks system that lets you inject content both around individual tabs and the entire container, plus flexible layout directions including modern aside/sidebar layouts for professional dashboard-style interfaces.

The result? 4x faster page loads, unprecedented customization, and happier users.

Table of Contents

• Why Developers Choose NapTab
• Key Benefits & Performance Impact
• Quick Start (2 Minutes)
• Perfect Use Cases
• Content Hooks System (NEW)
• Advanced Usage & API Reference
• Professional Theming & Configuration
• Installation Guide
• Mobile Navigation
• URL Routing
• CSS Customization
• Why Laravel Developers Love NapTab
• Contributing & Support

Why Developers Choose NapTab

The Performance Problem

Traditional tab implementations load all content immediately, creating unnecessary database queries and bloated page loads. Your users wait longer, your servers work harder, and your application feels sluggish.

The NapTab Solution

True Lazy Loading Architecture: Each tab remains "asleep" until clicked, eliminating wasted resources and dramatically improving perceived performance.

Key Benefits & Performance Impact

🎯 Dual-Level Content Hooks System (UNIQUE)

• Container-level hooks: Inject content around entire tabs container
• Tab-level hooks: Add headers, footers, and alerts to individual tabs
• Multiple content types: Support for strings, Views, Closures, and Htmlable objects
• Dynamic rendering: Hooks evaluate only when tabs are accessed
• Unmatched flexibility: No other Laravel tab package offers this level of customization

⚡ Instant Performance Gains

• 4x faster page loads (340ms → 80ms average improvement)
• Zero database queries for inactive tabs
• Reduced server load and memory usage
• Better Core Web Vitals scores

📱 Mobile-Optimized Experience

• Intelligent navigation that adapts to screen size
• Responsive Layout Directions: Choose between traditional horizontal tabs or modern aside/sidebar layouts that automatically optimize for mobile
• Touch-friendly interactions with smooth animations
• Bottom-sheet modal or horizontal scroll options
• Perfect for responsive Laravel applications

🌐 Global-Ready

• Complete RTL support for Arabic, Hebrew, Persian
• Automatic text direction detection
• Cultural UI patterns respected

🔗 SEO & UX Friendly

• Bookmarkable tabs with clean URLs
• Browser back/forward navigation support
• Search engine friendly content organization

🎨 Production-Ready Theming

• 22 professionally designed color schemes
• Dark/light mode support
• 4 visual presets: Modern, Minimal, Sharp, Pills
• Fully customizable via Tailwind CSS

🔧 Laravel Ecosystem Integration

• Works seamlessly with FilamentPHP admin panels
• Compatible with any Livewire components
• Integrates with traditional Blade views
• Zero conflicts with existing packages

Real-World Performance Impact

Before vs After NapTab

Why This Matters for Your Business

• Improved User Experience: Users see content immediately instead of waiting for unnecessary data
• Reduced Server Costs: Fewer database queries mean lower infrastructure costs
• Better SEO Rankings: Google rewards faster page loads with higher search rankings
• Higher Conversion Rates: Every 100ms improvement increases conversions by 1%

Technical Performance Features

• ✅ Smart Lazy Loading: Database queries execute only when tabs are accessed
• ✅ Efficient DOM Management: Strategic Livewire component instantiation
• ✅ Zero-Reload Navigation: URL updates without full page refreshes
• ✅ Mobile-Optimized: Minimal JavaScript footprint for mobile devices
• ✅ Configuration Caching: Theme settings cached for production performance

Get Started in 2 Minutes

1. Install NapTab

The install command automatically:

• Creates your configuration provider
• Publishes CSS assets
• Registers the service provider
• Sets up Tailwind safelist classes

2. Create Your First Tab Component

Generate a new tabbed component extending NapTab:

3. Add to Your Blade Template

🎉 That's It!

Your tabs are now intelligently lazy-loaded with powerful content hooks:

• ✅ Instant Page Loads - Only the active tab content loads initially
• ✅ Dual-Level Content Hooks - Container and tab-level content injection
• ✅ Zero Waste - Database queries run only when tabs are accessed
• ✅ Smart Navigation - Adapts perfectly to desktop and mobile
• ✅ SEO Friendly - Clean URLs and bookmarkable tabs
• ✅ Unprecedented Customization - Headers, footers, alerts exactly where you need them
• ✅ Production Ready - Robust error handling and security features

Perfect for Your Use Case

✅ Dashboard Applications

• Analytics panels with heavy chart calculations using Direction::Aside for professional sidebar navigation
• User management interfaces with complex queries
• Admin panels with multiple data sources optimized for desktop workflows

✅ E-commerce Platforms

• Product detail pages with reviews, specifications, shipping info
• Customer account areas with orders, wishlist, profile
• Inventory management with different product views

✅ Content Management

• Multi-language content editing interfaces
• Media galleries with large image collections
• User-generated content moderation panels

✅ FilamentPHP Integration

• Admin resource detail pages
• Custom page layouts with tabbed sections
• Dashboard widgets with segmented data

Revolutionary Content Hooks System

The game-changing feature that sets NapTab apart from every other Laravel tab solution.

NapTab introduces an innovative dual-level content hooks system that gives you unprecedented control over content placement - something no other Laravel tab package offers. Inject headers, statistics, alerts, or any content exactly where you need it.

Dual-Level Architecture

Container-Level Hooks: Add content around the entire tabs container Tab-Level Hooks: Add content around individual tab content

Content Hook Types & Examples

All hook methods support multiple content types:

• null - No content
• string - Direct HTML content
• Htmlable - Any class implementing Htmlable
• View - Blade view instances
• Closure - Dynamic content functions

Container-Level Examples

Tab-Level Examples

Real-World Use Cases for Content Hooks

E-commerce Product Tabs

Admin Dashboard Sections

Multi-step Forms

Why Content Hooks Are Revolutionary

Before NapTab Hooks:

• Rigid tab structures with no customization
• Content and navigation tightly coupled
• Difficult to add contextual information
• Repetitive code across different tab implementations

With NapTab Hooks:

• Complete control over content placement
• Clean separation of concerns
• Contextual headers, alerts, and footers
• Reusable, maintainable tab components
• Dynamic content based on application state

Performance Benefits of Content Hooks

• Lazy Evaluation: Hook content only renders when tabs are accessed
• Memory Efficient: Closures prevent unnecessary object creation
• Cached Results: View-based hooks benefit from Laravel's view caching
• Conditional Rendering: Return null to skip unnecessary DOM elements

Advanced Usage & API Reference

Flexible Content Loading Strategies

NapTab gives you complete control over how and when tab content loads. Choose the approach that best fits your use case:

Layout Direction Control

Transform Your Tab Interface with Intelligent Layout Options

NapTab adapts to your design needs with flexible layout directions that automatically optimize for different screen sizes and use cases.

Available Direction Options

Layout Behaviors

Direction::Horizontal (Default)

• Traditional tabs positioned on top
• Content displays below the tab navigation
• Consistent experience across all devices
• Perfect for content-focused interfaces

Direction::Aside (Responsive Sidebar)

• Mobile & Tablet: Automatically falls back to horizontal layout for optimal touch interaction
• Desktop (768px+): Elegant sidebar navigation with content beside it
• Clean, uncluttered design with no bottom border under tabs
• Ideal for dashboard, settings, and admin interfaces
• Professional spacing between sidebar and content area

Why Use Aside Layout?

• Enhanced User Experience: Sidebar navigation feels more like native desktop applications
• Better Space Utilization: More vertical content space on wide screens
• Professional Appearance: Modern, dashboard-style interface your users will love
• Mobile-First Responsive: Automatically optimizes for touch devices
• Zero Configuration: Responsive behavior works out of the box

Tab API Methods

All Tab methods are chainable and accept either static values or closures for dynamic behavior.

Core Configuration

Access Control

Content Definition

Content Hooks

Lifecycle Hooks

Tab Content Methods

1. Controller Methods (Best for Dynamic Content)

2. Direct Content

3. Blade Views

4. Livewire Components

Dynamic Badges & Content Examples

Professional Theming & Configuration

Production-Ready Visual Customization

Transform your tabs to match your brand with professionally designed themes and granular customization options:

Available Configuration Methods

Core Configuration

Badge Configuration

Content & Mobile

Preset Styles

Each preset applies multiple settings for a cohesive design:

Modern Style

Minimal Style

Sharp Style

Pills Style

Configuration Caching

NapTab automatically caches configuration settings for optimal performance in production environments.

How Caching Works

• Singleton Pattern: Configuration is resolved once per request and cached in memory
• Array Conversion: The expensive toArray() conversion is optimized to avoid repeated computation
• Production Ready: Zero configuration impact on high-traffic applications

Performance Benefits

• Faster Rendering: Tab components render instantly without config overhead
• Memory Efficient: Configuration objects are reused across multiple tab instances
• Scalable: No performance degradation as you add more tab components

Cache Management

The configuration cache is automatically managed:

Clearing Cache (Development)

If you modify your configuration during development:

Installation Guide

1. Install Package

2. Install Assets & Configuration

This command will:

• Create app/Providers/NapTabServiceProvider.php with default configuration
• Publish CSS assets to public/vendor/naptab/
• Add the service provider to your config/app.php

3. Include CSS Assets

Add to your main layout file:

4. Add Service Provider (Auto-added by install command)

Mobile Navigation

NapTab provides intelligent mobile navigation that adapts to device capabilities:

Scroll Navigation (Default)

• Horizontal scrolling with hidden scrollbars
• Smooth snap-to-item behavior
• Auto-scroll to active tab
• Touch-friendly interaction

Modal Navigation (Optional)

• Full-width active tab button with hamburger icon
• Bottom sheet modal with all tabs
• Consistent with mobile design patterns

URL Routing

Enable URL routing to make tabs bookmarkable and SEO-friendly:

1. Enable Routing Per Component

2. Add Route Parameter

3. Flexible Routing Control

Now you have complete control over which components use routing:

4. Automatic Navigation

For routable components, NapTab automatically:

• Updates the URL when tabs are clicked
• Maintains all existing route parameters
• Handles browser back/forward navigation
• Gracefully falls back when route names are unavailable

CSS Customization

Published CSS Files

The naptab:install command publishes two CSS files:

public/vendor/naptab/naptab.css - Core component styles

public/vendor/naptab/naptab-safelist.css - Tailwind color safelist

Custom Colors

To add custom colors, update the safelist file:

Why Laravel Developers Love NapTab

Built for Modern Laravel Development

• Laravel 10 & 11 Ready: Full compatibility with the latest Laravel versions
• Livewire 3 Optimized: Takes advantage of the newest Livewire performance improvements
• Tailwind Integration: Seamless styling with your existing Tailwind workflow
• FilamentPHP Compatible: Perfect companion for admin panel development
• Responsive Layout Directions: Modern aside/sidebar layouts that rival native desktop applications

Developer Experience First

• Clean API: Intuitive, chainable methods that feel natural in Laravel
• Comprehensive Documentation: Everything you need with practical examples
• Type Safety: Full PHP 8.1+ type hints and PHPStan compatibility
• Zero Configuration: Sensible defaults that work out of the box

Community Trusted

• Production Tested: Used in high-traffic Laravel applications
• MIT Licensed: Open source with commercial-friendly licensing
• Active Maintenance: Regular updates and responsive issue resolution
• Growing Ecosystem: Integrates seamlessly with popular Laravel packages

Contributing & Support

Found a Bug or Have a Feature Request?

We welcome contributions! Please check our GitHub repository for:

• Bug reports and feature requests
• Pull requests and code contributions
• Documentation improvements

Need Help?

• 📖 Documentation: Comprehensive guides and API reference above
• 🐛 Issues: Report bugs via GitHub Issues
• 💬 Discussions: Community support via GitHub Discussions

Testing

Run the package test suite:

Security

If you discover any security-related issues, please email [email protected] instead of using the issue tracker.

License

The MIT License (MIT). Please see License File for more information.

Credits

• Hassan Ibrahim - Creator & Maintainer
• Laravel - The foundation framework
• Livewire - Real-time interactions
• Tailwind CSS - Styling framework

Ready to Transform Your Laravel Application?

Stop settling for basic tabs. Start building professional interfaces that your users will love.

NapTab is the only Laravel tab package that combines blazing-fast performance with unprecedented customization through our revolutionary dual-level content hooks system. Join thousands of developers who have transformed their applications with intelligent tab navigation.

What You Get With NapTab

✅ Performance: 4x faster page loads through true lazy loading
✅ Innovation: Dual-level content hooks (unique to NapTab)
✅ Flexibility: Multiple layout directions and responsive design
✅ Quality: Production-tested with comprehensive error handling
✅ Support: Active maintenance and Laravel community integration

Start Building Today