FR | EN
Install
Documentation

Documentation - Header.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Startup

Basic concepts

Utilities

Components

Header

Marssel integrates a flexible and responsive header system with support for adaptive mobile menus, configurable positioning and automatic breakpoint management.

Basic setup

The HeaderManager is automatically initialized: 

const marssel = new Marssel();
// The HeaderManager is ready to use

Basic setup

The HeaderManager is automatically initialized: 

<header id="main-header" class="header">
    <div class="header-container">
        <div class="header-logo">
            <a href="#">
                <img src="https://placehold.co/120x40" alt="Logo">
            </a>
        </div>

        <nav class="header-navbar">
            <ul class="nav">
                <li class="nav-item"><a href="#" class="nav-link">Welcome</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Products</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
            </ul>
        </nav>

        <div class="header-actions">
            <a href="#" class="btn">Connection</a>
            <a href="#" class="btn">Registration</a>
        </div>

        <button class="menu-toggle" data-toggle="menu">
            <span></span>
            <span></span>
            <span></span>
        </button>

    </div>
</header>

Options

Control the arrangement of elements, the behavior of the mobile menu with data attributes: 

<header id="main-header" class="header"
data-logo-position="left|center|right"
data-nav-position="left|center|right"
data-action-position="left|center|right"
data-mobile-menu-type="sidebar|below|fullpage"
data-sidebar-position="left|right"
data-sidebar-style="overlay"
data-mobile-breakpoint="xl"
>

Configuration details:

    Logo Position (data-logo-position)

        left: Aligns the logo to the left
        center: Center the logo
        right: Aligns the logo to the right

    Navigation Position (data-nav-position)

        left: Aligns the navigation to the left
        center: Center navigation
        right: Aligns navigation to the right

    Position Actions (data-action-position)

        left: Aligns action buttons to the left
        center: Centers the actions
        right: Aligns actions to the right (default)

    Mobile Menu Type (data-mobile-menu-type)

        sidebar: Sliding side menu
        below: Menu under the header
        fullpage: Full screen menu

    Sidebar Position (data-sidebar-position)
    (Only for sidebar type)

        left: Mobile menu exits from the left
        right: Mobile menu comes out from the right

    Sidebar Style (data-sidebar-style)
    (Additional option visible in the code)
    overlay: Semi-transparent overlay (default)

    Mobile menu (data-mobile-breakpoint)
    xs, sm, md, lg, xl, xxl

    <!-- Mobile menu which will be generated by the HeaderManager -->

    <!-- Overlay for mobile menu -->

Header with centered logo

Example of a header with a logo in the center: 

<header class="header"
    data-logo-position="center"
    data-nav-position="left"
    data-action-position="right">
    <div class="header-container">
        <nav class="header-navbar">
            <ul class="nav">
                <li class="nav-item"><a href="#" class="nav-link">Welcome</a></li>
                <li class="nav-item"><a href="#" class="nav-link">About</a></li>
            </ul>
        </nav>

        <div class="header-logo">
            <a href="/">
                <img src="https://placehold.co/120x40" alt="Logo" class="h-[40px]">
            </a>
        </div>

        <div class="header-actions">
            <button class="bg-[2563eb] c-[fff] p-[10px_20px] rounded-[6px] border-[none]">
                Contact
            </button>
        </div>

        <button class="menu-toggle" data-toggle="menu">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </div>
</header>

Transparent header

Create a transparent header that attaches to the scroll: 

<header class="header-transparent---[bg-[transparent]+pos-[fixed]+top-[0]+left-[0]+right-[0]+z-[1000]+transition-[all_0.3s]]"
        data-logo-position="left"
        data-nav-position="center"
        data-action-position="right">
    <div class="header-container">
        <nav class="header-navbar">
            <ul class="nav">
                <li class="nav-item"><a href="#" class="nav-link">Welcome</a></li>
                <li class="nav-item"><a href="#" class="nav-link">About</a></li>
            </ul>
        </nav>

        <div class="header-logo">
            <a href="/">
                <img src="https://placehold.co/120x40" alt="Logo" class="h-[40px]">
            </a>
        </div>

        <div class="header-actions">
            <button class="bg-[2563eb] c-[fff] p-[10px_20px] rounded-[6px] border-[none]">
                Contact
            </button>
        </div>

        <button class="menu-toggle" data-toggle="menu">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </div>
</header>

<script>
    window.addEventListener('scroll', () => {
    const header = document.querySelector('.header-transparent');
        if (window.scrollY > 50) {
            header.classList.add('bg-[ffffff]', 'shadow-[0_2px_10px_rgba(0_0_0_0.1)]');
        } else {
            header.classList.remove('bg-[ffffff]', 'shadow-[0_2px_10px_rgba(0_0_0_0.1)]');
        }
    });
</script>

Header with dropdowns

Integrate drop-down menus into the navigation: 

<header class="header">
    <div class="header-container">
        <div class="header-logo">
            <a href="/">Logo</a>
        </div>

        <nav class="header-navbar">
            <ul class="nav">
                <li class="nav-item"><a href="#" class="nav-link">Welcome</a></li>
                <li class="nav-item dropdown" data-dropdown>
                    <a href="#" class="nav-link dropdown-toggle">
                        Products
                        <span class="icon-[chevron-down] icon-size-[small]"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#" class="dropdown-item">Product 1</a></li>
                        <li><a href="#" class="dropdown-item">Product 2</a></li>
                        <li><a href="#" class="dropdown-item">Product 3</a></li>
                    </ul>
                </li>

                <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
            </ul>
        </nav>

        <button class="menu-toggle" data-toggle="menu">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </div>
</header>

JavaScript API

Control the header programmatically. The mobile menu is automatically activated below lg (992px). : 

// Open mobile menu
marssel.headerManager.openMobileMenu('main-header');

// Close mobile menu
marssel.headerManager.closeMobileMenu('main-header');

// Toggle mobile menu
marssel.headerManager.toggleMobileMenu('main-header');

// Update configuration
marssel.headerManager.updateHeaderConfig('main-header', {
    logoPosition: 'center',
    navPosition: 'left',
    mobileMenuType: 'fullpage'
});

// Get current configuration
const config = marssel.headerManager.getHeaderConfig('main-header');
console.log(config);

// Check if a menu is open
if (marssel.headerManager.isAnyMenuOpen) {
    console.log('Un menu est ouvert');
}

// Get current breakpoint
const breakpoint = marssel.headerManager.getCurrentBreakpoint();
console.log(breakpoint); // 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'

// Check if you are in mobile mode
if (marssel.headerManager.isMobileBreakpoint()) {
    console.log('Mode mobile');
}

```
## Breakpoints
The header automatically adapts according to the breakpoints:
```
xs:  < 576px   (Mobile portrait)
sm:  576px     (Mobile landscape)
md:  768px     (Tablet)
lg:  992px     (Desktop)
xl:  1200px    (Large desktop)
xxl: 1400px    (Extra wide)

Scroll management

The header automatically locks page scrolling when the sidebar or fullpage menus are open.

← Previous Table
Next → Footer

Cookie settings

Choose the data you want to share.

🙏 Analytics help us prioritize the right features — data in Switzerland, never resold.

Essentials Required

Necessary for operation (session, security).