Frank UI
Home Components Examples
Theme Customizer

Menu Bar

The Menu Bar component is a multi-level navigation system that supports nested dropdown files, active hovers (automatic switching between columns), keyboard alignment shortcuts, and icon prefix markers. Ideal for application layouts, sidebars, or toolbars.

Multi-Level Dropdown Menus

Click on any top-level menu item above (like File or Edit) to trigger the list, then hover over other header items or submenus (such as Share or Find) to observe immediate cascading switching and multi-level layout rendering. 

<!-- Menu Bar layout wrapper -->
<ul data-role="menu" class="menubar">
    
    <!-- Top Level File Item -->
    <li class="menu-item">
        <a href="#">File</a>
        
        <!-- Dropdown -->
        <ul class="menu-dropdown">
            <li>
                <a href="#">
                    <span class="menu-label-wrapper">
                        <i data-lucide="file-plus"></i>
                        <span>New File</span>
                    </span>
                    <span class="menu-shortcut">Ctrl+N</span>
                </a>
            </li>
            <li class="divider"></li>
            
            <!-- Submenu: Share -->
            <li class="menu-item">
                <a href="#">
                    <span class="menu-label-wrapper">
                        <i data-lucide="share"></i>
                        <span>Share</span>
                    </span>
                    <span class="arrow">▶</span>
                </a>
                <ul class="menu-dropdown">
                    <li><a href="#">Email</a></li>
                    <li><a href="#">Slack</a></li>
                </ul>
            </li>
        </ul>
    </li>

</ul>

<!-- Initialization script -->
<script>
    document.addEventListener('DOMContentLoaded', () => {
        Menu.init();
    });
</script>

Configuration & Initialization

Initialize menus declaratively by attaching the role identifier: