mobil navigation

This tailwind example is contributed by Omer fils ELENGA, on 28-Nov-2025. Component is made with Tailwind v3.4. It is responsive.

Hero Navigations Navbar Range Slider

Author Omer fils ELENGA

Tailwind v3.4 1.2k 2

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>iOS 26 Navigation Concept</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

/* Effet de verre ultra-avancé */
        .ios-glass {
            background: rgba(30, 30, 30, 0.4);
            backdrop-filter: blur(25px) saturate(180%);
            -webkit-backdrop-filter: blur(25px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        }

/* La lueur active derrière l'icône */
        .nav-indicator {
            position: absolute;
            top: 50%;
            transform: translateY(-50%) translateX(-50%);
            width: 45px;
            height: 45px;
            background: radial-gradient(circle, rgba(59,130,246,0.5) 0%, rgba(59,130,246,0) 70%);
            border-radius: 50%;
            transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Effet élastique */
            z-index: -1;
            filter: blur(5px);
        }

/* --- Gestion des Pages (Fiches) --- */
        .page-card {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding-bottom: 100px; /* Espace pour la nav */
            overflow-y: auto;
            opacity: 0;
            transform: scale(0.95) translateY(20px);
            transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
            pointer-events: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 0;
        }

.page-card.active {
            opacity: 1;
            transform: scale(1) translateY(0);
            pointer-events: auto;
            z-index: 10;
        }

/* Animation de sortie pour l'ancienne page */
        .page-card.exit {
            transform: scale(0.98);
            opacity: 0;
            filter: blur(10px);
        }

/* Custom Scrollbar invisible */
        .page-card::-webkit-scrollbar {
            display: none;
        }

/* Micro-animations des icônes */
        .nav-item ion-icon {
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s;
        }
        .nav-item.active ion-icon {
            transform: translateY(-4px) scale(1.1);
            color: #60a5fa; /* Bleu iOS */
            filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.6));
        }

</style>
</head>
<body class="text-white h-screen w-screen relative">

<section id="home" class="page-card active bg-gradient-to-b from-gray-900 to-black">
        <div class="w-full max-w-md p-6 space-y-6">
            <h1 class="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600">
                Bonjour.
            </h1>
            <p class="text-gray-400 text-lg">Bienvenue sur l'interface iOS 26.</p>
            
            <div class="w-full h-40 rounded-3xl bg-white/5 border border-white/10 p-4">
                <div class="h-full w-full bg-gradient-to-tr from-purple-500/20 to-blue-500/20 rounded-2xl flex items-center justify-center">
                    <span class="text-sm font-medium tracking-widest uppercase text-white/50">Widget Météo</span>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="h-32 rounded-3xl bg-white/5 border border-white/10"></div>
                <div class="h-32 rounded-3xl bg-white/5 border border-white/10"></div>
            </div>
        </div>
    </section>

<section id="search" class="page-card bg-gradient-to-b from-slate-900 to-black">
        <div class="w-full max-w-md p-6 flex flex-col items-center">
            <div class="w-full h-14 rounded-full bg-white/10 border border-white/10 flex items-center px-6 mb-8 backdrop-blur-md">
                <ion-icon name="search-outline" class="text-xl text-gray-400 mr-3"></ion-icon>
                <input type="text" placeholder="Rechercher..." class="bg-transparent outline-none text-white w-full placeholder-gray-500">
            </div>
            <div class="text-6xl text-gray-700 font-thin mb-4">
                <ion-icon name="planet-outline"></ion-icon>
            </div>
            <h2 class="text-2xl font-semibold">Explorer</h2>
        </div>
    </section>

<section id="likes" class="page-card bg-gradient-to-b from-zinc-900 to-black">
        <div class="w-full max-w-md p-6">
            <h2 class="text-3xl font-bold mb-6">Activité</h2>
            <div class="space-y-4">
                <div class="flex items-center p-4 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm">
                    <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mr-4">
                        <ion-icon name="mail" class="text-white"></ion-icon>
                    </div>
                    <div>
                        <h4 class="font-semibold">Nouveau Message</h4>
                        <p class="text-xs text-gray-400">Il y a 2 minutes</p>
                    </div>
                </div>
                <div class="flex items-center p-4 rounded-2xl bg-white/5 border border-white/10 backdrop-blur-sm">
                    <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center mr-4">
                        <ion-icon name="call" class="text-white"></ion-icon>
                    </div>
                    <div>
                        <h4 class="font-semibold">Appel Manqué</h4>
                        <p class="text-xs text-gray-400">Il y a 10 minutes</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="profile" class="page-card bg-gradient-to-b from-neutral-900 to-black">
        <div class="w-full max-w-md p-6 flex flex-col items-center">
            <div class="w-24 h-24 rounded-full bg-gradient-to-tr from-pink-500 to-orange-400 p-1 mb-4">
                <div class="w-full h-full rounded-full bg-gray-800 border-4 border-black"></div>
            </div>
            <h2 class="text-2xl font-bold">Utilisateur</h2>
            <p class="text-blue-400 text-sm mb-8">@ios26_concept</p>
            
            <button class="w-full py-4 rounded-2xl bg-white/10 border border-white/10 font-medium active:scale-95 transition-transform">
                Paramètres
            </button>
        </div>
    </section>

</div>

// Fonction pour positionner l'indicateur lumineux
        function moveIndicator(element) {
            // Calculer la position relative de l'élément cliqué par rapport à la barre
            const navRect = element.parentElement.getBoundingClientRect();
            const itemRect = element.getBoundingClientRect();
            
            // Le centre de l'icône cliquée relatif à la barre
            const leftPosition = itemRect.left - navRect.left + (itemRect.width / 2);
            
            indicator.style.left = `${leftPosition}px`;
        }

// Initialiser la position de l'indicateur sur le premier élément
        window.addEventListener('load', () => {
            const activeItem = document.querySelector('.nav-item.active');
            if(activeItem) moveIndicator(activeItem);
        });

// Gestion des clics
        navItems.forEach(item => {
            item.addEventListener('click', (e) => {
                const targetId = item.getAttribute('data-target');
                const targetPage = document.getElementById(targetId);
                const activePage = document.querySelector('.page-card.active');

// Si on clique sur l'onglet déjà actif, ne rien faire
                if (item.classList.contains('active')) return;

// 1. Gérer la Navigation (Look)
                navItems.forEach(nav => nav.classList.remove('active'));
                item.classList.add('active');
                
                // Changer les icônes (Outline -> Filled pour l'effet Apple)
                navItems.forEach(nav => {
                    const icon = nav.querySelector('ion-icon');
                    const name = icon.getAttribute('name');
                    // Reset to outline
                    if(!name.includes('-outline')) icon.setAttribute('name', name + '-outline');
                });
                
                // Set active icon to filled (supprime '-outline')
                const activeIcon = item.querySelector('ion-icon');
                const activeName = activeIcon.getAttribute('name');
                activeIcon.setAttribute('name', activeName.replace('-outline', ''));

// Déplacer la lueur
                moveIndicator(item);

// 2. Gérer les Pages (Transitions)
                if (activePage) {
                    activePage.classList.remove('active');
                    activePage.classList.add('exit');
                    
                    // Nettoyer la classe exit après l'anim
                    setTimeout(() => {
                        activePage.classList.remove('exit');
                    }, 400);
                }

if (targetPage) {
                    targetPage.classList.add('active');
                }
            });
        });
    </script>
</body>
</html>

Related Examples

Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.7k
Navbar compoent

Amit Pachange

3 years ago

17.3k
Hero w/ navbar
the modern and clean hero section

Carla Hoffman

2 years ago

5.9k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
New Nav Component
A new navigation component

Amit PR

2 years ago

3.8k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.6k
beautifull web page
I create a web page using cloude ai its amazing.

Akram Khan

2 years ago

3.5k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3k
Tailwind css navigation header
Tailwind css navigation header

Abid Ullah

2 years ago

3.2k
Animated underline hover navbar
Simple animated underline hover effect navbar.

inbarajan P

2 years ago

3.6k
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Coastal UI

1 year ago

3.9k
animated navigation bar

Md. Tofayel islam

1 year ago

3.1k