FR | EN
Installer
Documentation

Documentation - Dropdown.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Démarrage

Concepts de base

Utilitaires

Composants

Dropdown

Marssel propose un système de dropdown (menu déroulant) flexible pour créer des menus de navigation, sélecteurs d'actions ou menus contextuels avec support des sous-menus et modes responsive.

Configuration de base

Le DropdownManager est automatiquement initialisé : 

const marssel = new Marssel();
// Le DropdownManager est prêt à l'emploi

Dropdown simple

Structure de base d'un menu déroulant :

Aperçu 
<div class="dropdown">
    <button class="dropdown-toggle">
        Options
        <span class="icon-plus"></span>
    </button>
    <ul class="dropdown-menu list-style-[none]">
        <li><a href="#" class="dropdown-item">Action 1</a></li>
        <li><a href="#" class="dropdown-item">Action 2</a></li>
        <li><a href="#" class="dropdown-item">Action 3</a></li>
    </ul>
</div>

Dropdown avec icônes

Ajoutez des icônes aux éléments du menu : 

<div class="dropdown">
    <button class="dropdown-toggle---[bg-[2563eb]+c-[ffffff]+p-[10px_20px]+rounded-[6px]+border-[none]+cursor-[pointer]]">
        Actions
        <span class="icon-plus"></span>
    </button>
    <ul class="dropdown-menu list-style-[none]">
        <li>
            <a href="#" class="dropdown-item---[d-[flex]+items-[center]+gap-[10px]]">
                <span class="icon-[pencil] icon-size-[small]"></span>
                <span>Modifier</span>
            </a>
        </li>
        <li>
            <a href="#" class="dropdown-item">
                <span class="icon-[copy] icon-size-[small]"></span>
                <span>Dupliquer</span>
            </a>
        </li>
        <li>
            <a href="#" class="dropdown-item c-[D41212] bg-[fef2f2]:hover">
                <span class="icon-[trash] icon-size-[small]"></span>
                <span>Supprimer</span>
            </a>
        </li>
    </ul>
</div>

Dropdown avec séparateurs

Organisez les actions avec des séparateurs visuels :

Aperçu 
<div class="dropdown">
    <button class="dropdown-toggle">
        Menu
        <span class="icon-plus"></span>
    </button>
    <ul class="dropdown-menu list-style-[none]">
        <li><a href="#" class="dropdown-item">Profil</a></li>
        <li><a href="#" class="dropdown-item">Paramètres</a></li>
        <li class="border-t-[1px_solid_e5e7eb] my-[8px]"></li>
        <li><a href="#" class="dropdown-item">Aide</a></li>
    </ul>
</div>

Dropdown avec sous-menus

Créez des menus à plusieurs niveaux :

Aperçu 
<div class="dropdown">
    <button class="dropdown-toggle">
        Produits
        <span class="icon-plus"></span>
    </button>
    <ul class="dropdown-menu list-style-[none]">
        <li><a href="#" class="dropdown-item">Tous les produits</a></li>
        <!-- Sous-menu -->
        <li class="dropdown-submenu list-style-[none]">
            <a href="#" class="dropdown-item---[d-[flex]+justify-[space-between]+items-[center]]">
                <span>Catégories</span>
                <span class="icon-[chevron-right] icon-size-[small]"></span>
            </a>
            <ul class="dropdown-menu list-style-[none]">
                <li class="dropdown-submenu">
                    <a href="#" class="dropdown-item">Niveau 3 <span class="icon-right" aria-hidden="true"></span></a>
                    <ul class="dropdown-menu">
                        <a href="#" class="dropdown-item">Niveau 3.1</a>
                        <a href="#" class="dropdown-item">Niveau 3.2</a>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href="#" class="dropdown-item">Nouveautés</a></li>
    </ul>
</div>

Dropdown pleine largeur

Dropdown pleine largeur

Aperçu

Électronique

Mode

Maison

Sports

<div class="dropdown-fullwidth">
    <button class="dropdown-toggle">
        Produits
        <span class="icon-plus"></span>
    </button>
    <div class="dropdown-menu-fullwidth">
        <div class="mega-menu-grid">

            <!-- Colonne 1 -->
            <div class="mega-menu-column">
                <h4>Électronique</h4>
                <ul>
                    <li><a href="#">Smartphones</a></li>
                    <li><a href="#">Ordinateurs</a></li>
                    <li><a href="#">Tablettes</a></li>
                    <li><a href="#">Accessoires</a></li>
                </ul>
            </div>

            <!-- Colonne 2 -->
            <div class="mega-menu-column">
                <h4>Mode</h4>
                <ul>
                    <li><a href="#">Homme</a></li>
                    <li><a href="#">Femme</a></li>
                    <li><a href="#">Enfant</a></li>
                    <li><a href="#">Chaussures</a></li>
                </ul>
            </div>

            <!-- Colonne 3 -->
            <div class="mega-menu-column">
                <h4>Maison</h4>
                <ul>
                    <li><a href="#">Meubles</a></li>
                    <li><a href="#">Décoration</a></li>
                    <li><a href="#">Cuisine</a></li>
                    <li><a href="#">Jardin</a></li>
                </ul>
            </div>

            <!-- Colonne 4 -->
            <div class="mega-menu-column">
                <h4>Sports</h4>
                <ul>
                    <li><a href="#">Fitness</a></li>
                    <li><a href="#">Running</a></li>
                    <li><a href="#">Cyclisme</a></li>
                    <li><a href="#">Natation</a></li>
                </ul>
            </div>

        </div>
    </div>
</div>

Positions disponibles

Contrôlez la position du menu avec data-position :

Aperçu 
<!-- En bas à gauche : défaut -->
<div class="dropdown" data-position="bottom-left">
    <button class="dropdown-toggle">Bottom Left</button>
    <ul class="dropdown-menu">
        <li><a href="#" class="dropdown-item">Item 1</a></li>
    </ul>
</div>

<!-- En bas à droite -->
<div class="dropdown" data-position="bottom-right">
    <button class="dropdown-toggle">Bottom Right</button>
    <ul class="dropdown-menu">
        <li><a href="#" class="dropdown-item">Item 1</a></li>
    </ul>
</div>

<!-- En haut -->
<div class="dropdown" data-position="top-left">
    <button class="dropdown-toggle">Top Left</button>
    <ul class="dropdown-menu">
        <li><a href="#" class="dropdown-item">Item 1</a></li>
    </ul>
</div>

<!-- À droite -->
<div class="dropdown" data-position="right-top">
    <button class="dropdown-toggle">Right</button>
    <ul class="dropdown-menu">
        <li><a href="#" class="dropdown-item">Item 1</a></li>
    </ul>
</div>

Dropdown dans une navigation

Intégrez des dropdowns dans un menu de navigation : 

<nav class="header-navbar">
    <ul class="nav---[d-[flex]+gap-[20px]+list-style-[none]+p-[0]]">
        <li class="nav-item">
            <a href="#" class="nav-link">Accueil</a>
        </li>

        <!-- Dropdown dans la nav -->
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle">
                Produits
                <span class="icon-plus"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#" class="dropdown-item">Catégorie 1</a></li>
                <li><a href="#" class="dropdown-item">Catégorie 2</a></li>
                <li><a href="#" class="dropdown-item">Catégorie 3</a></li>
            </ul>
        </li>

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

API JavaScript

Contrôlez les dropdowns programmatiquement : 

// Ouvrir un dropdown
const dropdownId = 'my-dropdown';
marssel.dropdownManager.openDropdown(dropdownId);

// Fermer un dropdown
marssel.dropdownManager.closeDropdown(dropdownId);

// Basculer un dropdown
marssel.dropdownManager.toggleDropdown(dropdownId);

// Fermer tous les dropdowns
marssel.dropdownManager.closeAllDropdowns();

// Obtenir un dropdown spécifique
const dropdown = marssel.dropdownManager.getDropdown(dropdownId);
console.log(dropdown);

// Obtenir tous les dropdowns ouverts
const openDropdowns = marssel.dropdownManager.getOpenDropdowns();
console.log(openDropdowns);

// Mettre à jour la configuration
marssel.dropdownManager.updateDropdownConfig(dropdownId, {
    position: 'bottom-right',
    closeOnClick: false
});

Responsive

Les dropdowns s'adaptent automatiquement :

  • Mobile (< 992px) : Menu en mode statique avec bordure latérale
  • Desktop (≥ 992px) : Menu flottant avec positionnement absolu

Icône animée

L'icône icon-plus se transforme automatiquement en moins (-) lorsque le dropdown est ouvert : 

<button class="dropdown-toggle">
    Menu
    <span class="icon-plus"></span> <!-- Devient - quand ouvert -->
</button>

Mega menu personnalisé

Exemple d'un mega menu avec images : 

<div class="dropdown-fullwidth">
    <button class="dropdown-toggle">
        Nos produits
        <span class="icon-plus"></span>
    </button>

    <div class="dropdown-menu-fullwidth">
        <div class="d-[grid] grid-cols-[repeat(3_1fr)] gap-[24px] p-[32px]">

            <!-- Catégorie avec image -->
            <div class="text-align-[center]">
                <img src="category1.jpg"
                    alt="Électronique"
                    class="w-[100%] h-[200px] object-fit-[cover] rounded-[8px] mb-[16px]">
                <h4 class="font-weight-[600] mb-[12px]">Électronique</h4>
                <p class="c-[6b7280] mb-[16px]">Découvrez nos dernières technologies</p>
                <a href="#" class="bg-[2563eb] c-[ffffff] p-[10px_20px] rounded-[6px] text-decoration-[none] d-[inline-block]">
                    Explorer
                </a>
            </div>

            <!-- Répéter pour autres catégories -->

        </div>
    </div>
</div>

Fermeture automatique

Les dropdowns se ferment automatiquement :

  • Au clic en dehors du menu
  • Lors du changement de breakpoint (resize)
  • À l'ouverture d'un autre dropdown
  • Au clic sur un élément du menu (configurable)

Accessibilité

Les dropdowns Marssel incluent :

  • Support du clavier (Échap pour fermer)
  • Fermeture au clic extérieur
  • Indication visuelle de l'état ouvert/fermé
  • Transformation animée de l'icône
  • Structure sémantique appropriée

← Précédent Footer
Suivant → Tabs

Réglages des cookies

Choisissez les données que vous souhaitez partager.

🙏 Les analytics nous aident à prioriser les bonnes fonctionnalités — données en Suisse, jamais revendues.

Essentiels Requis

Nécessaires au fonctionnement (session, sécurité).