FR | EN
Install
Documentation

Documentation - Dropdown.

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

Startup

Basic concepts

Utilities

Components

Dropdown

Marssel offers a flexible dropdown system to create navigation menus, action selectors or context menus with support for submenus and responsive modes.

Basic setup

The DropdownManager is automatically initialized: 

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

Simple dropdown

Basic structure of a drop-down menu:

Preview 
<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 with icons

Add icons to menu items: 

<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>To modify</span>
            </a>
        </li>
        <li>
            <a href="#" class="dropdown-item">
                <span class="icon-[copy] icon-size-[small]"></span>
                <span>Duplicate</span>
            </a>
        </li>
        <li>
            <a href="#" class="dropdown-item c-[D41212] bg-[fef2f2]:hover">
                <span class="icon-[trash] icon-size-[small]"></span>
                <span>DELETE</span>
            </a>
        </li>
    </ul>
</div>

Dropdown with separators

Organize actions with visual separators:

Preview 
<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">Profile</a></li>
        <li><a href="#" class="dropdown-item">Settings</a></li>
        <li class="border-t-[1px_solid_e5e7eb] my-[8px]"></li>
        <li><a href="#" class="dropdown-item">Help</a></li>
    </ul>
</div>

Dropdown with submenus

Create multi-level menus:

Preview 
<div class="dropdown">
    <button class="dropdown-toggle">
        Products
        <span class="icon-plus"></span>
    </button>
    <ul class="dropdown-menu list-style-[none]">
        <li><a href="#" class="dropdown-item">All products</a></li>
        <!-- Submenu -->
        <li class="dropdown-submenu list-style-[none]">
            <a href="#" class="dropdown-item---[d-[flex]+justify-[space-between]+items-[center]]">
                <span>Categories</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">Level 3 <span class="icon-right" aria-hidden="true"></span></a>
                    <ul class="dropdown-menu">
                        <a href="#" class="dropdown-item">Level 3.1</a>
                        <a href="#" class="dropdown-item">Level 3.2</a>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href="#" class="dropdown-item">What&#039;s new</a></li>
    </ul>
</div>

Full-width dropdown

Full-width dropdown

Preview

Electronic

Fashion

Home

Sports

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

            <!-- Column 1 -->
            <div class="mega-menu-column">
                <h4>Electronic</h4>
                <ul>
                    <li><a href="#">Smartphones</a></li>
                    <li><a href="#">Computers</a></li>
                    <li><a href="#">Tablets</a></li>
                    <li><a href="#">Accessories</a></li>
                </ul>
            </div>

            <!-- Column 2 -->
            <div class="mega-menu-column">
                <h4>Fashion</h4>
                <ul>
                    <li><a href="#">Man</a></li>
                    <li><a href="#">Women</a></li>
                    <li><a href="#">Child</a></li>
                    <li><a href="#">Shoes</a></li>
                </ul>
            </div>

            <!-- Column 3 -->
            <div class="mega-menu-column">
                <h4>Home</h4>
                <ul>
                    <li><a href="#">Furniture</a></li>
                    <li><a href="#">Decoration</a></li>
                    <li><a href="#">Kitchen</a></li>
                    <li><a href="#">Garden</a></li>
                </ul>
            </div>

            <!-- Column 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="#">Cycling</a></li>
                    <li><a href="#">Swimming</a></li>
                </ul>
            </div>

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

Positions available

Control the menu position with data-position:

Preview 
<!-- Bottom left: default -->
<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>

<!-- Bottom right -->
<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>

<!-- Up -->
<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>

<!-- Right -->
<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 in a navigation

Integrate dropdowns into a navigation menu: 

<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">Welcome</a>
        </li>

        <!-- Dropdown in nav -->
        <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle">
                Products
                <span class="icon-plus"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#" class="dropdown-item">Category 1</a></li>
                <li><a href="#" class="dropdown-item">Category 2</a></li>
                <li><a href="#" class="dropdown-item">Category 3</a></li>
            </ul>
        </li>

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

JavaScript API

Control dropdowns programmatically: 

// Open a dropdown
const dropdownId = 'my-dropdown';
marssel.dropdownManager.openDropdown(dropdownId);

// Close a dropdown
marssel.dropdownManager.closeDropdown(dropdownId);

// Toggle a dropdown
marssel.dropdownManager.toggleDropdown(dropdownId);

// Close all dropdowns
marssel.dropdownManager.closeAllDropdowns();

// Get a specific dropdown
const dropdown = marssel.dropdownManager.getDropdown(dropdownId);
console.log(dropdown);

// Get all open dropdowns
const openDropdowns = marssel.dropdownManager.getOpenDropdowns();
console.log(openDropdowns);

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

Responsive

Dropdowns adapt automatically:

  • Mobile (< 992px): Menu in static mode with side border
  • Desktop (≥ 992px): Floating menu with absolute positioning

Animated icon

The icon-plus icon automatically changes to minus (-) when the dropdown is opened: 

<button class="dropdown-toggle">
    Menu
    <span class="icon-plus"></span> <!-- Becomes - when opened -->
</button>

Personalized mega menu

Example of a mega menu with images: 

<div class="dropdown-fullwidth">
    <button class="dropdown-toggle">
        Our products
        <span class="icon-plus"></span>
    </button>

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

            <!-- Category with 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]">Electronic</h4>
                <p class="c-[6b7280] mb-[16px]">Discover our latest technologies</p>
                <a href="#" class="bg-[2563eb] c-[ffffff] p-[10px_20px] rounded-[6px] text-decoration-[none] d-[inline-block]">
                    Explore
                </a>
            </div>

            <!-- Repeat for other categories -->

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

Automatic closing

Dropdowns close automatically:

  • When clicked outside the menu
  • When changing breakpoint (resize)
  • When opening another dropdown
  • When clicking on a menu item (configurable)

Accessibility

Marsl dropdowns include:

  • Keyboard support (Esc to close)
  • Exterior click closure
  • Visual indication of open/closed status
  • Animated icon transformation
  • Appropriate semantic structure

← Previous Footer
Next → Tabs

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).