Horizontal menu with icons and semi-transparency
This example shows a standard (main) horizontal menu with icons. Submenus are semi-transparent, letting the page's text shine through.
Multiple levels of hierarchy
This example shows the menu with multiple levels of hierarchy. Special repositioning logic prevents "stacking" for submenus.
Menu Bar with Search Box
This example shows the navigation menu with the search box on the right side of the menu bar.
Multi-column submenu
The "Products" submenu is split into three columns. Elements are arranged into groups (with headers).
Menu with Images
This example shows the menu which includes Image Elements.
The "DIY Projects" submenu is split into columns.
Responsive Menu
If the viewport width is less than the width of the menu bar, an alternate compact menu appears.
Two or more menus on a single page
This example shows the page that includes both horizontal (main) and vertical (side) menus. Multiple menus on a single page are allowed.
Menu with scrollable submenus
This example shows the menu with a large number of links in submenus. The submenus have a height of 300 pixels.
Sticky (Fixed) Menus
This example shows the menu which is locked into place so that it does not go away when the user scrolls down the page.
Element Highlighting
This example shows the menu with a highlighted Link Element. The highlighted element indicates which page the user is currently viewing.
CSS customization
This example shows the menus that are customized with the additional CSS code.