Menu

A flexible navigation system built on the Popper architecture, enabling precisely positioned menus that intelligently adapt to viewport boundaries.

Popper

A foundational menu configuration powered entirely by the Popper system, demonstrating the core relationship between the toggle, navigation container, and content structure. For detailed documentation, visit the Popper page.
popper
|
|
popper-toggle
|
popper-navigation
|
|
popper-content
Single Button Style & Content
Menu
Open Menu on Hover
Menu
Single Button Style & Different Content
Open Menu
Close Menu
Different Button Styles & Content
Open Menu
Close Menu

Popper Auto-Close on Menu Click

Demonstrates how the navigation panel automatically closes after selecting a menu item, while maintaining the standard Popper structure and positioning behavior. For detailed documentation, visit the Popper page.
Important: In this setup, the popper class is applied to the outer container rather than directly to the Dropdown component. The Dropdown is nested inside this container with the z-auto addon class so its internal elements can follow the z-index settings defined within the Popper structure. The Classic Interaction connected to popper still controls the opening and closing behavior. Because popper-navigation sits outside the Dropdown component while remaining nested inside the popper container, it opens and closes together with the Dropdown state. Since the navigation itself is not nested inside the Dropdown, selecting a menu item automatically closes the menu through the native Dropdown behavior.
popper
|
|
z-auto
|
popper-navigation
|
|
popper-content
Single Button Style & Content
Menu
Button Block
Button Link
Single Button Style & Different Content
Open Menu
Close Menu
Button Block
Button Link
Different Button Styles & Content
Open Menu
Close Menu
Button Block
Button Link

Split Button

Split button structures that combine a primary action with a Popper menu for additional options, supporting flexible trigger types and interaction behavior.
Base (Links)
Menu
Auto-Close on Menu Click (Div Blocks)
Menu
Item
Item with Icon

Mega Menu - Header

Reusable mega menu structures and layouts designed for Header navigation, providing flexible content organization, positioning, and responsive behavior across different navigation setups.
The Mega Menu Header uses Classic Interactions, found in the right-side Interactions tab alongside Style and Settings. Its behavior follows the Popper system, with structural modifications using classes such as mega-menu, mega-menu-toggle, and mega-menu-navigation-navbar.

‍Mega Menu Header Open and Mega Menu Header Close control the navigation panel, while Popper Open - Show/Hide Content, Popper Close - Show/Hide Content, Popper Open - Animation, and Popper Close - Animation manage the corresponding visibility and animation states.

All interactions are connected to the Dropdown component and use its native open and closed states to keep the Mega Menu behavior synchronized.
Auto Height
mega-menu
|
|
mega-menu-toggle
|
mega-menu-navigation-navbar
|
|
mega-menu-layout-navbar
|
|
mega-menu-content-navbar
Single Button Style & Content
Mega Menu
Single Button Style & Different Content
Open Menu
Close Menu
Different Button Styles & Content
Open Menu
Close Menu
Full Screen
mega-menu
|
|
mega-menu-toggle
|
mega-menu-navigation-navbar
|
|
mega-menu-layout-navbar
|
|
mega-menu-content-navbar
is-full-screen
Single Button Style & Content
Mega Menu
Single Button Style & Content
Open Menu
Close Menu
Single Button Style & Content
Open Menu
Close Menu

Mega Menu - Sidebar

Reusable mega menu structures and layouts designed for Sidebar navigation, providing flexible content organization, positioning, and responsive behavior across different navigation setups.
The Mega Menu Sidebar uses Classic Interactions, found in the right-side Interactions tab alongside Style and Settings. Its behavior follows the Popper system, with structural modifications using classes such as mega-menu, mega-menu-toggle, and mega-menu-navigation-sidenav.

‍Mega Menu Sidebar Open and Mega Menu Sidebar Close control the navigation panel, while Popper Open - Show/Hide Content, Popper Close - Show/Hide Content, Popper Open - Animation, and Popper Close - Animation manage the corresponding visibility and animation states.

All interactions are connected to the Dropdown component and use its native open and closed states to keep the Mega Menu behavior synchronized.
Container Set Width
The width of the Mega Menu is determined by the container-width-* element placed inside the Mega Menu Content.
mega-menu
|
|
mega-menu-toggle
|
mega-menu-navigation-sidenav
|
|
mega-menu-layout-sidenav
|
|
mega-menu-content-sidenav
Single Button Style & Content
Mega Menu
Single Button Style & Content
Open Menu
Close Menu
Single Button Style & Content
Mega Menu
Close Menu
Full Screen
mega-menu
|
|
mega-menu-toggle
|
mega-menu-navigation-sidenav
|
|
mega-menu-layout-sidenav
|
|
mega-menu-content-sidenav
is-full-screen
Single Button Style & Content
Mega Menu - Full Screen
Single Button Style & Content
Open Menu
Close Menu
Single Button Style & Content
Mega Menu
Close Menu

Layouts

Reusable menu layouts used to organize navigation links and supporting content across different interface structures.
Popper / Popover
Basic menu layouts used for straightforward navigation with a small number of links and minimal supporting content.
When using these layouts inside a toggle-based menu, such as a Popper or Popover component, place the layout within the popper-content or popover-content element so it inherits the correct menu structure and behavior.
Button Link
Button Link
Button Link
Button Link
Button Link
Button Link
Button Link
Button Link
Image Placeholder
Short descriptive text can be placed here.
Button Link
Button Link
Button Link
Button Link
Menu Category
Button Link
Button Link
Menu Category
Button Link
Button Link
Menu Category
Button Link
Button Link
Button Link
Button Link
Menu Category
Image Placeholder
Short descriptive text can be placed here.
Button Link
Button Link
Button Link
Button Link
Button Link
Supporting text can be placed here
Button Link
Supporting text can be placed here
Button Link
Supporting text can be placed here
Button Link
Button Link
Button Link
Menu Category
Button Link
Supporting text can be placed here
Button Link
Supporting text can be placed here
Button Link
Supporting text can be placed here
Button Link
Button Link
Button Link
Menu Category
Button Link
Button Link
Button Link
Button Link
Button Link
Link
Link
Link
Image Placeholder
Short descriptive text can be placed here.
Menu Category
Button Link
Button Link
Button Link
Supporting text can be placed here
Link
Link
Link
Link
Image Placeholder
Short descriptive text can be placed here.
Label
Use this area for supporting content or context.
Button Link
Mega Menu - Header
Expanded menu layouts designed for header navigation, allowing larger groups of links, categories, and supporting content to be organized within a single dropdown.
When using these layouts inside a Header Mega Menu, place the layout within the mega-menu-content-navbar element so it fits the intended mega menu structure and behavior.
Join Our Newsletter
Stay up to date with the latest news and updates.
Thank you! Your submission has been received!
Something went wrong while submitting the form. Please try again.
Menu Category
Button Link
Button Link
Supporting text can be placed here
Menu Category
Text Link
Button Text Link
Join Our Newsletter
Stay up to date with the latest news and updates.
Thank you! Your submission has been received!
Something went wrong while submitting the form. Please try again.
Join Our Newsletter
Stay up to date with the latest news and updates.
Thank you! Your submission has been received!
Something went wrong while submitting the form. Please try again.
Menu Category
Button Link
Button Link
Supporting text can be placed here
Menu Category
Text Link
Button Text Link
Menu Category
Image Placeholder
Short descriptive text can be placed here.
Join Our Newsletter
Stay up to date with the latest news and updates.
Thank you! Your submission has been received!
Something went wrong while submitting the form. Please try again.
Menu Category
Link
Link
Link
Join Our Newsletter
Stay up to date with the latest news and updates.
Thank you! Your submission has been received!
Something went wrong while submitting the form. Please try again.
Image Placeholder
Menu Category
Button Link
Button Link
Supporting text can be placed here
Menu Category
Text Link
Button Text Link
Menu Category
Link
Link
Link
Join Our Newsletter
Stay up to date with the latest news and updates.
Thank you! Your submission has been received!
Something went wrong while submitting the form. Please try again.
Image Placeholder
Image Placeholder
Image PlaceholderImage PlaceholderImage PlaceholderImage Placeholder
Image Placeholder
Image Placeholder
Join Our Newsletter
Stay up to date with the latest news and updates.
Thank you! Your submission has been received!
Something went wrong while submitting the form. Please try again.
Mega Menu - Sidebar
Expanded menu layouts designed for sidebar navigation, allowing larger groups of links, categories, and supporting content to be organized within the sidenav structure.
When using these layouts inside a Sidebar Mega Menu, place the layout content within the mega-menu-layout-sidenav element to ensure it follows the intended mega menu structure and behavior. The sidenav-offset element should be placed immediately after the mega-menu-content-sidenav element in the Navigator (Z).
Compact
Control the component width by replacing the container-width-* class nested inside sidenav-breakpoint-hidden, which is nested within the background-color-* element. Choose the width value that best fits the desired layout.
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Button Link
Join Our Newsletter
Stay up to date with the latest news and updates.
Thank you! Your submission has been received!
Something went wrong while submitting the form. Please try again.
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Full Screen
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Button Link
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Button Link
Image Placeholder
Menu Category
Menu Category
Menu Category
Menu Category
Menu Category
Image Placeholder
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Image Placeholder
Image Placeholder
Image Placeholder
Image Placeholder
Image Placeholder
Image Placeholder
Image Placeholder
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Supporting text can be placed here
Button Link
Button Link
Button Link

Mega Menu Elements

Elements used to build mega menu structures that adapt to the selected Navbar variation. Header and Sidebar versions are included so the mega menu can align correctly with the active navigation layout.
Mega Menu System Container
Main wrapper for the mega menu component.
mega-menu
Mega Menu Toggle
Trigger element used to open and close the connected mega menu.
mega-menu-toggle
Header
Sidebar
Mega Menu Navigation
Navigation container for the mega menu. Header and Sidebar versions are used so the menu can respond correctly to the active Navbar variation.
mega-menu-navigation-navbar
Note: Element is hidden by default.
mega-menu-navigation-sidenav
Note: Element is hidden by default.
Mega Menu Layout
Layout wrapper used to position the mega menu inside the active navigation structure.
mega-menu-layout-navbar
Note: Element is hidden to prevent overlay.
mega-menu-layout-sidenav
Note: Element is hidden to prevent overlay.
Mega Menu Content
Content container used to hold the visible mega menu content. Header and Sidebar versions allow the content to adapt to the active navigation layout, with optional full-screen variations available when needed.
mega-menu-content-navbar
mega-menu-content-navbar
is-full-screen
Note: Element is hidden to prevent overlay.
mega-menu-content-sidenav
mega-menu-content-sidenav
is-full-screen
Note: Element is hidden to prevent overlay.
Custom Behavior -
Header & Sidebar

Offset

This behavior keeps offset elements synchronized with the live size of the header and sidenav.

Offset elements are used as spacing references for layouts, navigation systems, and menu structures that need to account for fixed or persistent UI areas. Instead of manually setting spacing values, the offset elements use the current width and height of their matching source element as minimum dimensions.

The header-offset elements copy the live width and height of the header and apply them as min-width and min-height.

The sidenav-offset elements copy the live width and height of the sidenav and apply them as min-width and min-height.

This helps related elements stay aligned when the header or sidenav changes size across breakpoints, responsive states, interactions, or dynamic content updates.

The behavior updates on page load, resize, orientation change, content changes, class changes, style changes, hidden-state changes, and live element size changes. This keeps the offsets accurate even when the layout changes after the page has already loaded.

Use this behavior when a layout, menu, or spacing element needs to reserve at least the same space as the header or sidenav without relying on fixed values.

Mega Menu Close Sync

This behavior keeps the navbar and sidenav mega menu close elements synchronized with the open state of their matching mega menus.

The mega-menu-close-navbar and mega-menu-close-sidenav elements are hidden by default. When a matching mega menu is open, the correct close element is shown as flex. When no matching mega menu is open, the close element is hidden again.

The behavior checks each mega-menu for open states, aria-expanded states, and visible navigation panels. This allows the close element to stay accurate even when the menu state is controlled by Interactions (X), dropdown behavior, keyboard actions, or responsive layout changes.

The navbar close element responds to mega menus that contain mega-menu-navigation-navbar.

The sidenav close element responds to mega menus that contain mega-menu-navigation-sidenav.

The behavior updates after clicks, mouse actions, touch actions, keyboard actions, resize events, and class, style, or aria-expanded changes.

Use this behavior when a shared close element needs to appear only while a navbar or sidenav mega menu is open.

This custom behavior is placed inside the
Global
component so updates can be managed from a single central location. If you add or adjust customizations inside the
Custom Behavior - Header & Sidebar
component, the changes will apply consistently across the site.