Home Buttons Cards Navbars

Premium Navigation

Advanced navigation components with smooth animations, responsive design, and modern interactions. Perfect for creating professional and engaging user interfaces.

Glass Navigation

<nav class="nav-glass">
    <div class="nav-container">
        <div class="nav-brand">
            <div class="brand-icon">
                <i class="fas fa-diamond"></i>
            </div>
            <span>Brand</span>
        </div>
        <div class="nav-menu">
            <a href="#" class="nav-item">Home</a>
            <a href="#" class="nav-item">About</a>
            <a href="#" class="nav-item active">Services</a>
            <a href="#" class="nav-item">Contact</a>
        </div>
        <button class="nav-toggle">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </div>
</nav>
.nav-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-large);
    padding: 20px;
    margin: 20px;
}

.nav-demo-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 800px;
    margin: 0 auto;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.nav-menu {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-item {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-small);
    transition: all var(--transition-normal);
}

.nav-item:hover,
.nav-item.active {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

Floating Navigation

<nav class="nav-floating">
    <div class="nav-container">
        <div class="nav-brand">
            <span class="brand-text">Float</span>
        </div>
        <div class="nav-menu">
            <a href="#" class="nav-item">
                <i class="fas fa-home"></i>
                <span>Home</span>
            </a>
            <a href="#" class="nav-item active">
                <i class="fas fa-user"></i>
                <span>Profile</span>
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-cog"></i>
                <span>Settings</span>
            </a>
            <a href="#" class="nav-item">
                <i class="fas fa-envelope"></i>
                <span>Messages</span>
            </a>
        </div>
    </div>
</nav>
.nav-floating {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-large);
    padding: 20px;
    margin: 20px;
    box-shadow: var(--shadow-medium);
}

.nav-floating .nav-demo-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 800px;
    margin: 0 auto;
}

.nav-floating .nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-floating .brand-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.nav-floating .nav-menu {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-floating .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: var(--text-primary);
    text-decoration: none;
    padding: 10px;
    border-radius: var(--radius-small);
    transition: all var(--transition-normal);
    min-width: 60px;
}

.nav-floating .nav-item i {
    font-size: 18px;
    color: var(--gradient-primary);
}

.nav-floating .nav-item span {
    font-size: 12px;
    font-weight: 500;
}

.nav-floating .nav-item:hover,
.nav-floating .nav-item.active {
    background: rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

.nav-floating .nav-item.active i {
    color: #667eea;
}

Sidebar Navigation

<nav class="nav-sidebar">
    <div class="sidebar-header">
        <div class="sidebar-brand">
            <i class="fas fa-cube"></i>
            <span>Dashboard</span>
        </div>
    </div>
    <div class="sidebar-menu">
        <div class="menu-section">
            <h6>Main</h6>
            <a href="#" class="sidebar-item active">
                <i class="fas fa-home"></i>
                <span>Dashboard</span>
            </a>
            <!-- More items... -->
        </div>
    </div>
    <div class="sidebar-footer">...</div>
</nav>

Tab Navigation

<nav class="nav-tabs">
    <div class="tab-list">
        <button class="tab-item active" data-tab="overview">
            <i class="fas fa-chart-pie"></i>
            <span>Overview</span>
        </button>
        <button class="tab-item" data-tab="analytics">
            <i class="fas fa-chart-line"></i>
            <span>Analytics</span>
        </button>
        <button class="tab-item" data-tab="reports">
            <i class="fas fa-file-alt"></i>
            <span>Reports</span>
        </button>
        <button class="tab-item" data-tab="settings">
            <i class="fas fa-cog"></i>
            <span>Settings</span>
        </button>
        <div class="tab-indicator"></div>
    </div>
</nav>

Breadcrumb Navigation

<nav class="nav-breadcrumb">
    <ol class="breadcrumb-list">
        <li class="breadcrumb-item">
            <a href="#" class="breadcrumb-link">
                <i class="fas fa-home"></i>
                <span>Home</span>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="#" class="breadcrumb-link">
                <span>Products</span>
            </a>
        </li>
        <li class="breadcrumb-item active">
            <span>Smartphones</span>
        </li>
    </ol>
</nav>

Mobile Navigation

<nav class="nav-mobile">
    <div class="mobile-nav-container">
        <a href="#" class="mobile-nav-item active">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </a>
        <a href="#" class="mobile-nav-item">
            <i class="fas fa-search"></i>
            <span>Search</span>
        </a>
        <a href="#" class="mobile-nav-item">
            <i class="fas fa-heart"></i>
            <span>Favorites</span>
            <span class="nav-badge">3</span>
        </a>
        <!-- More items... -->
    </div>
</nav>

Dropdown Navigation

<nav class="nav-dropdown">
    <div class="nav-container">
        <div class="nav-brand">
            <span>Brand</span>
        </div>
        <div class="nav-menu">
            <a href="#" class="nav-item">Home</a>
            <div class="nav-dropdown-container">
                <button class="nav-item dropdown-trigger">
                    Products
                    <i class="fas fa-chevron-down"></i>
                </button>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">
                        <i class="fas fa-laptop"></i>
                        <div class="dropdown-content">
                            <span class="dropdown-title">Laptops</span>
                            <span class="dropdown-desc">High-performance computers</span>
                        </div>
                    </a>
                    <!-- More items... -->
                </div>
            </div>
        </div>
    </div>
</nav>

Search Navigation

<nav class="nav-search">
    <div class="nav-container">
        <div class="nav-brand">
            <i class="fas fa-search"></i>
            <span>Search</span>
        </div>
        <div class="search-container">
            <input type="text" class="search-input" placeholder="Search...">
            <button class="search-btn">
                <i class="fas fa-search"></i>
            </button>
            <div class="search-suggestions">
                <div class="suggestion-item">
                    <i class="fas fa-clock"></i>
                    <span>Recent: JavaScript tutorials</span>
                </div>
                <!-- More suggestions... -->
            </div>
        </div>
        <div class="nav-actions">...</div>
    </div>
</nav>

Social Navigation

<nav class="nav-social">
    <div class="social-nav-container">
        <a href="#" class="social-nav-item facebook">
            <i class="fab fa-facebook-f"></i>
            <span>Facebook</span>
        </a>
        <a href="#" class="social-nav-item twitter">
            <i class="fab fa-twitter"></i>
            <span>Twitter</span>
        </a>
        <a href="#" class="social-nav-item instagram">
            <i class="fab fa-instagram"></i>
            <span>Instagram</span>
        </a>
        <!-- More social links... -->
    </div>
</nav>

Progress Navigation

<nav class="nav-progress">
    <div class="progress-nav-container">
        <div class="progress-step completed">
            <div class="step-icon">
                <i class="fas fa-check"></i>
            </div>
            <div class="step-content">
                <span class="step-title">Account Info</span>
                <span class="step-desc">Basic details</span>
            </div>
        </div>
        <div class="progress-line completed"></div>
        <div class="progress-step active">
            <div class="step-icon">
                <span>3</span>
            </div>
            <div class="step-content">
                <span class="step-title">Payment</span>
                <span class="step-desc">Billing info</span>
            </div>
        </div>
        <!-- More steps... -->
    </div>
</nav>