Navbar

Fixed navigation header with brand, links, language selector, theme toggle, and user menu. Features glass/transparent overlay effect with backdrop blur. Supports two variants: Guest (with Sign In button) and Signed-in (with user profile menu). Includes mobile-responsive hamburger menu.

Navigation Fixed Header Glass Effect Dropdowns Mobile Menu Responsive

Live Preview — Guest Variant

Guest navbar without authentication. Includes language selector, theme toggle, and Sign In button.

Interactive Demo

Live Preview — Signed-in Variant

Authenticated navbar with user profile menu. Shows profile, reservations, settings, and sign out options.

Interactive Demo

HTML Snippets

Copy-ready code for both navbar variants.

Guest Variant

Guest Navbar (with Sign In button) 
<header class="navbar" x-data="navbar()" x-init="init()" @keydown.escape="closeAll()">
    <div class="navbar__container">
        <!-- Brand -->
        <a href="/" class="navbar__brand">
            <svg class="navbar__brand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
            </svg>
            <span>AzylKampinos</span>
        </a>

        <!-- Navigation Links -->
        <nav class="navbar__nav">
            <a href="/" class="navbar__link is-active">Home</a>
            <a href="/offers" class="navbar__link">Offers</a>
            <a href="/contact" class="navbar__link">Contact</a>
        </nav>

        <!-- Actions: Language, Theme, Sign In -->
        <div class="navbar__actions">
            <!-- Language Dropdown -->
            <div class="navbar__dropdown" @click.outside="langOpen = false">
                <button class="navbar__dropdown-trigger" @click="toggleLang()" :aria-expanded="langOpen">
                    <span x-text="currentLang"></span>
                    <svg class="navbar__dropdown-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
                <div class="navbar__dropdown-menu" x-show="langOpen" x-transition>
                    <button class="navbar__dropdown-item" @click="setLanguage('English')">English</button>
                    <button class="navbar__dropdown-item" @click="setLanguage('Polski')">Polski</button>
                </div>
            </div>

            <!-- Theme Toggle -->
            <button class="navbar__theme-toggle" @click="toggleTheme()" title="Toggle theme">
                <svg class="navbar__theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                </svg>
            </button>

            <!-- Sign In Button -->
            <button class="btn btn--primary btn--sm">Sign In</button>
        </div>

        <!-- Mobile Menu Toggle -->
        <button class="navbar__mobile-toggle" @click="toggleMobile()">
            <svg class="navbar__mobile-icon" x-show="!mobileOpen" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <svg class="navbar__mobile-icon" x-show="mobileOpen" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <!-- Mobile Panel -->
    <div class="navbar__mobile-panel" x-show="mobileOpen" x-transition>
        <div class="navbar__mobile-content">
            <nav class="navbar__mobile-nav">
                <a href="/" class="navbar__mobile-link is-active">Home</a>
                <a href="/offers" class="navbar__mobile-link">Offers</a>
                <a href="/contact" class="navbar__mobile-link">Contact</a>
            </nav>
            <div class="navbar__mobile-divider"></div>
            <div class="navbar__mobile-auth">
                <button class="btn btn--primary w-full">Sign In</button>
            </div>
        </div>
    </div>
</header>

Signed-in Variant

Signed-in Navbar (with user profile menu) 
<header class="navbar" x-data="navbar()" x-init="init()" @keydown.escape="closeAll()">
    <div class="navbar__container">
        <!-- Brand -->
        <a href="/" class="navbar__brand">
            <svg class="navbar__brand-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
            </svg>
            <span>AzylKampinos</span>
        </a>

        <!-- Navigation Links -->
        <nav class="navbar__nav">
            <a href="/" class="navbar__link is-active">Home</a>
            <a href="/offers" class="navbar__link">Offers</a>
            <a href="/contact" class="navbar__link">Contact</a>
        </nav>

        <!-- Actions: Language, Theme, User Menu -->
        <div class="navbar__actions">
            <!-- Language Dropdown -->
            <div class="navbar__dropdown" @click.outside="langOpen = false">
                <button class="navbar__dropdown-trigger" @click="toggleLang()" :aria-expanded="langOpen">
                    <span x-text="currentLang"></span>
                    <svg class="navbar__dropdown-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
                <div class="navbar__dropdown-menu" x-show="langOpen" x-transition>
                    <button class="navbar__dropdown-item" @click="setLanguage('English')">English</button>
                    <button class="navbar__dropdown-item" @click="setLanguage('Polski')">Polski</button>
                </div>
            </div>

            <!-- Theme Toggle -->
            <button class="navbar__theme-toggle" @click="toggleTheme()" title="Toggle theme">
                <svg class="navbar__theme-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                </svg>
            </button>

            <!-- User Menu Dropdown -->
            <div class="navbar__dropdown" @click.outside="userOpen = false">
                <button class="navbar__dropdown-trigger navbar__user-trigger" @click="toggleUser()" :aria-expanded="userOpen">
                    <div class="navbar__user-avatar">JD</div>
                    <span class="navbar__user-name-text">John Doe</span>
                    <svg class="navbar__dropdown-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
                <div class="navbar__dropdown-menu navbar__user-menu" x-show="userOpen" x-transition>
                    <div class="navbar__user-info">
                        <div class="navbar__user-name">John Doe</div>
                        <div class="navbar__user-email">john@example.com</div>
                    </div>
                    <button class="navbar__dropdown-item">Profile</button>
                    <button class="navbar__dropdown-item">My Reservations</button>
                    <button class="navbar__dropdown-item">Settings</button>
                    <div class="navbar__dropdown-divider"></div>
                    <button class="navbar__dropdown-item">Sign Out</button>
                </div>
            </div>
        </div>

        <!-- Mobile Menu Toggle -->
        <button class="navbar__mobile-toggle" @click="toggleMobile()">
            <svg class="navbar__mobile-icon" x-show="!mobileOpen" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <svg class="navbar__mobile-icon" x-show="mobileOpen" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>

    <!-- Mobile Panel -->
    <div class="navbar__mobile-panel" x-show="mobileOpen" x-transition>
        <div class="navbar__mobile-content">
            <nav class="navbar__mobile-nav">
                <a href="/" class="navbar__mobile-link is-active">Home</a>
                <a href="/offers" class="navbar__mobile-link">Offers</a>
                <a href="/contact" class="navbar__mobile-link">Contact</a>
            </nav>
            <div class="navbar__mobile-divider"></div>
            <div class="navbar__mobile-auth">
                <div class="navbar__mobile-user">
                    <div class="navbar__mobile-user-avatar">JD</div>
                    <div>
                        <div class="navbar__mobile-user-name">John Doe</div>
                        <div class="navbar__mobile-user-email">john@example.com</div>
                    </div>
                </div>
                <div class="navbar__mobile-actions">
                    <button class="navbar__mobile-action">Profile</button>
                    <button class="navbar__mobile-action">My Reservations</button>
                    <button class="navbar__mobile-action">Settings</button>
                    <button class="navbar__mobile-action navbar__mobile-action--danger">Sign Out</button>
                </div>
            </div>
        </div>
    </div>
</header>

Files Location

CSS: /assets/css/ui/views/navbar.css (566 lines)
JavaScript: /assets/js/navbar.js (135 lines, Alpine.js component)
Dependencies: Alpine.js 3.14.8 (CDN)

Usage Guidelines

✅ DO:
  • Use Alpine.js x-data="navbar()" for all interactivity
  • Load navbar.js script before Alpine initialization
  • Use .btn .btn--primary .btn--sm for auth buttons (don't create custom styling)
  • Place navbar as position: fixed overlay for hero backgrounds
  • Test mobile menu on actual mobile devices and various viewport sizes
  • Ensure keyboard navigation works: Tab, Enter, ESC to close menus
  • Close dropdowns on outside click (@click.outside) and ESC key
  • Add aria-expanded attribute to dropdown triggers for accessibility
  • Support both light and dark themes with dark: prefix
  • Test language switcher and theme toggle in both variants
❌ DON'T:
  • Don't create custom button styling (e.g., .navbar-cta) — always use Button Element classes
  • Don't hardcode colors — use CSS variables from tokens.css
  • Don't use native <select> for language dropdown — maintain custom dropdown for consistency
  • Don't modify navbar.css or navbar.js without updating documentation
  • Don't add scroll-triggered state changes (navbar should remain glass effect always)
  • Don't change navbar height without testing responsive behavior
  • Don't forget to lock body scroll when mobile menu opens
  • Don't make dropdown menus wider than 300px — keep them compact

Key Features

🎨

Glass Effect

Semi-transparent background with backdrop blur for premium aesthetic

📱

Mobile Responsive

Full responsive menu with hamburger toggle and drawer panel

🌙

Dark Mode

Complete light and dark theme support with toggle button

🌐

Language Selector

Dropdown for switching between English and Polish

👤

User Menu

Profile dropdown with reservations, settings, and sign out

⌨️

Accessible

Full keyboard navigation and ARIA attributes for screen readers

Related Components

Buttons Inputs Colors Spacing Typography Icons